Hugo主题ivy的配置

麦田3年前 (2019-09-07)工作笔记871

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

相关文章

Win10系统安装Hugo详细教程

Hugo是主流的静态网站生成器,也叫静态博客生成器。hugo是在本地运行的软件,在本地电脑按照规定格式写好文章,然后通过hugo可以一键生成一个优秀的网站!Hugo生成的网站是目前最新的自适应性网站,...

Hugo生成静态网页有大量空行怎么办

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

Hugo主题nuo的配置

Hugo主题nuo简洁大方,电脑端界面分左右两栏,手机端界面和其他所有主题类似,我很喜欢!因为麦田喜欢生成.html文件,并直接放在网站根目录下,所以这个主题修改和配置的地方比较多:1、先设置网站根目...

Hugo主题mainroad的配置

hugo主题模板mainroad源自WordPress主题 Mainroad,原作者是MH Themes,不得不说WordPress的主题最丰富,优秀作品也多。2020年2月20日优化:1、优化全部标...

Hugo主题kiss的配置

Hugo主题kiss的颜色只有黑白,没有配色,没有修饰的图片,非常简洁。在优化这个主题遇到的问题如下:1、首页不显示网站名字;解决:打开主题内的exampleSite文件夹,里面的网站配置文件有一段:...

评论列表

楚新元
楚新元
5个月前 (07-12)

˃ 相关内容板块的链接全部都有下划线,一眼看上去不够友好,去掉;
请问下这个怎么实现,谢谢?
我的E-Mail:chuxinyuan@outlook.com

麦田 回复:
搜索:css去掉链接下划线
3个月前 (08-30)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。