说明
给出一个情形: 所有页面都需要导航栏, 可代码不能四处飞
把导航栏的逻辑放在Partials目录下的一个文件, 在需要处加载该文件
Partials
注意两个路径
| - |
|---|
layouts/partials |
themes/<THEME>/layouts/partials |
当我们使用 partial 方法时, 会去到这两个路径查找指定文件
优化导航栏代码
问题: 导航栏Logo与左边界过近
在导航栏内部添加container属性
- container效果
1<div class="container p-5"> 2 <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> 3 <div class="container-fluid"> 4 <a class="navbar-brand" href="/">六一的部落格</a> 5 <ul class="navbar-nav"> 6 <!-- 遍历菜单 --> 7 </ul> 8 </div> 9 </nav> 10</div>
- container-fluid效果
1<div class="container p-5"> 2 <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> 3 <div class="container-fluid"> 4 <a class="navbar-brand" href="/">六一的部落格</a> 5 <ul class="navbar-nav"> 6 <!-- 遍历菜单 --> 7 </ul> 8 </div> 9 </nav> 10</div>
问题: 菜单元素右对齐
为菜单列表添加 me-auto 属性
1<div class="container p-5"> 2 <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> 3 <div class="container-fluid"> 4 <a class="navbar-brand" href="/">六一的部落格</a> 5 <ul class="navbar-nav me-auto"> 6 <!-- 遍历菜单 --> 7 </ul> 8 </div> 9 </nav> 10</div>
将导航栏代码移动到partials目录
选择 themes/<THEME>/layouts/partials , 创建navbar.html文件, 写入导航栏逻辑
1<div class="container p-5"> 2 <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> 3 <div class="container-fluid"> 4 <a class="navbar-brand" href="/">六一的部落格</a> 5 <ul class="navbar-nav me-auto"> 6 {{ range .Site.Menus.main }} 7 {{ if .HasChildren }} 8 <li class="nav-item dropdown"> 9 <a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-bs-toggle="dropdown"> 10 {{ .Name }} 11 </a> 12 <div class="dropdown-menu"> 13 {{ range .Children }} 14 <a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a> 15 {{ end }} 16 </div> 17 </li> 18 {{ else }} 19 <li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name }}</a></li> 20 {{ end }} 21 {{ end }} 22 </ul> 23 </div> 24 </nav> 25</div>
需要处调用partial方法
1{{ partial "navbar.html" . }}
相同处境: 侧边导航栏
themes/<THEME>/layouts/partials/offcanvas.html
1<style>body{min-height:100vh;min-height:-webkit-fill-available}html{height:-webkit-fill-available}main{display:flex;flex-wrap:nowrap;height:100vh;height:-webkit-fill-available;max-height:100vh;overflow-x:auto;overflow-y:hidden}.b-example-divider{flex-shrink:0;width:1.5rem;height:100vh;background-color:rgba(0,0,0,.1);border:solid rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgba(0,0,0,.1),inset 0 .125em .5em rgba(0,0,0,.15)}.bi{vertical-align:-.125em;pointer-events:none;fill:currentColor}.dropdown-toggle{outline:0}.nav-flush .nav-link{border-radius:0}.btn-toggle{display:inline-flex;align-items:center;padding:.25rem .5rem;font-weight:600;color:rgba(0,0,0,.65);background-color:transparent;border:0}.btn-toggle:hover,.btn-toggle:focus{color:rgba(0,0,0,.85);background-color:#d2f4ea}.btn-toggle::before{width:1.25em;line-height:0;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform .35s ease;transform-origin:.5em 50%}.btn-toggle[aria-expanded="true"]{color:rgba(0,0,0,.85)}.btn-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}.btn-toggle-nav a{display:inline-flex;padding:.1875rem .5rem;margin-top:.125rem;margin-left:1.25rem;text-decoration:none}.btn-toggle-nav a:hover,.btn-toggle-nav a:focus{background-color:#d2f4ea}.scrollarea{overflow-y:auto}.fw-semibold{font-weight:600}.lh-tight{line-height:1.25}.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width:768px){.bd-placeholder-img-lg{font-size:3.5rem}}</style> 2 3<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> 4 <symbol id="grid" viewBox="0 0 16 16"> 5 <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> 6 </symbol> 7</svg> 8 9<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;"> 10 <a href="/notebook" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> 11 <svg class="bi me-2" width="30" height="24"><use xlink:href="#grid"/></svg> 12 <span class="fs-5 fw-semibold">类别</span> 13 </a> 14 <ul class="list-unstyled ps-0"> 15 {{ range where .Site.Sections "Section" "notebook"}} 16 {{ range .Sections }} 17 <li class="mb-1 my-1 ms-3"> 18 <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="false"> 19 {{ .Title }} 20 </button> 21 <div class="collapse" id="section-{{ md5 .Title }}"> 22 <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> 23 {{ range .Pages }} 24 {{ if .IsNode }} 25 <li class="mb-1 my-1 ms-3"> 26 <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="false"> 27 {{ .Title }} 28 </button> 29 30 <div class="collapse" id="section-{{ md5 .Title }}"> 31 <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> 32 {{ range .Pages }} 33 34 {{ if .IsNode }} 35 <li class="mb-1 my-1 ms-3"> 36 <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="false"> 37 {{ .Title }} 38 </button> 39 40 <div class="collapse" id="section-{{ md5 .Title }}"> 41 <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> 42 {{ range .Pages }} 43 <li><a href="{{ .Permalink }}" class="link-dark rounded">{{ .Title}} </a></li> 44 {{ end }} 45 </ul> 46 </div> 47 </li> 48 {{ else }} 49 <li><a href="{{ .Permalink }}" class="link-dark rounded">{{ .Title}} </a></li> 50 {{ end }} 51 52 {{ end }} 53 </ul> 54 </div> 55 </li> 56 {{ else }} 57 <li><a href="{{ .Permalink }}" class="link-dark rounded">{{ .Title}} </a></li> 58 {{ end }} 59 {{ end }} 60 </ul> 61 </div> 62 </li> 63 {{ end }} 64 {{ end }} 65 </ul> 66</div>
