工具

  • JSON/XML
  • 正则
  • 解码
  • 接口
  • Cron
  • Markdown
  • 前端
  • 后端
    • Java代码

  • 文章
    • 目录
    • 标签
  • 小工具
    • 文章
    • 富文本
    • 二维码
    • 音乐
    • 时间
    • 酷炫
    • H5小游戏
  • 资料
    • python
  • 开源
    • OA
    • 网盘
  • 其他
    • 吃什么
    • 关于

  • 搜索
独白 Markdown 运营商 APP 微服务 Spring Boot 工具 Java基础

halo博客-主题是halo-theme-next下的Mist模式-持了二级菜单

发表于 2019-12-13 | 分类于 信息 | 0 | 阅读次数 1708

此项目选用halo博客,感谢作者的开源精神;其中使用的主题是halo-theme-next下的Mist模式,本项目再此基础上做了调整,将整体页面宽度放宽,并且支持了二级菜单; 比如博客和小工具菜单 增加文件:

iissnan_next\layout_partials\head\custom-head.css

.menu > li > ul{
		  padding: 8px; 
		  position: absolute; 
		  background: #e1e1e1; 
		  /*white-space: nowrap;*/
		  box- shadow: 0 0 5px rgb(0, 0, 0, 0.5);
		  display: none;
		  text-align: center;
		  z-index: 999;
		  border-top: 1px solid #000
}
.menu > li > ul > li{
	display: inline-block;
  margin: 0 6px;
  list-style: none;
  width: 80px;
}
.menu > li.active > ul{
            display: block;
        }
.menu > li > ul > li > a:hover {
  color: #000;
  font-weight: bold;
}
@media (max-width: 767px) {
  .menu > li > ul{
		  position: relative; 
		  display: block;
	}
	.menu > li > ul > li{
	  display: inline;
	  margin: 0;
	}
}

iissnan_next\layout_partials\head\custom-head.js

window.onload = function () {
        let liTags = document.querySelectorAll(".menu > li");
		for (let i=0; i<liTags.length; i++){
			liTags[i].onmouseenter = function (e) {
				let li = e.currentTarget;
				li.classList.add("active");
			}
			liTags[i].onmouseleave = function (e) {
				let li = e.currentTarget;
				li.classList.remove("active");
			}
		}
    }

修改文件:

iissnan_next\layout_partials\head\custom-head.ftl

<script src="${static!}/layout/_partials/head/custom-head.js"></script>
<link href="${static!}/layout/_partials/head/custom-head.css" rel="stylesheet">

iissnan_next\layout_partials\header.ftl

<ul id="menu" class="menu">
  <@menuTag method="list">
  <#if menus?? && menus?size gt 0>
      <#list menus?sort_by('priority') as menu>
		<#assign menu2Count = 0>
		<#if (menu.parentId!) == 0>
			<li class="menu-item menu-item-${menu.url!}">
			  <a href="${menu.url!}" rel="section" target="${menu.target}">
				<#if (menu.icon!)!=''>
				  <i class="menu-item-icon fa fa-fw fa-${menu.icon!}"></i> <br />
				</#if>
				${menu.name!}
			  
			  <#list menus?sort_by('priority') as menu2>
				<#if menu2.parentId == menu.id>
				  <#if menu2Count == 0>
						<i class="menu-item-icon fa fa-fw fa-caret-down"></i>
						</a>
					  <ul>
				  </#if>
						<li>
							<a href="${menu2.url!}" rel="section" target="${menu2.target}">
								<#if (menu2.icon!)!=''>
								  <i class="menu-item-icon fa fa-fw fa-${menu2.icon!}"></i> <br />
								</#if>
								${menu2.name!}
							  </a>
						</li>
				  <#assign menu2Count = menu2Count + 1>
				 </#if>
			   </#list>
			   <#if menu2Count gt 0>
					 </ul> 
				  </#if>
				  <#if menu2Count == 0>
					 </a> 
				  </#if>
			</li>
		</#if>
      </#list>
  </#if>
  </@menuTag>
    <#if settings.local_search_enable!false>
    <li class="menu-item menu-item-search">
        <a href="javascript:;" class="popup-trigger">
        <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
        搜索
      </a>
    </li>
    </#if>
</ul>

iissnan_next\source\css\Mist\main.css

主要是修改了部分样式
# 独白 # Markdown # 运营商 # APP # 微服务 # Spring Boot # 工具 # Java基础
集群部署时的分布式 session 如何实现?
beyond compare3 序列号
  • 文章目录
  • 站点概览
工具

工具

软件工具服务生活

31 日志
4 分类
8 标签
友情链接
  • GitHub
0%
© 2011 — 2025 爱好者
聊推科技