麦田的博客

Hugo主题beg的配置

2019-09-30


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">

相关内容

  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Hugo生成静态网页有大量空行怎么办
  • Hexo主题crisp优化
  • Hugo主题beautiful的优化
  • Hugo主题LeaveIt优化
  • Hugo主题hyde的配置
  • Markdown添加视频(hugo和hexo添加视频)
  • Markdown添加音频音乐歌曲-hexo添加音乐
  • Hugo主题ivy的配置
  • 标签

    beg主题主题hugo主题hugo