考虑到主题更新影响到一些文件的改动，
建议在自己博客的\source目录下新建\css和\js文件夹用来存放相关的效果脚本，
最终部署的时候会和\themes\butterfly\source目录下的资源进行合并，引用路径都是一样的，无须担心。

插件使用

插件名称 版本 作用
hexo-abbrlink 2.2.1 为文章生成字母和数字组成的唯一ID,代替默认的日期生成
hexo-swiper-bar 1.1.1 文章首页置顶
hexo-butterfly-charts 1.1.3 统计图表
hexo-douban 2.1.7 豆瓣个人页面
hexo-douban-card 1.4.0 在文章中插入豆瓣卡片
hexo-tag-steamgame 1.0.0 在文章中插入steam游戏
hexo-sakana 1.0.2 「Sakana! Widget」

脚本构建

  • 在\themes\butterfly\source\js目录下创建一个ripples.js文件，并将如下代码写入该文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(document).ready(function () {
      try {
        $("#page-header").ripples({
          resolution: 512,
          dropRadius: 10, //px
          perturbance: 0.04,
        });
      } catch (e) {
        $(".error").show().text(e);
      }
    });

  • 找到主题配置文件 _config.butterfly.yml，在inject的bottom处引入一下文件：

    • 开启 pjax
      1
      2
      3
      4
      5
      6
      inject:
        head:
        bottom:
          - <script defer src="https://rmt.dogedoge.com/fetch/~/source/jsdelivr/npm/jquery@latest/dist/jquery.min.js"></script>
          - <script defer data-pjax src="https://cdn.jsdelivr.net/gh/sirxemic/jquery.ripples/dist/jquery.ripples.js"></script>
          - <script defer data-pjax src="/js/ripples.js"></script>
    • 未开启 pjax
      1
      2
      3
      4
      5
      6
      inject:
        head:
        bottom:
          - <script defer src="https://rmt.dogedoge.com/fetch/~/source/jsdelivr/npm/jquery@latest/dist/jquery.min.js"></script>
          - <script defer src="https://cdn.jsdelivr.net/gh/sirxemic/jquery.ripples/dist/jquery.ripples.js"></script>
          - <script defer src="/js/ripples.js"></script>

      建议将外挂的链接脚本全部重新复制一份到本地进行引用，防止链接失效导致效果丢失

    重新部署后即可看到效果。当前效果存在一些适配问题，慎用！
    查看原文

  • 找到主题配置文件 _config.butterfly.yml，在inject的bottom处引入一下文件： 
    1
    2
    3
    4
    inject:
      head:
      bottom:
        - <script src="https://gcore.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>
    查看原文

  • 新建wave_style.pug文件
    在目录 \themes\butterfly\layout\includes\header\wave_style.pug 新建 wave_style.pug，并写入如下代码： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    section.main-hero-waves-area.waves-area
      svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
        defs
          path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
        g.parallax
          use(href='#gentle-wave', x='48', y='0')
          use(href='#gentle-wave', x='48', y='3')
          use(href='#gentle-wave', x='48', y='5')
          use(href='#gentle-wave', x='48', y='7')

  • 引入CSS样式
    在\source\css目录下新建 wave_style.css 文件，并添加如下代码： 

    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
    /*波浪特效*/
    .main-hero-waves-area {
        width: 100%;
        position: absolute;
        left: 0;
        z-index: 0;
        bottom: -7.5px /*特效显示位置调整，正/负值：以中心点 上移/下移，一般改数值即可*/
    }

    .waves-area .waves-svg {
        width: 100%;
        height: 5rem
    }

    .waves-area .parallax>use {
        -webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
        animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
    }

    .waves-area .parallax>use:first-child {
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
        fill: #ffffffb3
    }

    .waves-area .parallax>use:nth-child(2) {
        -webkit-animation-delay: -3s;
        animation-delay: -3s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        fill: #ffffff80
    }

    .waves-area .parallax>use:nth-child(3) {
        -webkit-animation-delay: -4s;
        animation-delay: -4s;
        -webkit-animation-duration: 13s;
        animation-duration: 13s;
        fill: #ffffff4d
    }

    .waves-area .parallax>use:nth-child(4) {
        -webkit-animation-delay: -5s;
        animation-delay: -5s;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
        fill: #f9fafb
    }

    @-webkit-keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0)
        }

        to {
            transform: translate3d(85px, 0, 0)
        }
    }

    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0)
        }

        to {
            transform: translate3d(85px, 0, 0)
        }
    }  

    /*向下按钮和大banner社交图标防被遮挡隐藏*/
    #page-header #scroll-down .scroll-down-effects{
      z-index: 10;
    }
    #page-header #site_social_icons{
      display: flow-root;
    }  

    /*黑暗模式适配*/
    [data-theme=dark]
    .waves-area .parallax>use:first-child {
        fill: #0f172ab3
    }
    [data-theme=dark]
    .waves-area .parallax>use:nth-child(2) {
        fill: #0f172a80
    }
    [data-theme=dark]
    .waves-area .parallax>use:nth-child(3) {
        fill: #0f172a4d
    }
    [data-theme=dark]
    .waves-area .parallax>use:nth-child(4) {
        fill: #070b14
    }

    如果背景色不是纯白的话，需继续添加背景色和波浪特效颜色的代码： 

    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
    /*主页背景色*/
    #web_bg {
      background: rgba(246, 239, 246);
    }
    [data-theme=dark]
    #web_bg {
      background: rgb(4, 4, 4);
    }

    /****修改波浪特效fill属性处颜色值（#后六位，7、8位透明度不用改），rgba(246, 239, 246) 与 #F6EFF6 效果是一样的*****/
    .waves-area .parallax>use:first-child {
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
        fill: #F6EFF6b3
    }

    .waves-area .parallax>use:nth-child(2) {
        -webkit-animation-delay: -3s;
        animation-delay: -3s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        fill: #F6EFF680
    }

    .waves-area .parallax>use:nth-child(3) {
        -webkit-animation-delay: -4s;
        animation-delay: -4s;
        -webkit-animation-duration: 13s;
        animation-duration: 13s;
        fill: #F6EFF64d
    }

    .waves-area .parallax>use:nth-child(4) {
        -webkit-animation-delay: -5s;
        animation-delay: -5s;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
        fill: #F6EFF6
    }

  • 添加引入位置
    在\themes\butterfly\layout\includes\header\index.pug文件中如下位置添加代码： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    header#page-header(class=isHomeClass style=bg_img)
      !=partial('includes/header/nav', {}, {cache: true})
      if top_img !== false
        if is_post()
          include ./post-info.pug
        else if is_home() 
          #site-info
            h1#site-title=site_title
            if theme.subtitle.enable
              - var loadSubJs = true
              #site-subtitle
                span#subtitle
            if(theme.social)
              #site_social_icons
                !=fragment_cache('social', function(){return partial('includes/header/social')})
          #scroll-down
            i.fas.fa-angle-down.scroll-down-effects
        else
          #page-site-info
            h1#site-title=site_title
      //- wave特效 添加如下，注意代码缩进与if top_img一致哦~
      !=partial('includes/header/wave_style', {}, {cache: true})

