【Hexo】美化教程合集 2

  1. 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。
  2. 本贴魔改均基于butterfly主题。
  3. 本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。
  4. 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。
  5. 本帖基于Butterfly主题进行魔改方案编写，因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。
  6. 魔改会过程常常引入自定义的css与js文件，方法见【Hexo】添加自定义css和js文件

1 打赏按钮菜单(店长微调)

点击查看教程

参考教程：打赏按钮菜单(店长微调)
教程参考自店长的糖果屋微调集合，但是做完之后发现有些bug，悬浮鼠标显示的二维码是竖向的，于是做了一些调整，还有更换了一些旧的CDN等，可以放心食用。

  1. 修改[BlogRoot]\themes\butterfly\layout\includes\post\reward.pug,整体替换为以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    link(rel='stylesheet' href=url_for(theme.CDN.option.coin_css) media="defer" onload="this.media='all'")
    .post-reward
      button.tip-button.reward-button
        span.tip-button__text= _p('donate')  //- 可以修改 donate 为按钮显示内容
        .coin-wrapper
          .coin
            .coin__middle
            .coin__back
            .coin__front
        .reward-main
          ul.reward-all
            each item in theme.reward.QR_code
              - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img
              li.reward-item
                a(href=clickTo target='_blank')
                  img.post-qr-code-img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
                .post-qr-code-desc=(item.itemlist||item).text
    if theme.reward.coinAudio
      - var coinAudio = theme.reward.coinAudio ? url_for(theme.reward.coinAudio) : 'https://cdn.cbd.int/akilar-candyassets@1.0.36/audio/coin.mp3'
      audio#coinAudio(src=coinAudio)
    script(defer src=url_for(theme.CDN.option.coin_js))

  2. 修改主题配置文件_config.butterfly.yml,添加音频文件配置项以及CDN配置项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
      # Sponsor/reward
      reward:
        enable: true
    +   coinAudio: https://npm.elemecdn.com/akilar-candyassets@1.0.36/audio/aowu.m4a
        QR_code:
    ...
      CDN:
         option:
          # main_css:
           # main:
           # utils:
    +      # 打赏按钮投币效果
    +      coin_js: https://npm.elemecdn.com/hexo_resources@latest/js/coin.min.js
    +      coin_css: https://npm.elemecdn.com/hexo_resources@latest/css/coin.min.css
          # translate:
          # local_search:

  3. 修改[BlogRoot]\themes\butterfly\source\css\_layout\reward.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
    .post-reward
      position: relative
      margin-top: 3rem
      width: 100%
      text-align: center

      .reward-button
        display: inline-block
        padding: .2rem 1.2rem
        background: var(--btn-bg)
        color: var(--btn-color)
        transition: all .4s
        border-radius: 30px

        &:hover
          box-shadow: inset 20em 0 0 0 var(--btn-hover-color)

          .reward-main
            display: flex

        .reward-main
          position: absolute
          bottom: 40px
          left: -55%
          z-index: 100
          display: none
          padding: 0 0 15px
          width: 150%

          .reward-all
            display: flex
            margin: 0
            padding: 1rem .5rem
            border-radius: 12px
            background: var(--reward-pop)

            &:before
              position: absolute
              bottom: -10px
              left: 0
              width: 100%
              height: 20px
              content: ''

            &:after
              position: absolute
              right: 0
              bottom: 2px
              left: 0
              margin: 0 auto
              width: 0
              height: 0
              border-top: 13px solid var(--reward-pop)
              border-right: 13px solid transparent
              border-left: 13px solid transparent
              content: ''

            .reward-item
              display: inline-block
              padding: 0 8px
              list-style-type: none
              vertical-align: top

              img
                width: 130px
                height: 130px

              .post-qr-code-desc
                padding-top: .4rem
                width: 130px
                color: $reward-pop-up-color

  4. 到这里基本就完成了，这里需要微调的是步骤5中的第16、24和28行，根据自己的二维码宽度进行调节，然后重启项目：

    1
    hexo cl; hexo s

2 页面样式调节

点击查看教程

