Hugo主题mainroad的配置

麦田4年前 (2019-09-11)工作笔记1067

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

相关文章

国产静态博客生成器InkPaper纸小墨

在静态博客生成器/静态网站生成器领域,几乎都是国外的作品,InkPaper纸小墨则是国产的静态博客生成器,基于Go语言,生成速度很快!纸小墨自我介绍:InkPaper纸小墨是一个静态博客构建工具,可以...

Hugo使用经验和教程

Hugo是Go语言的静态网站生成器,也叫静态博客生成器,是建站利器!Hugo的优点:1、安装方便,使用简单;2、生成纯静态文件,适配电脑和移动端,速度快,安全性高,本地默认有备份,数据安全;3、可以添...

Hugo添加归档页面

Hugo默认没有归档页面,,需要自己单独添加一个归档页面。以hugo主题rockrock为例,方法如下:1、新建归档页面的模板;到主题目录下的layouts文件夹内新建文件夹archives到主题目录...

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

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

Hugo主题nuo的配置

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

发表评论

访客

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