Hexo静态博客主题个性化定制笔记

發表於 更新於 分類於 ，

前言：

这篇文章详细记录了我在博客中使用NexT 主题进行个性化定制的步骤以及使用过程中的笔记。

鼠标点击效果

1️⃣单击鼠标特效：

网页单击鼠标任意键产生烟花特效；

具体步骤：

  1. 新建fireworks.js文件: next\source\js\cursor\fireworks.js

    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
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    class Circle {
      constructor({ origin, speed, color, angle, context }) {
        this.origin = origin
        this.position = { ...this.origin }
        this.color = color
        this.speed = speed
        this.angle = angle
        this.context = context
        this.renderCount = 0
      }

      draw() {
        this.context.fillStyle = this.color
        this.context.beginPath()
        this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
        this.context.fill()
      }

      move() {
        this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
        this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
        this.renderCount++
      }
    }

    class Boom {
      constructor ({ origin, context, circleCount = 16, area }) {
        this.origin = origin
        this.context = context
        this.circleCount = circleCount
        this.area = area
        this.stop = false
        this.circles = []
      }

      randomArray(range) {
        const length = range.length
        const randomIndex = Math.floor(length * Math.random())
        return range[randomIndex]
      }

      randomColor() {
        const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
        return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
      }

      randomRange(start, end) {
        return (end - start) * Math.random() + start
      }

      init() {
        for(let i = 0; i < this.circleCount; i++) {
          const circle = new Circle({
            context: this.context,
            origin: this.origin,
            color: this.randomColor(),
            angle: this.randomRange(Math.PI - 1, Math.PI + 1),
            speed: this.randomRange(1, 6)
          })
          this.circles.push(circle)
        }
      }

      move() {
        this.circles.forEach((circle, index) => {
          if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
            return this.circles.splice(index, 1)
          }
          circle.move()
        })
        if (this.circles.length == 0) {
          this.stop = true
        }
      }

      draw() {
        this.circles.forEach(circle => circle.draw())
      }
    }

    class CursorSpecialEffects {
      constructor() {
        this.computerCanvas = document.createElement('canvas')
        this.renderCanvas = document.createElement('canvas')

        this.computerContext = this.computerCanvas.getContext('2d')
        this.renderContext = this.renderCanvas.getContext('2d')

        this.globalWidth = window.innerWidth
        this.globalHeight = window.innerHeight

        this.booms = []
        this.running = false
      }

      handleMouseDown(e) {
        const boom = new Boom({
          origin: { x: e.clientX, y: e.clientY },
          context: this.computerContext,
          area: {
            width: this.globalWidth,
            height: this.globalHeight
          }
        })
        boom.init()
        this.booms.push(boom)
        this.running || this.run()
      }

      handlePageHide() {
        this.booms = []
        this.running = false
      }

      init() {
        const style = this.renderCanvas.style
        style.position = 'fixed'
        style.top = style.left = 0
        style.zIndex = '999999999999999999999999999999999999999999'
        style.pointerEvents = 'none'

        style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
        style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

        document.body.append(this.renderCanvas)

        window.addEventListener('mousedown', this.handleMouseDown.bind(this))
        window.addEventListener('pagehide', this.handlePageHide.bind(this))
      }

      run() {
        this.running = true
        if (this.booms.length == 0) {
          return this.running = false
        }

        requestAnimationFrame(this.run.bind(this))

        this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
        this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

        this.booms.forEach((boom, index) => {
          if (boom.stop) {
            return this.booms.splice(index, 1)
          }
          boom.move()
          boom.draw()
        })
        this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
      }
    }

    const cursorSpecialEffects = new CursorSpecialEffects()
    cursorSpecialEffects.init()

  2. 新建custom.swig文件: next\layout\_custom\custom.swig

    1
    2
    3
    4
    {# 鼠标点击特效 #}
    {% if theme.cursor_effect == "fireworks" %}
      <script async src="/js/cursor/fireworks.js"></script>
    {% endif %}

  3. 修改_layout.njk文件: next/layout/_layout.njk

    1
    2
    3
      {{- next_inject('bodyEnd') }}
      {% include '_custom/custom.swig' %}
    </body>

  4. 在主题配置文件中添加以下代码: _config.next.yml

    1
    2
    # 鼠标点击烟花特效
    cursor_effect: fireworks

2️⃣博客运行时间：

在博客底部添加持续运行时间统计；

具体步骤：

修改footer.njk文件： next/layout/_partials/footer.njk

最后一行添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("09/01/2023 00:00:00");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
</div>

3️⃣文章结束提示语：

文章结尾提示结束

具体步骤：

  1. 新建passage-end-tag.swig文件： next/layout/_macro/passage-end-tag.swig

    1
    2
    3
    4
    5
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束 ------</div>
        {% endif %}
    </div>

  2. 修改post.njk文件: next/layout/_macro/post.njk

    #END POST BODY# 下面

    1
    2
    3
    4
    5
    <div>
        {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
        {% endif %}
     </div>

  3. 修改主题文件: _config.next.yml

    1
    2
    3
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
    enabled: true

4️⃣网页标题个性化：

离开和进入页面时动态修改 Tab 标签中的标题；

具体步骤：

修改custom.swig文件: next\layout_custom\custom.swig

最底插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 搞怪网页标题 #}
{% if theme.title_trick.enable %}
<script>
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "{{ theme.title_trick.leave }}" + OriginTitile;
      clearTimeout(titleTime);
    } else {
      document.title = "{{ theme.title_trick.enter }}" + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>
{% endif %}
  • 主题配置文件_config.next.yml追加：
    1
    2
    3
    4
    5
    # a trick on website title
    title_trick:
      enable: true
      leave: "╭(°A°`)╮ 页面崩溃啦~"
      enter: "(ฅ>ω<*ฅ) 噫又好了~"

5️⃣友情链接优化：

优化自定义友情链接页面使其更美观；

具体步骤：

  • 新增links页面: hexo new page links

  • 修改/source/links/index.md，在头部写入 type = “links”

    1
    2
    3
    4
    5
    ---
    title: 友站連結
    date: 2023-09-10 23:56:11
    type: "links"
    ---

  • 主题配置文件menu:下添加：links: /links/ || fa fa-link

  • 在主题文件next/layout/_custom/links.swig新建links.swig，内容如下：

    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
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
     {% block content %}
      {######################}
      {### LINKS BLOCK ###}
      {######################}

        <div id="links">
            <style>

                #links{
                   margin-top: 5rem;
                }

                .links-content{
                    margin-top:1rem;
                }

                .link-navigation::after {
                    content: " ";
                    display: block;
                    clear: both;
                }

                .card {
                    width: 300px;
                    font-size: 1rem;
                    padding: 10px 20px;
                    border-radius: 4px;
                    transition-duration: 0.15s;
                    margin-bottom: 1rem;
                    display:flex;
                }
                .card:nth-child(odd) {
                    float: left;
                }
                .card:nth-child(even) {
                    float: right;
                }
                .card:hover {
                    transform: scale(1.1);
                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
                }
                .card a {
                    border:none;
                }
                .card .ava {
                    width: 3rem!important;
                    height: 3rem!important;
                    margin:0!important;
                    margin-right: 1em!important;
                    border-radius:4px;

                }
                .card .card-header {
                    font-style: italic;
                    overflow: hidden;
                    width: 236px;
                }
                .card .card-header a {
                    font-style: normal;
                    color: #2bbc8a;
                    font-weight: bold;
                    text-decoration: none;
                }
                .card .card-header a:hover {
                    color: #d480aa;
                    text-decoration: none;
                }
                .card .card-header .info {
                    font-style:normal;
                    color:#a3a3a3;
                    font-size:14px;
                    min-width: 0;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            </style>
            <div class="links-content">
                <div class="link-navigation">

                    {% for link in theme.mylinks %}

                        <div class="card">
                            <img class="ava" src="{{ link.avatar }}"/>
                            <div class="card-header">
                               <div>
                                  <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a>
                               <!--    <a href="{{ link.site }}" target="_blank"><span class="focus-links">关注</span></a> -->
                               </div>
                               <div class="info">{{ link.info }}</div>
                            </div>
                        </div>

                    {% endfor %}

                </div>
                {{ page.content }}
                </div>
            </div>

      {##########################}
      {### END LINKS BLOCK ###}
      {##########################}
    {% endblock %}

  • 修改 next/layout/page.njk 文件，在{{- __('title.tag') + page_title_suffix }}下插入

    1
    2
    3
    <!-- 友情链接-->
    {% elif page.type === 'links' and not page.title %}
      {{ __('title.links') + page_title_suffix }}

  • 继续在{%- include ‘_partials/page/schedule.njk’ -%}下插入

    1
    2
    3
    <!-- 友情链接-->
    {% elif page.type === 'links' %}
        {% include '_custom/links.swig' %}

  • 最后在 _config.next.yml 主题配置文件配置友链，在末尾新增mylinks:，如下：

    1
    2
    3
    4
    5
    mylinks:
    - nickname: Message content  #友链名称
      site: https://msg.imlam.com/  #友链地址
      info: 一个简陋的留言板。  #友链说明
      avatar: https://file.imlam.com/admin/favicon.ico  #友链头像

6️⃣页面美化：

  1. 添加网页背景；
  2. 调整文章栏和侧边栏背景透明度
  3. 框架栏圆角；
  4. 修改鼠标样式

具体步骤：

  • 修改styles.styl文件: source/_data/styles.styl

    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
    // 添加背景图片
    body {
      background: url(/图片.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right bottom;
      background-color: #dfedf3
      cursor: url(/images/default.cur),default;
    }

    a,
    img {
      cursor: url(/images/pointer.cur),pointer;
    }

    // 修改主体透明度
    .main-inner {
      background: #fff;
      opacity: 0.9;
    }

    .sidebar {
      opacity: 0.8;
    }

  • 修改variables.styl文件: source/_data/variables.styl

    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 20px;
    $border-radius           = 20px;

  • 修改_config.next.yml

    1
    2
    3
    4
    5
    # 定义自定义文件路径。
    # 在站点目录 `source/_data` 中创建自定义文件并取消注释下面所需的文件。
    custom_file_path:
      variable: source/_data/variables.styl
      style: source/_data/styles.styl