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 }}