麦田的博客

Hugo主题ivy的配置

2019-09-01


Hugo主题ivy特别简洁,首页文章列表只有标题。主题文件也很简单,内容清晰,网站加载速度极快,这点比Hugo主题beautiful好很多!

我在优化这个主题中遇到的问题如下:

1、善用exampleSite文件夹内容;

里面的config.toml文件内容很重要,可以参考,比如里面这段设置底部内容:

footer = “版权所有”

2、设置网站结构为.html结尾,遇到tags设置的问题;

这个主题和其他主题不同,搜tag就可以找到设置位置。这次搜urlize才找到地方:

<a href="{{ (print "/" $.Data.Plural "/" $key | urlize) | relURL }}.html"> #在最后加上.html

3、不显示上一篇下一篇版块;

搜索next,找到文件foot_custom.html,里面的内容是实现这个功能的,不知道为何没有生效。将这个文件的内容复制到single.html文件内的{{ .Content }}正文下面,这个版块马上生效。


2020年2月5日,进一步优化ivy主题:

1、手机端主要是优化页头的高度,比如减小网站名字的字体大小和间距,这样提高阅读面积的高度;

降低正文标题高度:line-height: 修改1为0.5,这样电脑端显示就不够好,那么在@media screen and (max-width: 960px)下面新建一个手机端的css。

问题:手机端,正文标题过长换行后重叠;解决:line-height: 0.5修改成1

2、电脑端默认居中,正文部分就偏右,不方便阅读。优化:整体左移,让正文部分尽量在中间。

3、去掉上下篇版块,标题前面的#;

之前了解到的去#或者加#,是在html文件中加,但是这次是在css中实现加入#:

.post-tags a::before {content: '#'}
#上一段把标签和上下篇标题都加入了#,新增下一段话,去掉上下篇标题前的#
.post-nav a::before {content: ''}
---
多次重复:很多修改和优化都是在chrome浏览器F12功能下实现的!

4、链接下划线以及偏多的分割线是ivy的风格,优化如下:

分割线原本是偏深的黑色,修改成灰色;

正文标题下的分割线不改动,其他分割线的宽度修改成100%;

相关内容板块的链接全部都有下划线,一眼看上去不够友好,去掉;

保留标签和上下篇链接的下划线

5、post-tags的样式总是干预下面的nav,所以将修改成了

6、优化标签页面:原来页面显示的标签是一行一个标签,明显不如一行数个标签方便阅读。优化方法是,修改terms.html以及对于css,参考过主题nuo。

7、大惊喜!

首页文章列表使用年作为分割线,便于阅读!实现方法:找到主题jane的归档页面的重要部分,移植到ivy的list.html。2006是按照年来分割文章列表的,修改成200601就能按照月来分割。

高兴得太早了,设置完毕,首页虽然显示正常,但是点击标签,会进入首页全部文章列表,这和另外一个主题beg的错误一样,正好发现这个错误,应该可以解决另外一个主题的问题。

柳暗花明又一村,我加入日期的目的是为了浏览方便,如果用css设置li每隔20个就做出标记,也可以让浏览有段落感,而不是从上到下一看几百篇。通过谷歌搜索找到答案:CSS3利用linth-child(n)实现隔几行设置元素

8、首页文章列表分页

ivy主题首页文章列表是不分页的,这和我的想法一样,因为绝大部分博客的文章只有小几百篇,不分页更方便阅读。但是某些网站的内容多,不分页的话首页体积过大,所以我加入了分页功能,并设置一页显示100篇文章。

添加ivy首页文章列表分页功能,需要改动以下几个部分:

list.html,修改如下:

<ul class="home">{{ range (where ($.Scratch.Get "pages") "Section" "!=" "") }}<li><span class="date">{{ .Date.Format "2006/01/02" }}</span><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>{{ end }}</ul>
以上是旧内容,显示全部文章列表。参照ivy的作者教程,更换成下面的新内容:
<ul>
  {{ $paginator := .Paginate .Data.Pages }}
  {{ range $paginator.Pages }}
  <li>
    <span class="date">{{ .Date.Format "2006/01/02" }}</span>
    <a href="{{ .URL }}">{{ .Title }}</a>
  </li>
  {{ end }}
</ul>
还要加上:{{ partial "pagination.html" . }}

新增文件pagination.html,放在ivy\layouts\partials文件夹内;这个文件我是直接复制另外一个主题maupassant内的文件。

新增css内容,同样是复制主题maupassant的css。

网站根目录config.toml需要添加一行:paginate = 100

特别注意,我将这一行添加到config最下面无效,按照示例文件,放在uglyurls = “true"下面恢复正常!

如果你的文章少,建议不分页,而且有此功能也可以通过设置 paginate=9999,让分页功能不生效。

8、首页列表前面的日期字体和标题相同,不方便阅读,修改成偏小的灰色字体

.date {
  font-size: 12px;
  color: #999999;
  margin-right: 5px;  
}

9、手机端菜单隐藏

页头网站名字下面是菜单,这个菜单占用过多的页面高度,隐藏起来最好,因为使用的人太少。ivy作者修改成展开式的菜单,美观很多,移植简单,但是我觉得还是占用高度,所以隐藏起来是最好选择。

10、图片网站去掉正文标题下的日期,这样阅读面积更大,更美观

去掉内容:{{ with .Params.author }}{{ . }}{{ end }}{{ if .Params.date }}{{ if .Params.author }} / {{ end }}{{ .Date.Format “2006-01-02” }}{{ end }}


相关内容

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

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