详见：页面样式调节

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

  1. 复制以下代码进去自定义的custom.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
    :root {
      --trans-light: rgba(255, 255, 255, 0.88);
      --trans-dark: rgba(25, 25, 25, 0.88);
      --border-style: 1px solid rgb(169, 169, 169);
      --backdrop-filter: blur(5px) saturate(150%);
    }

    /* 首页文章卡片 */
    #recent-posts > .recent-post-item {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border-radius: 25px;
      border: var(--border-style);
    }

    /* 首页侧栏卡片 */
    #aside-content .card-widget {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border-radius: 18px;
      border: var(--border-style);
    }

    /* 文章页、归档页、普通页面 */
    div#post,
    div#page,
    div#archive {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border: var(--border-style);
      border-radius: 20px;
    }

    /* 导航栏 */
    #page-header.nav-fixed #nav {
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: var(--backdrop-filter);
    }

    [data-theme="dark"] #page-header.nav-fixed #nav {
      background: rgba(0, 0, 0, 0.7) !important;
    }

    /* 夜间模式遮罩 */
    [data-theme="dark"] #recent-posts > .recent-post-item,
    [data-theme="dark"] #aside-content .card-widget,
    [data-theme="dark"] div#post,
    [data-theme="dark"] div#archive,
    [data-theme="dark"] div#page {
      background: var(--trans-dark);
    }


    /* 夜间模式页脚页头遮罩透明 */
    [data-theme="dark"] #footer::before {
      background: transparent !important;
    }
    [data-theme="dark"] #page-header::before {
      background: transparent !important;
    }

    /* 阅读模式 */
    .read-mode #aside-content .card-widget {
      background: rgba(158, 204, 171, 0.5) !important;
    }
    .read-mode div#post {
      background: rgba(158, 204, 171, 0.5) !important;
    }

    /* 夜间模式下的阅读模式 */
    [data-theme="dark"] .read-mode #aside-content .card-widget {
      background: rgba(25, 25, 25, 0.9) !important;
      color: #ffffff;
    }
    [data-theme="dark"] .read-mode div#post {
      background: rgba(25, 25, 25, 0.9) !important;
      color: #ffffff;
    }

  2. 参数说明：

    • --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；
    • --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;
    • --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
    • --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;
    • 大家可以根据自己喜好进行调节，不用拘泥于我的样式！

  3. 记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：

    1
    2
    3
    inject:
      head:
    +    - <link rel="stylesheet" href="/css/custom.css">

  4. 重启项目即可看见效果：

    1
    hexo cl; hexo s

3 导航栏居中

点击查看教程

详见：导航栏魔改

在[BlogRoot]\source\css\custom.css中引入如下css代码，然后在主题配置文件_config.butterfly.yml中引入该文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
  display: flex !important;
}
/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
  left: -80px;
}
.menus_items .menus_item:nth-child(3) .menus_item_child {
  left: -75px;
}

此处的css实现了两个作用：菜单栏居中、子菜单横向显示。其中子菜单横向显示要根据自己的实际情况来改，例如你的以及菜单的第2个选项中有子菜单，那就要加一项调节第2个选项中的子菜单，这个具体调节多少要根据你的具体情况为准，可以自己慢慢调到中间。

优点是可以把每一个子菜单调到我们满意的位置。
缺点就是如果你新增菜单，需要修改一下css，不过一般来说菜单我们很少修改。

我们在调子菜单的时候，有个小功能对我们很有用，如下：

打开这个可以让子菜单显示出来，方便我们修改样式。这里要注意，我们hover是在div上的，在其他地方hover是没效果的。

4 黑夜霓虹灯

点击查看教程

详见：黑夜霓虹灯2.0（纯CSS实现）

  1. 在自定义的[BlogRoot]\source\css\custom.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
    /* 日间模式不生效 */
    [data-theme="light"] #site-name,
    [data-theme="light"] #site-title,
    [data-theme="light"] #site-subtitle,
    [data-theme="light"] #post-info {
      animation: none;
    }
    /* 夜间模式生效 */
    [data-theme="dark"] #site-name,
    [data-theme="dark"] #site-title {
      animation: light_15px 10s linear infinite;
    }
    [data-theme="dark"] #site-subtitle {
      animation: light_10px 10s linear infinite;
    }
    [data-theme="dark"] #post-info {
      animation: light_5px 10s linear infinite;
    }
    /* 关键帧描述 */
    @keyframes light_15px {
      0% {
        text-shadow: #5636ed 0 0 15px;
      }
      12.5% {
        text-shadow: #11ee5e 0 0 15px;
      }
      25% {
        text-shadow: #f14747 0 0 15px;
      }
      37.5% {
        text-shadow: #f1a247 0 0 15px;
      }
      50% {
        text-shadow: #f1ee47 0 0 15px;
      }
      50% {
        text-shadow: #b347f1 0 0 15px;
      }
      62.5% {
        text-shadow: #002afa 0 0 15px;
      }
      75% {
        text-shadow: #ed709b 0 0 15px;
      }
      87.5% {
        text-shadow: #39c5bb 0 0 15px;
      }
      100% {
        text-shadow: #5636ed 0 0 15px;
      }
    }

    @keyframes light_10px {
      0% {
        text-shadow: #5636ed 0 0 10px;
      }
      12.5% {
        text-shadow: #11ee5e 0 0 10px;
      }
      25% {
        text-shadow: #f14747 0 0 10px;
      }
      37.5% {
        text-shadow: #f1a247 0 0 10px;
      }
      50% {
        text-shadow: #f1ee47 0 0 10px;
      }
      50% {
        text-shadow: #b347f1 0 0 10px;
      }
      62.5% {
        text-shadow: #002afa 0 0 10px;
      }
      75% {
        text-shadow: #ed709b 0 0 10px;
      }
      87.5% {
        text-shadow: #39c5bb 0 0 10px;
      }
      100% {
        text-shadow: #5636ed 0 0 10px;
      }
    }

    @keyframes light_5px {
      0% {
        text-shadow: #5636ed 0 0 5px;
      }
      12.5% {
        text-shadow: #11ee5e 0 0 5px;
      }
      25% {
        text-shadow: #f14747 0 0 5px;
      }
      37.5% {
        text-shadow: #f1a247 0 0 15px;
      }
      50% {
        text-shadow: #f1ee47 0 0 5px;
      }
      50% {
        text-shadow: #b347f1 0 0 5px;
      }
      62.5% {
        text-shadow: #002afa 0 0 5px;
      }
      75% {
        text-shadow: #ed709b 0 0 5px;
      }
      87.5% {
        text-shadow: #39c5bb 0 0 5px;
      }
      100% {
        text-shadow: #5636ed 0 0 5px;
      }
    }

  2. 刷新页面即可看到效果，默认是夜间模式才开启的，因为白天模式开启霓虹灯会显得很奇怪

    1
    hexo cl; hexo s