重新部署后即可看到效果。

查看原文

  • 在\themes\butterfly\scripts\tag下新建文件bilibili.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
    'use strict'
    let playIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>`
    let likeIcon = `<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>`
    let coinIcon = `<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>`

    function bilibili(args) {
      const id = args[0].replace(/.*video\/(.*)\/?.*/, '$1')
      const time = args[1]
      const hidden_desc = args[2]
      return `
      <a href="https://www.bilibili.com/video/${id}/" class="bilibili_box" id="${id}"></a>

      <script>
        bilibili()
        function bilibili() {
          let dom = document.getElementById('${id}')
          fetch('https://api.320.ink/api/b?id=${id}').then(res=>res.json()).then(data=>{
            dom.innerHTML = \`
            <div class="bilibili_cover">
              <img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon no-lazyload">
              <img src="\${data.pic + '&h=300'}" class="no-lazyload">
              ${time ? `<span>${time}</span>` : ''}
            </div>
            <div class="bilibili_info">
              <div class="title">\${data.title}</div>
              ${hidden_desc == 'true' ? '' : '<div class="desc">\${data.desc}</div>'}
              <div class="stat">
                <span>${playIcon}\${data.view}</span>
                <span>${likeIcon}\${data.like}</span>
                <span>${coinIcon}\${data.coin}</span>
              </div>
              <div class="owner">
                <span class="tip">视频</span>
                <img src="\${data.face + '&h=100'}" class="no-lazyload">
                <span>\${data.owner}</span>
              </div>
            </div>
            \`
          })
        }
      </script>
      `
    }

    hexo.extend.tag.register('bilibili', bilibili, { ends: false })

  • 在\themes\butterfly\source\css\_tags下新建文件bilbili.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
    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
    .bilibili_box
      display: flex
      background: var(--card-bg)
      border: 1px solid #e0e3ed
      border-radius: 10px
      overflow: hidden
      color: var(--font-color) !important
      text-decoration: none !important
      transition: .3s
      &:hover
        border-color: #4976f5
      +maxWidth768()
        flex-direction: column
      .bilibili_cover
        width: 234px
        position relative
        +maxWidth768()
          width: 100%
        img
          width: 100%
          filter: none
          margin: 0 !important
          border-radius: 0 !important
        .play_icon
          position: absolute
          width 45px
          height 45px
          opacity .8
          top: 50%
          left 50%
          transform: translate(-50%,-50%)
        span 
          position: absolute
          bottom: 0px
          right: 5px
          color: white
          text-shadow: 0 1px 3px #7a7a7a
      .bilibili_info
        padding: 10px 10px 10px 18px
        line-height: 1
        width: calc(100% - 200px)
        display: flex
        flex-direction: column
        justify-content: space-around
        +maxWidth768()
          width: 100%
          padding-bottom: 25px
          line-height: 1.5
        .title 
          font-size: 1.2rem
          font-weight: bold
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          line-height: 1.5
        .desc 
          font-size: 15px
          margin: 2px 0 4px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          +maxWidth768()
            // word-break: break-all
            white-space: normal
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
        .stat 
          font-size: 15px
          svg
            margin-right: 3px
            font-size: 18px
            width: 1em
            height: 1em
            path
              fill: var(--font-color)
          span
            margin-right: 10px
            display: inline-flex
            align-items: center
        .owner 
          display: flex
          align-items: center
          line-height: 1
          font-size: 15px
          .tip
            color: #FF6699
            border: 1px solid
            padding: 3px 6px
            font-size: 12px
            border-radius: 5px
            margin-right: 10px
          img
            width 22px
            height: 22px
            border-radius: 50% !important
            object-fit: cover
            margin 0 5px 0 0 !important

    [data-theme='light'] .bilibili_box .bilibili_info .stat svg,
    [data-theme='dark'] .bilibili_cover
      opacity .8

标签书写格式如下： 

1
2
3
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 %}
<!-- 如果你要隐藏简介，添加true即可（注意，要隐藏简介则必须设置适配时间！），如下 -->
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 true %}

