HUGO的JANE主题添加侧边导航栏
Hugo的JANE主题是一款基于Hugo框架的主题,用于创建静态网站。之前用JANE主题建好站,总感觉要是有个侧边导航栏就好了,于是就寻思怎么添加一个侧边导航栏。
第一步:添加sidebar.html文件
Jane主题本身没有sidebar.html文件的。
找到Jane主题的相关模板文件,在layouts目录下partials里创建一个sidebar.html的文件。
第二步:sidebar.html内容
我思量着在sidebar里添加最近文章,分类,标签,及日历四部分,于是在partials里创建一个widgets的文件夹,分别加入archive.html,categories.html,tags.html,calendar.html。剩下的就是编写代码和CSS样式了。
第三步:编写代码
剩下的就是编写代码,达成想要的功能。我把写好的代码贴在下面。
1. sidebar.html代码
<nav class="sidebar" id="sidebar" >
{{ partial "widgets/archive" . }}
{{ partial "widgets/categories" . }}
{{ partial "widgets/tags" . }}
{{ partial "widgets/calendar" . }}
</nav>
2. archive.html代码
{{ if not (eq (len site.RegularPages) 0) }}
<p class="asidetitle">
<a href="{{ $.Site.BaseURL }}post/">{{ .Site.Params.Strings.Archive | default "最近文章" }}</a>
</p>
<div class="archiveslist">
{{- $recent := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{- $recent_num := (.Site.Params.widgets.recent_num | default 5) }}
{{- if $recent }}
<div class="archiveslist widget">
<h4 class="widget__title">{{ T "recent_title" }}</h4>
<div class="widget__content">
<ul class="widget__list">
{{- range first $recent_num $recent }}
<time datetime="{{ .Date.Format "2006-01-02" }}" class="archive-post-time">
{{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
</time>
<li class="widget__item"><a class="widget__link" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{- end }}
</ul>
</div>
</div>
{{- end }}
</div>
{{ end }}
3. categories.html代码
{{ if isset .Site.Taxonomies "categories" }}
{{ if not (eq (len .Site.Taxonomies.categories) 0) }}
<p class="asidetitle">
<a href="{{ $.Site.BaseURL }}categories/">{{ .Site.Params.Strings.Categories | default "分类" }}</a>
</p>
<div class="categorieslist">
<ul>
{{ range $name, $items := .Site.Taxonomies.categories }}
<li><a href="{{ $.Site.BaseURL }}categories/{{ $name | urlize | lower }}" title="{{ $name }}">{{ $name }}</a></li>
{{ end }}
</ul>
</div>
{{ end }}
{{ end }}
4. tags.html代码
{{ if isset .Site.Taxonomies "tags" }}
{{ if not (eq (len .Site.Taxonomies.tags) 0) }}
<p class="asidetitle">
<a href="{{ $.Site.BaseURL }}tags/">{{ .Site.Params.Strings.TagCloud | default "标签" }}</a>
</p>
<div class="tagcloudlist">
<div class="tagcloudlist clearfix">
{{ range $name, $items := .Site.Taxonomies.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}" style="font-size: 12px;">{{ $name }}</a>
{{ end }}
</div>
</div>
{{ end }}
{{ end }}
5. calendar.html代码
日历部分比较困难,我是直接参考这个网站https://codepen.io/ovdojoey/pen/GqRxYQ,做了一些中文变动。
6. _sidebar.scss代码
样式文件在主题下assets/sass里。新建一个_sidebar.scss专门编写sidebar的文本样式。上面的代码用到的样式如下
/* Make nav sticky */
nav.sidebar {
position: sticky;
top: 1rem;
width: 24em;
}
.sidebar {
margin-top: -1em;
margin-left: 3em;
margin-right: 3em;
a {
text-decoration: none;
border-bottom: 1px solid transparent;
padding: 0.125em 0;
// color: #ccc;
transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}
}
.asidetitle{
font-size:1.1em;
color:#2ca6cb;
padding:0 0 .3125em 0;
border-bottom:.1875em solid #ccc;
font-weight: bold;
a{
color:#2ca6cb;
}
}
.archiveslist {
background-color: #fff;
border-radius: 5px;
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
margin-top: -1em;
margin-left: 0em;
}
li {
padding-left: 0em;
border-bottom: 1px dotted #ebebeb;
.widget__link {
color: $theme-color;
}
}
}
.categorieslist {
background-color: #fff;
border-radius: 5px;
ul,
ol {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
li {
background-color: #fff;
margin-left: .3em;
margin-right: .3em;
border: 1px solid #222;
color: #222;
float: left;
line-height: 1.42857143;
padding: 6px 12px;
position: relative;
text-decoration: none;
margin-bottom: 0.3em;
margin-top: 0.3em;
}
}
.tagcloudlist {
background-color: #fff;
border-radius: 5px;
.clearfix {
display: inline-block;
a {
background-color: #fff;
margin-left: .3em;
margin-right: .3em;
border: 1px solid #222;
color: #222;
float: left;
line-height: 1.42857143;
padding: 6px 12px;
position: relative;
text-decoration: none;
margin-bottom: 0.3em;
margin-top: 0.3em;
}
}
}
@include max-screen() {
nav.sidebar {
display: none;
}
}
第四步:侧边栏布局
代码样式都写好了,剩下的就是放在网站的哪里。看了一下前端主题显示,觉得放在主页和每个文章页面还有单页面的地方比较好看,其余的页面放侧边栏感觉都不好看。所以就决定在这2个地方加入侧边栏。
1. 主页添加侧边栏
主页的文件是index.html,在layouts文件夹下面。稍微修改下代码使板块左右展示,找了一下主题本身有的样式代码,“content-wrapper"可以直接使用,就不用再写代码了。修改后的代码如下:
{{ define "content" }}
<div class="content-wrapper">
<section id="posts" class="posts">
{{ $pages := .Pages }}
{{ if .IsHome }}
{{ $pages = where .Site.RegularPages "Type" "in" site.Params.mainSections }}
{{ end }}
{{ $paginator := .Paginate $pages }}
{{ range $paginator.Pages }}
{{ .Render "summary" }}
{{ end }}
</section>
{{ block "sidebar" . }}{{ partial "sidebar.html" . }}{{ end }}
</div>
<!-- pagination -->
{{ partial "pagination.html" . }}
{{ end }}
这里要在"content-wrapper"里调用_sidebar.scss文件,不然样式侧边栏样式不起效果。content-wrapper在_post.scss里,添加一个调用_sidebar.scss文件的代码。日历的样式代码我是新建了一个scss文件,所以这里也调用下日历的样式文件。
.content-wrapper {
display: flex;
justify-content: center;
@import "_toc";
@import "_sidebar";
@import "_calendar";
}
2. 单页面添加侧边栏
剩下的就比较简单了,单页面是single.html文件,在layouts/_default文件夹下面。如下,最后加入{{ partial “sidebar.html” . }},调用下侧边栏就行了。
{{ define "content" -}}
<div class="content-wrapper">
<!-- TOC -->
{{ partial "post/toc.html" . }}
<div id="content" class="content">
</div>
{{ partial "sidebar.html" . }}
</div>
{{- end }}
第五步:运行看效果
一切准备就绪,剩下的就是看下效果了。最终的显示效果就如我现在网站的展示效果了。
总结
整体上,这个功能并不复杂,但是一些地方却占用了我不少时间。一开始也不是很懂hugo,后来查资料,看网站,最终还是如愿以偿的添加了侧边导航栏,哈哈。如果你也感兴趣的话,可以参照这些自己加一个侧边栏哦。