Hugo博客自定义优化 II

第一篇主题优化文章内容条例太长了，拆成两部分

1. 博客更换为valine评论

将路文件\themes\mogege\layouts\partials\gitlak.html内容改写为valine配置，开启QQ头像拉取，评论通知功能，代码参考https://www.smslit.top/2018/07/08/hugo-valine/和next主题大佬@hao（第二种代码比较好）

<div id="gitalk-container"></div>
<!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
  <span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
    <p></p>
  </span>
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '{{ .Site.Params.valine.appId }}',
        appKey: '{{ .Site.Params.valine.appKey }}',
        notify: {{ .Site.Params.valine.notify }},
        verify: {{ .Site.Params.valine.verify }}, 
        avatar:'{{ .Site.Params.valine.avatar }}', 
		enableQQ: true,    
        placeholder: '{{ .Site.Params.valine.placeholder }}',
        visitor: {{ .Site.Params.valine.visitor }}
    });
  </script>
{{- end }}

<p></p>
<br>    <!-- id 修复移动端问题 -->
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<div id="vcomments" style="padding: 10px 0px 0px 0px"></div>
<style>
  .v .veditor {
    min-height: 10rem;
    background-image: url('<%= site.customConfig.valineimage %>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255, 255, 255, 0);
    resize: none;
  }

  .v .vwrap {
    border: 1px solid #000 !important;
  }

  .v .vbtn {
    padding: .4rem 1.2rem !important;
    border-color: #fff !important;
    background-color: #49b1f5 !important;
    color: #fff !important;
    font-size: .7rem !important;
  }

  .v .vcards .vcard .vh .vmeta .vat {
    padding: 0 .8rem !important;
    border: 1px solid #00c4b6 !important;
    border-radius: 5px !important;
    color: #00c4b6 !important;
  }
</style>
<script>
  new Valine({
        el: '#vcomments' ,
        appId: '{{ .Site.Params.valine.appId }}',
        appKey: '{{ .Site.Params.valine.appKey }}',
        notify: {{ .Site.Params.valine.notify }},
        verify: {{ .Site.Params.valine.verify }}, 
        avatar:'{{ .Site.Params.valine.avatar }}', 
		enableQQ: true,
        placeholder: '{{ .Site.Params.valine.placeholder }}',
        visitor: {{ .Site.Params.valine.visitor }}
  });
</script>

顺便更改邮件通知内容

 name = "📖Blog" 
 name = "📁Categories"
 name = "💬About" 
 name = "🎨Tags"

文件中 \themes\mogege\layouts\partials\gitlak.html更改标签样式，使用 禁止换行操作

<nav class="mb-md">
	{{ $currentPage := . }}
	{{ range .Site.Menus.main }}
	<a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}" white-space="nowrap">
		<nobr>{{.Name}}</nobr>
		<div class="menu-active"></div>
	</a>
	{{ end }}
</nav>

4. 添加灯箱

方法源自here，在博客文件footer.html中添加下面的代码

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

引用

<a data-fancybox="gallery" href="图片链接"><img src="图片链接"></a>

5. 添加 Font Awesome图标

进入Font Awesome官网
注册账号登录获取代码
paths/themes\mogege\layouts\partials\head.html添加代码
文章中使用 或者

6. 为文章添加目录

借鉴这位带佬的，碰巧的是使用的主题是大差不差的，很好添加代码，主要包含以下几个部分：

$\bullet$ 在主题文件/themes/Mogege/assets/css/_common/home.scss内添加toc样式(自己也可以自定义修改下)

