引言
导航栏组件对于整个站点来讲应该说是至关重要的，因为它会出现在每个界面中。对我来讲，导航栏是最吸引人、最有意思的地方，因为针对不同的屏幕大小，他能显示出不同的样式风格，而且当我去访问一个界面时，我第一个关注点也是导航栏。
步入正文，定制化设计我们的导航栏主要包括如下步骤：
在config.toml文件中，确定我们导航栏中的菜单项，我所定义的导航栏内容主要如图所示；为导航栏设置具体的css样式。
相关基础
一、Hugo中资源文件的引用语法
Hugo提供了相应的函数来帮助我们进行资源的获取。
css文件获取方式
{{ $bootstrap := resources.Get "css/bootstrap.css" | minify }}
JS文件获取方式
{{ $vendor := resources.Get "js/vendor.js" | minify }}
二、链接基本的css样式文件及js文件
依据上述的语法逻辑，我们可以引入自己定义主题所需要的资源文件。当然，Hugo 已经自动的在default/baseof.html文件中为我们定义好了主题的基本脚手架，如下所示。因此，我们只需遵循该框架在particals/head.html 文件中引入我们的css文件，在particals/footer.html 中引入我们的js文件即可。
{{- partial "head.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}{{- partial "footer.html" . -}}
因为我们会将所有的组件样式引入到style.scss文件中，所以我们在head.html文件中加入如下代码，用于引入我们的css文件，参考上述的代码，我们将文件名直接进行替换即可，在我的项目中，我引入了Bootstrap库。
{{ "" | safeHTML }} {{ $bootstrap := resources.Get "css/bootstrap.css" | minify }} {{ "" | safeHTML }} {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | minify | fingerprint}}
同理，我们在footer.html文件中加入如下代码引入必要的js文件。
{{ $vendor := resources.Get "js/vendor.js" | minify }}
三、获取配置文件内的信息
假设在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文件：
{{$menu := (.Site.Menus.nav)}} {{$len := (len $menu)}} {{ range $index, $element := $menu }} {{ .Name }} {{ end }}
编辑对应的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 启动项目后，可以看一下导航栏的效果。
