Hexo Next主题添加萌备案

发表于
版本：Hexo 7.3.0（Next 8.21.1）

本套方案进一步增强了可读性，减少对源代码的破坏。

开启自定义样式

  1. 打开站点的_config.yml文件，解除以下两行的注释：

    _config.yml
    1
    2
    3
    custom_file_path:
        style: source/_data/styles.styl # 用于给萌备案的链接加一个小图标，可选项
        footer: source/_data/footer.njk # 用于添加萌备案的链接，必选项

  2. 创建source/_data/文件夹（注意有下划线），在文件夹内创建styles.styl和footer.njk。

激活图标样式（可选项）

  1. 打开styles.styl，增加以下代码：
    styles.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 萌备案图标 */
    /* 以下代码就是从源代码拷贝的，只改了个判断 */
    if (hexo-config('footer.moeicp.enable') and hexo-config('footer.moeicp.moeicon')) {
      .beian img {
        display: inline-block;
        margin: 0 3px;
        vertical-align: middle;
      }
      .beian a {
        color: #ffffff;
      }
    }
    /* 萌备案图标 END */

    注意：如果已经添加了工信部的备案，不用加这段代码。

新增页脚萌备案链接

  1. 打开footer.njk，增加以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    {%- if theme.footer.moeicp.enable %}
      <div class="beian">
        {%- if theme.footer.moeicp.moeicon %}
            <img src="{{ url_for(theme.footer.moeicp.moeicon) }}" alt="{{ '萌备案' + theme.footer.moeicp.number + '号' }}">
        {%- endif %}
            {{- next_url('https://icp.gov.moe/?keyword=' + theme.footer.moeicp.number, "萌ICP备" + theme.footer.moeicp.number + "号") }}
      </div>
    {%- endif %}

新增站点配置下的属性

  1. 打开站点的_config.yml文件，在footer属性下添加以下子属性：

    _config.yml
    1
    2
    3
    4
    5
    6
    footer:
      # 萌备案
      moeicp:
        enable: true # 是否开启萌备案页脚
        number: 20250777 # 你的萌备案号
        moeicon: /images/moeicon.png # 萌备案图标路径

  2. 完成。