5 添加侧边栏电子钟

点击查看教程

详见：给butterfly添加侧边栏电子钟

  1. 如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录[Blogroot]下打开终端，运行以下指令

    1
    npm uninstall hexo-butterfly-clock

  2. 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

    1
    npm install hexo-butterfly-clock-anzhiyu --save

  3. 添加配置信息，以下为写法示例在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # electric_clock
    # see https://anheyu.com/posts/fc18.html
    electric_clock:
      enable: true # 开关
      priority: 5 #过滤器优先权
      enable_page: all # 应用页面
      exclude:
      # - /posts/
      # - /about/
      layout: # 挂载容器类型
        type: class
        name: sticky_layout
        index: 0
      loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
      clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
      clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
      ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
      qweather_key: # 和风天气key
      gaud_map_key: # 高得地图web服务key
      default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
      rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

    其中 qweather_key 和 gaud_map_key 最好自己去申请对应的 api key，默认使用我自己的，可能会被限制，不保证可靠性

申请地址: https://id.qweather.com/#/login

  1. 登录后进入控制台和风天气控制台
  2. 创建应用创建和风天气应用
  3. 填写应用名称和 key 名称随意
  4. 选择 WebApi选择WebApi
  5. 复制 key复制key

申请地址: https://lbs.amap.com/

  1. 登录后进入控制台
  1. 创建应用，名称随意，类型选其他创建应用
  2. 点击添加, key名称随意，服务平台选择Web服务,点击提交Web服务
  3. 复制 key复制key

  1. 参数释义

    参数 备选值/类型 释义
    priority number 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
    enable true/false 【必选】控制开关
    enable_page path/all 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
    exclude path 【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
    layout.type id/class 【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
    layout.name text 【必选】挂载容器名称
    layout.index 0 和正整数 【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
    loading URL 【可选】电子钟加载动画的图片
    clock_css URL 【可选】电子钟样式 CDN 资源
    clock_js URL 【可选】电子钟执行脚本 CDN 资源
    ip_api URL 【可选】获取时钟 IP 的 API
    qweather_key text 【可选】和风天气 key
    gaud_map_key text 【可选】高得地图 web 服务 key
    default_rectangle text 【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
    rectangle text 【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置

6 文章标题小风车转动效果

点击查看教程

详见：文章H1~H6标题小风车转动效果

