Hugo博客自定义优化 I | shishuoCh's Blog

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

更新日志

更新日期	更新内容	更新类型
2019-2021	见文章	修复问题、主题更新类
2021-09-19	添加更新日志	日志类
2021-09-20	添加文章更新日期、更改打字机实现方式	主题功能类
2022-07-14	~~重新配置config.toml文件~~	~~适应新版本Hugo~~
2022-07-14	介绍文后添加分隔线	主题更新（早就改了，但是没记录）
2022-10-02	解决长公式的断行问题	公式类

1. $\KaTeX$设置

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

文件路径：\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>

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

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

长公式断行（2022-10-02）

在$\KaTeX$中写的行内长公式不支持自动断行，因此在移动端显示会超出页面，在官网的issue下面有一些人提出了为其增加滚动条的方法，结合jeffswt和mbourne的方法，在\resources\_gen\assets\scss\css\main.scss_b95b077eb505d5c0aff8055eaced30ad.content文件中添加如下样式，这样长公式就会有滚动条了。

.katex-display > .katex {
  display: block;
    height: auto;
    padding-bottom: 12px;
    -webkit-box-sizing: border-box;
    overflow-x: auto;
    white-space: nowrap;
}
.katex {
  font: normal 1.21em KaTeX_Main, Times New Roman, serif;
  line-height: 1.2;
  white-space: normal;
  text-indent: 0;
}

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和图像之间的距离。

新版本方法（09-20）

之前的方法只能是逐步打字显示，但不能回退，这次的方法可以二者都实现，且可简易控制速度，间隔时间等。主要参考的是国光的博客首页、typed.js。

同样的文件更改路径： \themes\mogege\layouts\partials\home_profile.html

<div class="description center-align">

<span id="subtitle">
</span>
<span class="typed-cursor">|</span>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed=new Typed("#subtitle",{strings:["宁静致远","Innovation points out paths that are possible; replication points out paths that are likely; progress relies on both."],startDelay:2,typeSpeed:20,loop:!0,backSpeed:20,showCursor:!1})</script>
</div>
</h2>
{{ end }}
</div>

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>

更新日志

1. $\KaTeX$设置

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

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

长公式断行（2022-10-02）

2. 新建文档默认设置

3. 自定义CSS

4. 开启html语法支持

5. 强制push代码

6. 更改滚动条样式

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

8. subtitle打字机显示

旧版本方法

新版本方法（09-20）

9. 开启头像转动

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

相关文章推荐

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