查看原文

这篇教程有一个关于颜色脚本color.css的坑，填坑过程有空再补…施工中🚀
查看原文

  1. 标签增加上下标，用于显示标签数量
  • 修改[blogRoot]/themes/butterfly/scripts/helpers/page.js第49行内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
        ···

      const length = sizes.length - 1
      source.sort(orderby, order).forEach(tag => {
        const ratio = length ? sizes.indexOf(tag.length) / length : 0
        const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
        let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
        const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
        style += ` color: ${color}`
    -   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
    +    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
      })
      return result
    })

        ···

  1. 新建[blogRoot]/source/css/tag_page.css，添加如下内容：

    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
    #page .tag-cloud-list {
        margin: 5em 0 3em;
    }
    #page .tag-cloud-list a {
        display: inline-flex;
        color: var(--icat-fontcolor) !important;
        font-size: 1.2em !important;
        padding: 0.2em 0.5em;
        background: var(--icat-card-bg);
        margin: 0.5em 0.5em;
        border-radius: 12px;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        border: var(--style-border-always);
        box-shadow: var(--icat-shadow-border);
        align-items: center;
    }
    #page .tag-cloud-list a:before {
        color: var(--icat-fontcolor) !important;
        cursor: pointer;
        content: "\e038" !important;
        font-family: "iconfont" !important;
        opacity: 0.4;
        padding-top: 2px;
        padding-right: 2px;
    }
    #page .tag-cloud-list a:hover {
        background: var(--icat-blue);
    }
    #page .tag-cloud-list a > sup{
        top: auto;
        background: var(--icat-secondbg);
        padding: 4px 4px;
        margin-left: 8px;
        border-radius: 6px;
        color: var(--icat-secondtext);
        line-height: 1;
        text-align: center;
        min-width: 35px;
        display: inline-block;
        font-size: 1rem;
        box-shadow: var(--icat-shadow-border);
    }

    /* 标签页样式 */

  2. 在主题的config文件中引用 tag_page.css 。

  3. 执行三连

    1
    hexo clean && hexo g && hexo s

