麦田的博客

Hugo主题hyde的配置

2019-09-20


hyde主题是国外网友spf13的作品,大约六年前制作的,样式和界面竟然到现在还不落后,可惜我在编辑和优化过程中发现,这个主题有些文件丢失,导致功能缺失。经过半天的优化,还是有些小问题无法解决。

现在是2019年9月20日 19:47:39,忽然想到我在技术上花的时间实在太多,在内容上的时间就被挤压得太少,所以停止优化这个主题!

好的主题还有很多,一天时间即可优化到完美的程度!

我把优化hyde主题的一些经验记录如下:

1、打开hyde\layouts内的index文件,有如下这段:

  {{ .Content }}
  {{ if .Truncated }}
  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>
  </div>

第一行的Content,代表首页文章列表展示全文;

如果是Description,代表首页展示文件内自己编写的描述;

如果是summary,就自动截取前面的部分文字,比如70个字;

2、首页底部缺少翻页的页码部分;

编辑index文件,底部加入:

{{ partial "pagination.html" . }}

复制别的主题的pagination.html文件到主题内的partials文件夹内,再加入css即可

3、日期形式的优化;

西方国家表达日期的形式比较多,比如月-日-年等等,中国人只有一种看日期的习惯,那就是年月日!所以这么修改:

西方表达日期的原文:.Date.Format "Mon, Jan 2, 2006"

修改成符合中国人习惯的形式:.Date.Format "2006-01-02"

如果可以写中文,也可以写成:2006年01月02日

4、善用

A、首页文章列表没有明显的分割线,只有标题作为两篇文章的界限,在</article.>之前加入分割线比较美观!

  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>
  </div>
  {{ end }} 
<hr>
</article>
{{- end }}
</div>

B、网页下面的相关文章之前加入

C、底部的版权信息与上面内容混合在一起,可以加入分割!

5、首页加载图片;

首页默认显示全文,并设置成100字截断作为文章描述,就出现了文章配图,用css限制这些图片的宽度,首页看起来就丰富多彩,css如下

.posts img {
	max-width: 320px;
}

6、添加最新文章功能,参考Hugo主题Mainroad

7、single.html文件加入相关功能,汉字出现乱码现象,解决方法,主题根目录下新建i18n文件夹,里面新建en.yaml文件,写入:

- id: related_title
  translation: 相关文章

在相关文章那里写上:

<h3>{{ T "related_title" }}</h3>

8、本主题hyde有几个颜色可以选择,这些颜色都比较美观,可以作为参考!


和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主题LeaveIt优化
  • Markdown添加视频(hugo和hexo添加视频)
  • 标签

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