Hugo主题mainroad的配置
hugo主题模板mainroad源自WordPress主题 Mainroad,原作者是MH Themes,不得不说WordPress的主题最丰富,优秀作品也多。
2020年2月20日优化:
1、优化全部标签页面!
主题之前的全部标签页面调用-default/list.html,和单独标签共用,打开后是一个标签列表,一行一个,行距很大,明显不够友好。还是标签云的样式最好,修改后发现和标签相关的内容都被修改。那怎么添加一个单独的文件供调用呢?
通过对照主题ivy发现,我应该在-default文件夹内新建一个terms.html,hugo的全部标签tags.html页面默认调用这个名字的文件。新建后复制partials/widgets/taglist.html文件的内容发现只有标签部分,没有页头和页尾。原因是partials内的文件只提供部分板块,供-default文件夹内的文件调用;-default文件夹内的文件是通用的完整页面。
成功修改成标签云样式后,我又想在标签后面加入标签的出现频率统计数字,还是参考主题ivy,加入[{{ len $value }}]后失败,最后将ivy主题的整块替换后成功。
这个页面浏览不多,似乎没有优化的意义,但是通过编辑的过程,让我对hugo了解得更多,以后对主题的优化更有经验!
重要:用此方法解决了主题KISS不显示全部标签页面的故障!
2、优化首页底部的页码
之前的页码只有页码数字,必须点下一页,一页一页的翻看,ivy主题的数字式页码最好,所以移植过来。
3、升级hugo后首页只有一个post.html链接
解决方法和主题nuo一样,修改index.html文件即可
4、不知道什么原因,页面可以直接写中文;
5、优化部分css,让页面整洁易读;
6、净化压缩HTML和CSS,使用在线工具即可。
以下是2019年的优化:
1、添加相关文章功能顺利,但是相关文章这四个中文乱码;
尝试过多个方法,比如:
A、在配置文件config.toml添加:defaultContentLanguage = “zh-CN”,有个主题通过添加这段话,解决了中文乱码问题,但是这次没有解决;
B、编辑i18n/zh.yaml,添加以下内容,还是无效;
# related Posts
- id: related_title
translation: 相关文章
C、编辑themes\mainroad-cn\layouts_default 内的baseof.html,对比正常主题,删除多余内容,还是失败…
2019年9月18日终于解决这个难题,心里很舒服!
方法:在添加首页的【read more阅读更多】功能时,发现虽然我在配置文件中写的是:languageCode = “zh-CN”,但首页还是显示:Read more…,这说明主题还是在调用en.yaml的配置,所以我编辑这个语言文件,将原本的内容id: read_more后面的translation:Read more…更换成:查看更多…
首页的阅读更多功能就变成中文,我想到相关内容功能也是如此!所以编辑en.yaml文件,添加:
# related Posts
- id: related_title
translation: 相关文章
然后编辑文件layouts/-default/single.html,修改之前的乱码部分相关文章:为新内容:{{ T “related_title” }}
成功的解决single.html文件出现中文乱码的问题!
2020年2月20日更新:可能是因为升级hugo版本,或者是因为languageCode = “zh-CN”,这个问题已经不存在,不需要修改i18n内的文件。
2、css的修改和优化
预览后,保存网页为html格式,然后用dw打开,查看需要修改的css;
使用dw查找主题目录下的所有文件,查找需要修改的css,注意现在的主题都是适配电脑和手机,所以可能需要修改2-3个位置。
3、添加最新文章版块
Mainroad主题有中文版,也就是国人优化过的主题(作者网站noobear.com),电脑端带侧边栏,侧边栏有搜索、最新文章等功能。但是我安装后发现在电脑上还是显示单栏,没有侧栏,这正合我意。
我想把最新文章版块加入到网页最下面,网上没有教程,通过搜索作者网站的最新文章的标签,发现主题内有个文件夹mainroad-cn\layouts\partials\widgets,里面有个文件recent.html,就是它实现这个功能的。
编辑single.html文件,后面有这样一段:
</article>
</main>
{{ partial "authorbox.html" . }}
{{ partial "post_nav.html" . }}
{{ partial "comments.html" . }}
{{ end }}
我在这段话之前插入:{{ partial “recent.html” . }}
然后将这个文件复制到文件夹:mainroad-cn\layouts\partials,最新文章版块就这么实现了!