看本博客效果

  1. 修改主题配置文件_config.butterfly.yml文件的beautify配置项：

    1
    2
    3
    4
    5
    6
    beautify:
      enable: true
      field: post # site/post
      # title-prefix-icon: '\f0c1' 原内容
      title-prefix-icon: '\f863'
      title-prefix-icon-color: "#F47466"

  2. 在[BlogRoot]\source\css\custom.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
    /* 文章页H1-H6图标样式效果 */
    /* 控制风车转动速度 4s那里可以自己调节快慢 */
    h1::before,
    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
      -webkit-animation: ccc 4s linear infinite;
      animation: ccc 4s linear infinite;
    }
    /* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
    @-webkit-keyframes ccc {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
      }
    }
    @keyframes ccc {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
      }
    }
    /* 设置风车颜色 */
    #content-inner.layout h1::before {
      color: #ef50a8;
      margin-left: -1.55rem;
      font-size: 1.3rem;
      margin-top: -0.23rem;
    }
    #content-inner.layout h2::before {
      color: #fb7061;
      margin-left: -1.35rem;
      font-size: 1.1rem;
      margin-top: -0.12rem;
    }
    #content-inner.layout h3::before {
      color: #ffbf00;
      margin-left: -1.22rem;
      font-size: 0.95rem;
      margin-top: -0.09rem;
    }
    #content-inner.layout h4::before {
      color: #a9e000;
      margin-left: -1.05rem;
      font-size: 0.8rem;
      margin-top: -0.09rem;
    }
    #content-inner.layout h5::before {
      color: #57c850;
      margin-left: -0.9rem;
      font-size: 0.7rem;
      margin-top: 0rem;
    }
    #content-inner.layout h6::before {
      color: #5ec1e0;
      margin-left: -0.9rem;
      font-size: 0.66rem;
      margin-top: 0rem;
    }
    /* s设置风车hover动效 6s那里可以自己调节快慢*/
    #content-inner.layout h1:hover,
    #content-inner.layout h2:hover,
    #content-inner.layout h3:hover,
    #content-inner.layout h4:hover,
    #content-inner.layout h5:hover,
    #content-inner.layout h6:hover {
      color: var(--theme-color);
    }
    #content-inner.layout h1:hover::before,
    #content-inner.layout h2:hover::before,
    #content-inner.layout h3:hover::before,
    #content-inner.layout h4:hover::before,
    #content-inner.layout h5:hover::before,
    #content-inner.layout h6:hover::before {
      color: var(--theme-color);
      -webkit-animation: ccc 6s linear infinite;
      animation: ccc 6s linear infinite;
    }

  3. 在主题配置文件_config.butterfly.yml的inject配置项进行引入（不再赘述）。

7 分享链接按钮

点击查看教程

详见：分享链接按钮

注意：分享按钮提醒依赖Vue弹窗和防抖计时器，请完成前面的前置教程！点击直达

  1. 引入ClipboardJS依赖：在主题配置文件[BlogRoot]\_config.butterfly.yml中

    1
    2
    3
    inject:
      bottom:
    +    - <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

  2. 添加分享按钮，在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    +      when 'share'
    +        button.share(type="button" title='分享链接' onclick="share()")
    +          i.fas.fa-share-nodes

    #rightside
      - const { enable, hide, show } = theme.rightside_item_order
      - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode']
    -  - const showArray = enable ? show && show.split(',') : ['chat','comment','hideAside','toc']
    +  - const showArray = enable ? show && show.split(',') : ['chat','share','comment','hideAside','toc']

  3. 新建文件[BlogRoot]\source\js\share.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
    // 分享本页
    function share_() {
        let url = window.location.origin + window.location.pathname
        try {
            // 截取标题
            var title = document.title;
            var subTitle = title.endsWith("| Fomalhaut🥝") ? title.substring(0, title.length - 14) : title;
            navigator.clipboard.writeText('Fomalhaut🥝的站内分享\n标题：' + subTitle + '\n链接：' + url + '\n欢迎来访！🍭🍭🍭');
            new Vue({
                data: function () {
                    this.$notify({
                        title: "成功复制分享信息🎉",
                        message: "您现在可以通过粘贴直接跟小伙伴分享了！",
                        position: 'top-left',
                        offset: 50,
                        showClose: true,
                        type: "success",
                        duration: 5000
                    });
                    // return { visible: false }
                }
            })
        } catch (err) {
            console.error('复制失败！', err);
        }
        // new ClipboardJS(".share", { text: function () { return '标题：' + document.title + '\n链接：' + url } });
        // btf.snackbarShow("本页链接已复制到剪切板，快去分享吧~")
    }

    // 防抖
    function share() {
        debounce(share_, 300);
    }

    这里我的页面名字截取了后面的重复段，你要截取的话就将| Fomalhaut🥝换成| 你的网站名字，或者保留也行，就是直接复制！

  4. 在主题配置文件[BlogRoot]\_config.butterfly.yml中引入该js文件

    1
    2
    3
    inject:
      bottom:
    +    - <script src="/js/share.js"></script>

  5. 清理并重启项目即可看到变更

    1
    hexo cl; hexo s

8 Hexo自定义字体

点击查看教程

详见本博客文章：【Hexo】自定义字体

9 博客一图流

点击查看教程

详见本博客文章：【Hexo】博客一图流

10 文章置顶滚动栏

点击查看教程

详见本博客文章：【Hexo】文章置顶滚动栏