Hugo博客自定义优化

之前写博客一直是在Gridea平台，用的是@hao大佬的Next主题。后来接触了Mogege主题，感觉简洁好用，所以就又搭建了个博客并将文章迁移过来，但是自己又喜欢Next主题的一些特点，遂自己添加了一些功能。除此之外，Mogege主题也有一些不方便的地方，也将其改了下。在此记录下来，一方面给可能的有缘人一个示例，另一方面算是备份吧，等Mogege主题更新了也知道改哪里……

1. $\KaTeX$设置

1.1 解决 $ $ 不识别公式的问题

文件路径：\themes\mogege\layouts\partials\js.html

更改代码：

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
           delimiters: [
     {left: "$$", right: "$$", display: true},
     {left: "$", right: "$", display: false},
   ],
   ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
        });
    });
</script>

1.2 解决行间公式下标不识别，被Markdown解析的问题

在行间公式前后添加`<div> </div>，注意前后要有空行
对于下标不识别的可以将下划线分开

2. 新建文档默认设置

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
tags:[]
categories: []
draft: false
menu: 
showComments: true
featured_image:
---

3. 自定义CSS

4. 开启html语法支持

First option, set blackfriday as the default Markdown engine. Open config.toml and add the following setting:

[markup]
  defaultMarkdownHandler = "blackfriday"

second option, use goldmark and set the unsafe option of markup.goldmark.renderer to true:

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

5. 强制push代码

git push -f origin master

6. 更改滚动条样式

路径： \themes\mogege\assets\css\_common\_core\base.scss

改为如下代码：

html {
/* 滚动条 */
&::-webkit-scrollbar {
  width: 11px;
  height: 8px;
}

&::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

&::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

&::-webkit-scrollbar-corner {
  background-color: transparent;
}

&::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}
}

7. 鼠标点击特效和蜘蛛网特效

路径：\themes\mogege\layouts\partials\js.html

添加代码：

<script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>

<script type="text/javascript" src="https://demo.hellozwh.com/source/canvas-nest.min.js"></script>

8. subtitle打字机显示

路径： \themes\mogege\layouts\partials\home_profile.html

更改代码：

<div id="text">

</div>
</body>
<script>
  let divTyping = document.getElementById('text')
  let i = 0,
    timer = 0,
    str = 'Innovation points out paths that are possible; replication points out paths that are likely; progress relies on both.'

  function typing () {
    if (i <= str.length) {
      divTyping.innerHTML = str.slice(0, i++) + '_'
      timer = setTimeout(typing, 24)
    }
    else {
      divTyping.innerHTML = str//结束打字,移除 _ 光标
      clearTimeout(timer)
    }
  }
  typing()
</script>

除此之外调整text和图像之间的距离。

9. 开启头像转动

\themes\mogege\assets\css\_common\_partials\hom.scss

更改代码：

transform:translateY(-0.75em) rotate(360deg);

并且将subtitle字体大小改为1.1em

10. 右下角添加到顶部按钮和进度比例

先定义文本框文件\themes\mogege\assets\css\_common\_core\layout.scss添加如下代码（代码参考next主题大佬@hao）：

/** 进度比例和到顶部**/
.back-to-top {
  box-sizing: border-box;
  border-radius: 8px;       /** 圆角**/
  position: fixed;
  right: 30px;
  z-index: 1050;
  padding: 0 6px;
  width: initial;
  background: #222;
  font-size: 12px;
  opacity: 0.6;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition-property: bottom;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  bottom: -40px;
}

.back-top-active {
  bottom: 30px;
}

@media (max-width: 767px) {

  .back-to-top {
    right: 10px;
  }


  .back-top-active {
    bottom: 10px;
  }
}

然后在\themes\mogege\layouts\partials\footer.html中更改底部显示

<!-- 此处更改过 -->
<div class="footer-box">
<footer class="footer">
   <div class="copyright">
      &copy;
      {{ with .Site.Params.since }}
      <span itemprop="copyrightYear">{{.}} - {{ now.Year }}</span>
      {{ end }}
      <span class="with-love">
         <i class="iconfont icon-love"></i>
      </span>
      {{ if .Site.Params.author }}
      <span class="author" itemprop="copyrightHolder"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.author  }}</a> |
      </span>
      {{ end }}
      {{ with .Site.Params.beian }}
      <a href="http://www.miibeian.gov.cn/" target="_blank" rel="external nofollow">{{ . }} </a> |
      {{ end }}
      <span>Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow">Hugo</a> & <a
            href="https://github.com/Mogeko/Mogege" target="_blank" rel="external nofollow">Mogege</a></span>
</footer>
<!-- 设置滚动条和进度比例 -->
      <div class="back-to-top" id="back_to_top">
         <!-- 箭头-->
<!-- https://www.toptal.com/designers/htmlarrows/-->
           <!-- 箭头 <span>&#8593;</span> -->
		 <span><i class="fas fa-arrow-up"></i></span> <!-- 需要FontAwesome支持，参见文末-->
         <!-- 进度比例 -->
         <span class="scrollpercent">
            <span id="back_to_top_text">0</span>%
         </span>
      </div>
</div>
<script>
   let sideBarOpen = 'sidebar-open';
   let body = document.body;
   let back2Top = document.querySelector('#back_to_top'),
      back2TopText = document.querySelector('#back_to_top_text'),
      drawerBox = document.querySelector('#drawer_box'),
      rightSideBar = document.querySelector('.sidebar'),
      viewport = document.querySelector('body');

   function scrollAnimation(currentY, targetY) {

      let needScrollTop = targetY - currentY
      let _currentY = currentY
      setTimeout(() => {
         const dist = Math.ceil(needScrollTop / 10)
         _currentY += dist
         window.scrollTo(_currentY, currentY)
         if (needScrollTop > 10 || needScrollTop < -10) {
            scrollAnimation(_currentY, targetY)
         } else {
            window.scrollTo(_currentY, targetY)
         }
      }, 1)
   }

   back2Top.addEventListener("click", function (e) {
      scrollAnimation(document.scrollingElement.scrollTop, 0);
      e.stopPropagation();
      return false;
   });

   window.addEventListener('scroll', function (e) {
      let percent = document.scrollingElement.scrollTop / (document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight) * 100;
      if (percent > 1 && !back2Top.classList.contains('back-top-active')) {
         back2Top.classList.add('back-top-active');
      }
      if (percent == 0) {
         back2Top.classList.remove('back-top-active');
      }
      if (back2TopText) {
         back2TopText.textContent = Math.floor(percent);
      }
   });
   let hasCacu = false;
  window.onresize = function () {
    calcuHeight();
  }
</script>

11. 博客更换为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更改标签样式，使用<nobr> </nobr>禁止换行操作

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

14. 添加灯箱

方法源自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>

15. 添加 Font Awesome图标

进入Font Awesome官网
注册账号登录获取代码
paths/themes\mogege\layouts\partials\head.html添加代码
文章中使用 <i class="fab fa-iconname"></i>或者 <i class="fas fa-iconname"></i>

16. 为文章添加目录

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

$\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

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

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

<i class="fas fa-caret-right"></i>
<i class="fas fa-caret-right"></i>

1. $\KaTeX$设置

1.1 解决 $ $ 不识别公式的问题

1.2 解决行间公式下标不识别，被Markdown解析的问题

2. 新建文档默认设置

3. 自定义CSS

4. 开启html语法支持

5. 强制push代码

6. 更改滚动条样式

7. 鼠标点击特效和蜘蛛网特效

8. subtitle打字机显示

9. 开启头像转动

10. 右下角添加到顶部按钮和进度比例

11. 博客更换为valine评论

12. 文章menu更新为带有图标

13. 修复menu带有图标后移动端显示不全的问题

14. 添加灯箱

15. 添加 Font Awesome图标

16. 为文章添加目录

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

1. $\KaTeX$设置

1.1 解决$ $不识别公式的问题

1.2 解决行间公式下标不识别，被Markdown解析的问题

2. 新建文档默认设置

3. 自定义CSS

4. 开启html语法支持

5. 强制push代码

6. 更改滚动条样式

7. 鼠标点击特效和蜘蛛网特效

8. subtitle打字机显示

9. 开启头像转动

10. 右下角添加到顶部按钮和进度比例

11. 博客更换为valine评论

12. 文章menu更新为带有图标

13. 修复menu带有图标后移动端显示不全的问题

14. 添加灯箱

15. 添加 Font Awesome图标

16. 为文章添加目录

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

1.1 解决 $ $ 不识别公式的问题