麦田的博客

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主题模板:

本博客使用的主题jane

Hugo主题Mainroad

Hugo主题beg

Hugo主题maupassant

Hugo主题nuo

Hugo主题rockrock

添加全部文章功能:Hugo添加归档页面

HUGO实现相关文章功能:HUGO怎么基于标签展示相关文章

作者介绍jane主题:

2018年3月11日,本周我发布了一个Hugo主题Jane,Jane克隆自hugo-theme-even,大体功能基本继承自Even。

感谢作者贤民提供的主题Jane:https://www.xianmin.org/


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Win10系统安装Jekyll详细教程
  • Hugo生成静态网页有大量空行怎么办
  • Hugo主题beautiful的优化
  • Hugo主题beg的配置
  • Hugo主题hyde的配置
  • Markdown添加视频(hugo和hexo添加视频)
  • 标签

    LeaveIt静态网站生成器hugo主题hugo