.post-toc {
    position: absolute;
    width: 200px;
    margin-left: 780px;
    padding: 10px;
    word-wrap: break-word;
    box-sizing: border-box;
    .post-toc-title {
        margin: 0;
        font-weight: 400;
        text-transform: uppercase;
    }
    .post-toc-content {
        &.always-active ul {
            display: block;
        }
        >nav>ul {
            margin: 10px 0;
        }
        ul {
            padding-left: 0;
            list-style: none;
            ul {
            padding-left: 15px;
            display: none;
            }
            .has-active > ul {
                display: block;
            }
        }
    }
    a:hover {
        color: #c05b4d;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    a {
        display: block;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}
@media only screen and (max-width: 1224px) {
    .post-toc {
        display: none;
    }
}

$\bullet$ 在主题路径/themes/Mogege/layouts/partials/下新建toc.html文件

<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">{{ T "toc" }}</h2>
  {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
  <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
    {{.TableOfContents}}
  </div>
</div>
<script type="text/javascript">
  window.onload = function () {
    var fix = $('.post-toc');
    var end = $('.post-comment');
    var fixTop = fix.offset().top, fixHeight = fix.height();
    var endTop, miss;
    var offsetTop = fix[0].offsetTop;
    $(window).scroll(function () {
      var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
      if (end.length > 0) {
        endTop = end.offset().top;
        miss = endTop - docTop - fixHeight;
      }
      if (fixTop < docTop) {
        fix.css({ 'position': 'fixed' });
        if ((end.length > 0) && (endTop < (docTop + fixHeight))) {
          fix.css({ top: miss });
        } else {
          fix.css({ top: 0 });
        }
      } else {
        fix.css({ 'position': 'absolute' });
        fix.css({ top: offsetTop });
      }
    })
  }
</script>

$\bullet$ 在主题文件/themes/Mogege/layouts/_default/single.html内</header>标签后引入toc模板

{{ if ( .Site.Params.toc | default true ) }}
          {{ partial "toc.html" . }}
	{{ end }}

$\bullet$ 配置文件config.toml中添加如下代码：

toc = true                # 是否开启目录
autoCollapseToc = true   # Auto expand and collapse toc

7. 更改上下篇文章的图标

主题文件/themes/Mogege/layouts/_default/single.html的post-nav部分更改（需要FontAwesome支持，参见前面部分）

8. 添加文章更新日期等部件

配置日期变量

配置 Hugo 如何为您的内容页面分配日期，在config.toml中添加如下代码。具体了解更多.

[frontmatter]
  date = ['date', 'publishDate', 'lastmod']
  expiryDate = ['expiryDate']
  lastmod = ['lastmod',':fileModTime']
  publishDate = ['publishDate', 'date']

此外，你可以在每篇文章的信息区，添加lastmod选项以设置更新日期。

应用于页面

在\themes\mogege\layouts\_default\single.html文件中更改代码，将对应的代码区域更改为以下代码。

<div class="post-meta">
    <!--作者-->
    <i class="fas fa-user-circle"></i> <a itemprop="name" href="{{.Site.BaseURL }}" rel="author">{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}</a> 
    &nbsp 
    <i class="fas fa-calendar-check "></i>
	发布:{{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
    </span>      
    &nbsp
	<!--新增更新日期-->
    {{ if or (not (eq .Date.Month .Lastmod.Month ) ) (not  (eq .Date.Day .Lastmod.Day ) ) }}
	<i class="fas fa-calendar-plus "></i> 更新:{{.Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
    {{end}}
	<!--所属类别-->
    &nbsp 
    {{ with .Params.categories }}
    <i class="fas fa-folder "></i>
    <span class="post-category">
    {{ range . }}
    {{ $name := . }}
    {{ with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) }}
    <a href="{{ .Permalink }}"> {{ $name }}</a>
    {{ end }}
    {{ end }}
    </span>
    {{- end }}
	<!--字数及阅读时长-->
	&nbsp 
	<i class="fas fa-file-word "></i>
    <span class="post-word-count">{{ .WordCount }}字</span>
	&nbsp 
	<i class="fas fa-coffee "></i>
	{{if not (div .WordCount 300)}}
	<span class="post-word-count">1分钟</span>
	{{else}}
    <span class="post-word-count">{{div .WordCount 300 }}分钟</span>
	{{end}}
</div>

这其中主要用到了Font Awesome图标，GO语言的条件判断（日期比较，阅读时长判断等），相应参考链接如下：

日期比较
- 日期的属性提取
- 条件比较

9. 文首添加分隔线

这里借鉴了大佬的代码，具体操作首先在\themes\mogege\assets\css\_common\_partials\home_post.scss文件中添加css样式，然后在\themes\mogege\layouts\_default\single.html文件中设置样式。