引言
导航栏组件对于整个站点来讲应该说是至关重要的，因为它会出现在每个界面中。对我来讲，导航栏是最吸引人、最有意思的地方，因为针对不同的屏幕大小，他能显示出不同的样式风格，而且当我去访问一个界面时，我第一个关注点也是导航栏。
步入正文，定制化设计我们的导航栏主要包括如下步骤：
- 在config.toml文件中，确定我们导航栏中的菜单项，我所定义的导航栏内容主要如图所示；
- 为导航栏设置具体的css样式。
相关基础
一、Hugo中资源文件的引用语法
Hugo提供了相应的函数来帮助我们进行资源的获取。
- css文件获取方式
{{ $bootstrap := resources.Get "css/bootstrap.css" | minify }}
<link rel="stylesheet" href="{{ $bootstrap.Permalink }}" />- JS文件获取方式
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>二、链接基本的css样式文件及js文件
依据上述的语法逻辑，我们可以引入自己定义主题所需要的资源文件。当然，Hugo 已经自动的在default/baseof.html文件中为我们定义好了主题的基本脚手架，如下所示。因此，我们只需遵循该框架在particals/head.html 文件中引入我们的css文件，在particals/footer.html 中引入我们的js文件即可。
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</body>
</html>因为我们会将所有的组件样式引入到style.scss文件中，所以我们在head.html文件中加入如下代码，用于引入我们的css文件，参考上述的代码，我们将文件名直接进行替换即可，在我的项目中，我引入了Bootstrap库。
{{ "<!-- Bootstrap -->" | safeHTML }}
{{ $bootstrap := resources.Get "css/bootstrap.css" | minify }}
<link rel="stylesheet" href="{{ $bootstrap.Permalink }}" />
{{ "<!-- Main Stylesheets -->" | safeHTML }}
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS | minify | fingerprint}}
<link href="{{ $style.Permalink }}" rel="stylesheet" />同理，我们在footer.html文件中加入如下代码引入必要的js文件。
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>三、获取配置文件内的信息
假设在config.toml文件中声明了如下形式的菜单项内容：
[[menu.nav]]
name = "Home"
url = ""
weight = 1
[[menu.nav]]
name = "About"
url = "about"
weight = 2
[[menu.nav]]
name = "tags"
url = "tags"
weight = 3此时我们可以通过Hugo提供的接口来读取每一个nav的name信息：
{{$menu := (.Site.Menus.nav)}}
{{$len := (len $menu)}}
{{ range $index, $element := $menu }}
{{ .Name }}
{{ end }}方案
分别为导航栏在partials文件夹中创建header.html文件、在assets/scss/Components文件夹中创建_navigation.scss文件。
编辑header.html文件：
<nav class="navbar navbar-expand-lg site-navigation">
<div class="container">
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
<img src="{{ "images/laplace-text-logo.png" | absURL }}" alt="logo" />
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#sitenavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="sitenavbar">
<ul class="navbar-nav ml-auto main-nav">
{{$menu := (.Site.Menus.nav)}}
{{$len := (len $menu)}}
{{ range $index, $element := $menu }}
<li class="nav-item">
<a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</div>
</div>
</nav>编辑对应的css文件，样式如下：
.site-navigation {
padding: 20px 0;
background: $white;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
@include desktop {
background: $white;
margin: 10px;
border-radius: 5px;
top: 0;
width: calc(100% - 20px);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
}
@include mobile {
padding: 15px;
}
.navbar-brand {
padding: 0;
margin: 0;
img {
max-width: 128px;
@include mobile {
max-width: 88px;
}
}
}
.nav-item {
@include desktop {
text-align: center;
}
.nav-link {
font-family: $secondary-font;
color: $text-color-dark;
transition: all .3s ease;
padding: 15px 18px;
position: relative;
}
}
.navbar-toggler {
outline: 0;
padding: 0;
.icon-bar {
height: 2px;
width: 25px;
transition: all 0.2s;
background: $primary-color;
display: block;
&:not(:last-child) {
margin-bottom: 5px;
}
&:nth-child(1) {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
&:nth-child(2) {
opacity: 0;
filter: alpha(opacity=0);
}
&:nth-child(3) {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
}
&.collapsed {
.icon-bar {
&:nth-child(1) {
transform: rotate(0);
}
&:nth-child(2) {
opacity: 1;
filter: alpha(opacity=1);
}
&:nth-child(3) {
transform: rotate(0);
}
}
}
}
&.nav-bg {
padding: 12px 0;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
@include mobile {
padding: 15px;
}
}
}最后，在style.scss中通过@import 语句将_variables.scss 和 _navigation.scss引入到项目中。
@import "components/navigation";
@import "variables";通过../hugo.exe server –watch 启动项目后，可以看一下导航栏的效果。
相关文章
萌ICP备20240170号