【Hexo】02-Next主题配置

发表于 更新于 阅读次数： Changyan： 本文字数： 7.7k 阅读时长 ≈ 7 分钟

img-53

Next主题配置

NexT的配置文件/theme/next/_config.yml

主题配置官网https://theme-next.js.org/pisces/docs/theme-settings/

Scheme：修改主题格式

scheme提供了四种主题格式，这里选择使用Pisces

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

hexo s -p 80启动服务

img-15

菜单配置

  1. 添加其他菜单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------

    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

    # Enable/Disable menu icons.
    menu_icons:
      enable: true

  2. 新建这些about、tags、archives页面，页面名称要与上方的link相同。

    指令hexo new page <name>会自动创建name文件夹与index.md文件

    1
    2
    3
    hexo new page about
    hexo new page tags
    hexo new page archives

img-16

文件夹如下

img-17

标签页(tags)、关于页(about)修改

需要在about、tags、archives相应的文件夹下添加type: <name>

以about为例。其他不再展示

img-18

测试。点击菜单栏，页面正常展示。菜单配置完成

img-19

自定义菜单

该主题提供了一些菜单可以选择，如果想自定义菜单，需要在blog的国际化配置中，添加菜单的中英文配置。

我配置others菜单，中文其他

  1. 新增菜单，名称为others

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
      others: /others/ ||

  2. 新增others页面

    hexo new page others

    img-20

  3. 在/themes/next/languages/zh_CN.yml中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益404
      others: 其他

    img-21

  4. localhost:80。配置生效

    img-22

图片配置（头像等）

  1. 选择16*16、32*32图片两张，存放到\themes\next\sources\images路径下

    img-23

  2. 修改next主题配置文件\themes\_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # 页面相关图片配置
    favicon:
      small: /images/logo-16.jpg
      medium: /images/logo-32.jpg
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg
      #android_manifest: /images/manifest.json
      #ms_browserconfig: /images/browserconfig.xml
      
    # 头像配置
    # Sidebar Avatar
    avatar:
      # Replace the default image and set the url here.
      url: /images/avatar.jpg
      # 圆形
      rounded: true
      # 旋转
      rotated: true

    img-24

右上角GitHub Corners

右上角添加github图标。也可以放置左上角

img-25

  1. 修改_config.next.yml文件。

    1
    2
    3
    4
    5
    6

    # `Follow me on GitHub` banner in the top-right corner.
       github_banner:
         enable: true
         permalink: https://github.com/zsqbigbig
         title: Follow me on GitHub

    img-26

    img-27

页面样式设置

页面透明度

页面透明度，需要设置三块：内容、菜单、目录

内容：themes\next\source\css\_schemes\Pisces\index.styl

菜单：themes\next\source\css\_schemes\Pisces\_layout.styl

目录：themes\next\source\css\_schemes\Pisces\_sidebar.styl

img-47

  • 内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .main-inner {
      /*background: var(--content-bg-color);*/
      background: rgba(255,255,255,0.5);
      box-shadow: $box-shadow-inner;
      padding: $content-desktop-padding;

      +tablet-mobile() {
        padding: 20px;
      }
    }

    img-48

  • 菜单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .header-inner {
      /*background: var(--content-bg-color);*/
    background: rgba(255,255,255,0.5);
      border-radius: $border-radius-inner;
      box-shadow: $box-shadow-inner;
      width: $sidebar-desktop;

      +tablet-mobile() {
        border-radius: initial;
        width: auto;
      }
    }

    img-49

  • 目录

    1
    2
    3
    4
    5
    6
    7
    8
    .sidebar-inner {
      /*background: var(--content-bg-color);*/
      background: rgba(255,255,255,0.5);
      border-radius: $border-radius;
      box-shadow: $box-shadow;
      box-sizing: border-box;
      color: var(--text-color);
    }

页面内容边框阴影

  1. themes\next\source\css\_schemes\Pisces\index.styl

    在文章末尾添加代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /**
     * 主页概览及文章边框阴影
     */
    .post {
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }

页面动态背景

  1. /themes/next/layout/_layout.njk

    1
    2
    3
    4
    <!-- 动态背景 -->
     {% if theme.canvas_nest %}
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
     {% endif %}

    img-29

  2. /_config.next.yml

    结尾添加代码

    1
    2
    3
    4
    5
    6
    # --------------------------------------------------------------
    # background settings
    # --------------------------------------------------------------
    # add canvas-nest effect
    # see detail from https://github.com/hustcc/canvas-nest.js
    canvas_nest: true

