Hugo | 记录Mogege主题美化过程

因为Mogege主题好看到犯规，所以我把文站主题从MemE换成了Mogege…
非常对不起自家男孩子！！！本来Mogege是要给他用的…

添加TOC目录

在主题文件 /themes/Mogege/assets/css/_common/home.scss内添加 toc 样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


.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;
    }
} 

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


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

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

1
2
3


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

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

1
2


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

开启头像转动

在 \themes\mogege\assets\css\_common\_partials\home.scss第32行更改：

1

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

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

在\themes\mogege\layouts\partials\js.html中添加：

1
2
3


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

添加 Font Awesome 图标

在Font Awesome 官网注册帐号。注册成功后会显示帐号中有一套免费图标。然后获取HTML代码，在/themes/mogege/layouts/partials/head.html中粘贴代码。

用法：后面将使用  或者 ，iconname是想要插入的图标名。

更改上下篇文章的图标

在/themes/Mogege/layouts/_default/single.html的post-nav部分（需要 FontAwesome 支持）

将更改为 。
将更改为。

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

先定义文本框文件，在\themes\mogege\assets\css\_common\_core\layout.scss添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


/** 进度比例和到顶部**/
.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中更改底部显示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


<!-- 此处更改过 -->
<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>
{{ partial "js.html" . }}
<!-- 设置滚动条和进度比例 -->
      <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>