麦田的博客

Hugo主题mainroad的配置

2019-09-01


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,最新文章版块就这么实现了!


相关内容

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

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