HexoブログAyerテーマ美化の追加二級メニュー
私のブログ:https://blog.justlovesmile.topHexoトピックナビゲーションバーに二次メニューを追加する簡単な方法
最初のステップでは、使用するトピックのナビゲーションバーファイルを見つけます.たとえば、Ayerトピックの内で、中でコードを追加します
第3歩、cssを追加して、これは私のスタイルで、もちろん自分で修正することができます
ステップ4では、ayerの
最初のステップでは、使用するトピックのナビゲーションバーファイルを見つけます.たとえば、Ayerトピックの
hexo\themes\ayer\layout\_partial\sidebar.ejs第2歩、ファイルを開けて、ファイルが対応してメニューの位置を生成することを探し当てて、普通は <ul class="nav nav-main">
<li class="nav-item">
<a class="nav-item-link" href="">a>
<ul class="sub-menu">
<li>
<small><a class="nav-item-link" href="">
a>small>
li>
ul>
li>
ul>
第3歩、cssを追加して、これは私のスタイルで、もちろん自分で修正することができます
<style>
.nav-main li ul{
display: none;
}
.nav-main li:hover ul{
display:block;
}
.sub-menu{
position: absolute;
background: #fff;
padding: 5px;
width: 8rem;
z-index:1000;
text-align: center;
border-radius: 5px;
box-shadow: 0 1px 40px -8px rgba(0,0,0,.5);
-webkit-animation: fadeInUp .3s .1s ease both;
list-style:none;
}
.nav-main li ul::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
style>
ステップ4では、ayerの
hexo\themes\ayer\_config.ymlのようなトピックの下のプロファイルを見つけ、必要な場所にsubmenusを追加し、メニューmenu情報を変更します.例えば、私の:#
menu:
: { path: / }
: { path: /talks }
: { path: /friends }
: { path: /random.html }
: { path: /guestbook }
: { path: /archives ,submenus: {
: { path: /categories },
: { path: /tags },
: { path: /photos }
} }
: { path: /about ,submenus: {
: { path: /analytics },
: { path: https://monitor.justlovesmile.top }
} }