Hugo主题LeaveIt优化
2019-09-21
LeaveIt主题是liuzhichao.com的作品,界面很简单主题可以选择首页空白模式,还有首页显示文章模式,而且可以点击爱心按钮,切换黑白界面!
这个主题已经比较完美,需要优化的不多,只是在加入归档页面,也就是全部文章页面时遇到一个小问题:
1、h4字体是默认的body字体,设置h4不起作用;
解决:因为使用的是scss格式的样式,所以加个&即可,如下:
& h4 {
font-size: 1em;
font-weight: normal;
}
2、导航菜单,点击首页后,首页两字字体变粗,但是点击全部文章不变化;
搜索首页中的active,找到一些端倪,但实在不想花太多时间研究这么细节了!
除此以外,这次添加相关文章和最新文章功能,可以更简单:
编辑single.html,添加以下内容:
<hr style=" margin: 10px 0;">
<h3>相关文章</h3>
{{ $.Scratch.Set "limit" 0 }}
{{ $currentPagePermalink := .Permalink }}
{{ $tags := .Params.tags }}
{{ range .Site.Pages }}
{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}
{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ $.Scratch.Add "limit" 1 }}
{{ end }}{{ end }}
<h3>最新文章</h3>
{{- $recent := where .Site.RegularPages "Section" "in" (.Site.Params.postSections | default (slice "post")) }}
{{- $recent_num := (.Site.Params.widgets.recent_num | default 5) }}
{{- if $recent }}
{{- range first $recent_num $recent }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{- end }}{{- end }}
注意:如果 hr 分割线效果不行,可以参考上文添加样式!
和Hugo相关的文章
麦田喜欢并推荐的Hugo主题模板:
添加全部文章功能:Hugo添加归档页面
HUGO实现相关文章功能:HUGO怎么基于标签展示相关文章
作者介绍jane主题:
2018年3月11日,本周我发布了一个Hugo主题Jane,Jane克隆自hugo-theme-even,大体功能基本继承自Even。
感谢作者贤民提供的主题Jane:https://www.xianmin.org/