Hugo主题beg的配置

麦田4年前 (2019-09-16)工作笔记966

Hugo主题beg风格是灰色调,没有鲜艳的颜色,适合颜色主题的网站。我在优化这个主题的过程中遇到的问题如下:


1、语言问题,默认显示英文的:最新文章、分类、标签,还有read more…


解决:如果直接修改LATESTS为最新文章,会出现乱码,beg主题又没有i18n文件夹,所以我把别的主题的语言包复制到这个主题内。然后修改sidebar.html文件内的LATESTS为:{{ i18n “recent_title” }}

但并没有翻译成中文的最新文章,检查配置文件,已经加入defaultContentLanguage = “zh-cn”,并不会像主题beautiful那样自动显示中文,于是我把这段修改成:languageCode = “zh-cn”,马上恢复正常。不过beg主题调用的却是语言包内的en.yaml文件。这比较奇怪:有的主题调用中文语言文件,有的调用的是英文语言文件。还有奇怪的是,dw搜read more,发现可以直接修改成中文,不会乱码!


2020年2月8日:删除语言i18n文件夹,发现可以正常显示中文!


2、2020年2月8日,继续优化本主题,解决双标签的错误!


下图可见,这个主题的错误是出现两个标签,定位到div,按照常规删除后发现两个标签都被删除掉了,研究了一个多小时才解决!


beg主题


修改过程:主题文件sidebar.html的以下内容是标签板块

  {{ range $key, $value := .Site.Taxonomies }}

  <section class="panel panel-default"><div class="panel-heading">

      <div class="panel-title">{{ i18n "tags_title" }}</div>

    </div>

    <div class="list-group">

      {{ range first 10 $value.ByCount }}

      <a href="{{ $.Site.BaseURL}}{{ $key }}/{{ .Name | urlize }}/" class="list-group-item">{{ .Name }}</a>

      {{ end }}

    </div>

  </section>  {{ end }}

</aside>

生成网页后的内容:

<section class="panel panel-default">

    <div class="panel-heading">

      <div class="panel-title">标签</div>

    </div>

    <div class="list-group"> </div> </section>  

  <section class="panel panel-default">

    <div class="panel-heading">

      <div class="panel-title">标签</div>

    </div>

    <div class="list-group">标签内容

</div></section></aside>

和上一个板块的最新文章对照发现:

1、<section前面不应该有内容,于是下移;

2、输出的内容出现了两次</section>,于是把{{ end }}提到</section>前面。


修改如下,恢复正常:

<section class="panel panel-default"> <div class="panel-heading"><div class="panel-title">标签</div></div>

<div class="list-group">{{ range $key, $value := .Site.Taxonomies }}{{ range first 20 $value.ByCount }}

<a href="{{ $.Site.BaseURL}}{{ $key }}/{{ .Name | urlize }}/" class="list-group-item">{{ .Name }}</a>

{{ end }}  {{ end }}</div></section>

</aside>

3、主题内的html文件压缩后输出文件美观体积小;


搜html压缩,使用在线压缩代码,或者使用文本整理器去掉所有空格,效率高。


4、正文标题上的面包屑有个主页图标,日期前面也有个日历图标,都是通过加载:


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

相关文章

Win10系统安装Hugo详细教程

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

Hugo基于标签展示相关文章

本文以主题rockrock为例讲解:使用dw打开模板文件:themes/主题rockrock/layouts/_default/single.html找到以下内容:</div> ...

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

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

Hugo主题rockrock的配置

rockrock主题很干净,我很喜欢,但是这些主题都需要配置和优化:1、Hugo实现猜你喜欢功能(相关文章,或者相关内容功能)使用dw打开模板文件:themes/主题rockrock/layouts/...

Hugo主题nuo的配置

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

Hugo主题maupassant的配置

编辑优化Hugo主题maupassant的经验因为在config.toml文件中添加了uglyurls = “true” ,生成的文件都是html格式,而不是默认的目录,所以就需要修改其他参数,比如标...

发表评论

访客

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