配置结果

img-30

文章配置

文章末尾添加结束语

  1. \themes\next\layout\_macro\passage-end-tag.njk，需要新建passage-end-tag.njk该文件

    1
    2
    3
    4
    5
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
        {% endif %}
    </div>

  2. themes\next\layout\_macro\post.swig，在<footer class="post-footer">之前加上如下代码：

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

    img-34

结果如图：

img-31

访问量统计

1
2
3
4
5
6
7
8
9
10
11
# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # 开启访问量统计
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

img-32

结果如图：

img-33

文章字数统计

  1. npm install hexo-word-counter安装依赖

    img-63

  2. hexo clean清除缓存文件

  3. _config.next.yml修改配置文件

    1
    2
    3
    4
    5
    6
    7
    # Post wordcount display settings
    # Dependencies: https://github.com/next-theme/hexo-word-counter
    symbols_count_time:
      # true-文章时间、字数统计换行显示；false-文章时间、字数统计单行显示
      separated_meta: false
      # false-其用文字描述；true-关闭文字描述
      item_text_total: false

  4. img-64

文章末尾标签图标

img-65

_config.next.yml修改配置

1
2
3
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
# true-启用文章末尾的标签图标；false-禁用文章末尾的标签图标
tag_icon: true

img-66

文章打赏

  1. 将支付宝、微信的二维码保存至/themes/next/source/images/路径下

    img-67

  2. _config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Donate (Sponsor) settings
    # Front-matter variable (nonsupport animation).
    # 每篇文章的下方，显示赞赏按钮
    reward_settings:
      # If true, a donate button will be displayed in every article by default.
      # true-启用；false-金庸
      enable: true
      # true-动态；false-静态
      animation: false
      # 文字配置
      comment: Buy me a coffee

    # 二维码路径配置
    reward:
      wechatpay: /images/pay-wechat.png
      alipay: /images/pay-ali.jpg
      #paypal: /images/paypal.png
      #bitcoin: /images/bitcoin.png

  3. 结果如图

    img-68

关注其他渠道

  1. _config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Subscribe through Telegram Channel, Twitter, etc.
    # Usage: `Key: permalink || icon` (Font Awesome)
    follow_me:
      Github: https://www.github.com/zsqbigbig || fab fa-github
      Weibo: https://weibo.com/u/******* || fab fa-weibo
      #Twitter: https://twitter.com/username || fab fa-twitter
      #Telegram: https://t.me/channel_name || fab fa-telegram
      WeChat: /images/wechet_qrcode.jpg || fab fa-weixin
      #RSS: /atom.xml || fa fa-rss

  2. 保存结果

    img-69

热门文章

  1. npm install hexo-related-popular-posts

    img-70

  2. hexo clean

  3. _config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Related popular posts
    # Dependencies: https://github.com/tea3/hexo-related-popular-posts
    # 热门文章
    related_posts:
      enable: true
      title: # Custom header, leave empty to use the default one
      display_in_home: true
      params:
        # 文章数量上限
        maxCount: 5
        # 热门帖子、相关帖子混合比例
        #PPMixingRate: 0.0
        # true-显示日期
        #isDate: false
        # true-显示图片
        #isImage: false
        # true-显示文章摘要
        #isExcerpt: false

  4. 结果如图

    img-71

添加宠物

  1. npm install -save hexo-helper-live2d

    img-51

  2. /themes/_config.next.yml添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 宠物
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      model:
        use: live2d-widget-model-wanko
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

  3. 更多宠物查看文档https://github.com/EYHN/hexo-helper-live2d/blob/HEAD/README.zh-CN.md

img-52

代码样式设置

初始代码样式：

``和```中包含的代码样式

img-61

_config.next.yml修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    # 代码样式设置
    # \node_modules\highlight.js\styles：该路径下选择样式文件
    light: atelier-heath-light
    dark: tomorrow-night
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Available values: default | flat | mac
    style:

img-62

修改文章快速部署

仅修改文章时，快速部署即时在页面中看到修改的内容

还没搞懂，后面搞…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..

404页面

该功能部署后生效

  1. _config.yml

    1
    2
    # 关闭相对路径链接
    relative_link: false

  2. hexo new page 404新建页面

    img-72

  3. /source/404/index.md

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 404
    date: 2021-11-05 01:13:16
    comments: false
    ---
    <script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
      charset="utf-8" homePageUrl="/" homePageName="Back to home">
    </script>

    img-73

  4. 结果如图

-------------本文结束感谢您的阅读-------------
相关文章