查看原文

此效果与 _config.butterfly.yml 里功能字段配置 pangu(中英文之间添加空格) 冲突，若想要正确显示，请填写配置 enable:false ，关闭 pangu。

  1. 修改[blogRoot]/themes/butterfly/layout/includes/pagination.pug

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

      var options = {
        prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
        next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
        mid_size: 1,
        escape: false
      }
    +  var icat_options = {
    +    prev_text: '<i class="iconfont icat-chevron-left fa-fw"></i><div class="pagination_tips_prev">上页</div>',
    +    next_text: '<div class="pagination_tips_next">下页</div><i class="iconfont icat-chevron-right fa-fw"></i>',
    +    mid_size: 1,
    +    escape: false
    +  }

    if is_post()
      - let prev = theme.post_pagination === 1 ? page.prev : page.next
      - let next = theme.post_pagination === 1 ? page.next : page.prev
      nav#pagination.pagination-post
        if(prev)
          - var hasPageNext = next ? 'pull-left' : 'pull-full'
          .prev-post(class=hasPageNext)
            a(href=url_for(prev.path) title=prev.title)
              if prev.cover_type === 'img'
                img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
              else
                .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
              .pagination-info
                .label=_p('pagination.prev')
                .prev_info=prev.title
              
        if(next)
          - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
          .next-post(class=hasPagePrev)
            a(href=url_for(next.path) title=next.title)
              if next.cover_type === 'img'
                img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
              else
                .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
              .pagination-info
                .label=_p('pagination.next')
                .next_info=next.title
    else
      nav#pagination
        .pagination
          if is_home()
            - options.format = 'page/%d/#content-inner'
    -     !=paginator(options)
    +        !=paginator(icat_options)
    +      else
    +        !=paginator(options)
    +      if is_home()
    +        .toPageGroup
    +          input#toPageText(maxlength="3" oninput="value=value.replace(/[^0-9]/g,'')" onkeyup="if (this.value === '0') this.value = ''" title="跳转到指定页面")
    +          a#toPageButton(data-pjax-state="" onclick="icattoPage.toPage()")
    +            i.fa-solid.fa-angles-right

  2. 新建[blogRoot]/source/css/pagination.css，添加如下内容（注意颜色值的替换）：

    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
    .page .layout > .recent-posts .pagination > a:hover {
        background: #00c4b6;
    }
    /* 翻页按钮悬停颜色 */
    .layout > .recent-posts .pagination > a {
      border: var(--style-border);
    }
    /* 调整添加原生边框 */
    #pagination .pagination {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .page .layout .recent-posts #pagination .pagination .prev {
      left: 0;
    }
    .page .layout .recent-posts #pagination .pagination .next {
      right: 0;
    }
    .page .layout .recent-posts #pagination .pagination .prev,
    .page .layout .recent-posts #pagination .pagination .next {
      position: absolute;
      margin: 0 0;
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 5.25em;
      overflow: hidden;
    }
    .page .layout .recent-posts #pagination .pagination .prev:hover .pagination_tips_prev {
      margin-right: 2.5px;
      opacity: 1;
    }
    .page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev {
      margin-right: -28px;
      transition: margin-right .3s;
      opacity: 0;
    }
    .page .layout .recent-posts #pagination .pagination .next:hover .pagination_tips_next {
      margin-left: 2.5px;
      opacity: 1;
    }
    .page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
      margin-left: -28px;
      transition: margin-left .3s;
      opacity: 0;
    }
    @media screen and (max-width: 768px) {
      .page .layout .recent-posts #pagination .pagination .prev,
      .page .layout .recent-posts #pagination .pagination .next {
        position: sticky;
        margin: 0 6px;
        display: inline-block;
        width: 2.5em;
      }
      .page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev,
      .page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
        display: none;
      }
    }
    /* 上下页按钮魔改 */
    .pagination input {
      width: 2.5em;
      height: 2.5em;
      border-radius: 8px;
      border: var(--style-border-always);
      transition: all 0.3s;
      outline-style: none;
      padding-left: 12px;
      background: var(--icat-secondbg);
      color: var(--icat-fontcolor);
    }

    .pagination .toPageGroup:hover input,.pagination .toPageGroup input:focus {
      border: 1px solid #00c4b6;
      outline-style: none;
      width: 100px;
    }

    .toPageGroup {
      display: inline-flex !important;
      position: relative;
      margin: 0 6px !important;
    }

    a#toPageButton {
      display: flex;
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      background: var(--card-bg);
      border: var(--style-border-always);
      cursor: text !important;
      pointer-events: none;
    }

    .toPageGroup:hover a#toPageButton, .toPageGroup:focus-within a#toPageButton {
      margin-top: 4px;
      width: 27px;
      height: 27px;
      margin-left: 70px;
      background: var(--icat-card-bg);
      border: 1px solid var(--icat-none);
      border-radius: 4px;
      opacity: 0.2;
      transition: all 0.3s !important;
    }

    .toPageGroup:focus-within a#toPageButton.haveValue {
      opacity: 1;
      cursor: pointer;
    }

    a#toPageButton.haveValue {
      opacity: 1!important;
      cursor: pointer!important;
      pointer-events: all;
    }

    a#toPageButton.haveValue:hover {
      background: var(--icat-theme);
      color: var(--icat-white);
    }

    @media screen and (max-width: 768px) {
      .toPageGroup {
        display: none !important;
      }
    }

    /* 页数跳转按钮 */

  3. 创建[blogRoot]/source/js/pagination.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
    var icattoPage = {
      toPage: function() {
          console.log("执行跳转");
          var e = document.querySelectorAll(".page-number")
            , t = parseInt(e[e.length - 1].innerHTML)
            , n = document.getElementById("toPageText")
            , a = parseInt(n.value);
          if (!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= t) {
              var s = 1 == a ? "/" : "/page/" + a + "/#content-inner";
              document.getElementById("toPageButton").href = s
          }
      },
      listenToPageInputPress() {
          var e = document.getElementById("toPageText")
            , t = document.getElementById("toPageButton");
          e && (e.addEventListener("keydown", (e=>{
              13 === e.keyCode && (icattoPage.toPage(),
              pjax.loadUrl(t.href))
          }
          )),
          e.addEventListener("input", (function() {
              "" === e.value || "0" === e.value ? t.classList.remove("haveValue") : t.classList.add("haveValue");
              var n = document.querySelectorAll(".page-number")
                , a = +n[n.length - 1].innerHTML;
              +document.getElementById("toPageText").value > a && (e.value = a)
          }
          )))
      }
    }
    icattoPage.listenToPageInputPress();

    // 自定页数跳转

  4. 在主题的config文件中引用 pagination.css 和 pagination.js。

  5. 执行三连

    1
    hexo clean && hexo g && hexo s

查看原文