Loading...
墨滴

monkeylzl

2021/10/06  阅读:45  主题:默认主题

Hexo 中 Next 主题设置

注意:由于微信公众号「涌动的生命力」不能引用外链,外链详见参考文献部分

Hexo中有很多主题,可以在官网 Hexo主题中查找选择自己喜欢的主题,我最终选择的是 Next,主要是因为简洁且网上的教程也比较多,这里记录下我博客的 Next 主题配置,效果详见我的博客

更换主题

Hexo 中默认的主题是 landscape,现在更换为 Next

Next 官方文档:

Next 0.1.0-5.4.1版本

NexT 6.0.0-8.8.0版本

Next主题 github tags note:

0.1.0-5.4.1版本

6.0.0-7.8.0版本

8.0.0-8.8.0版本

配置 Hexo 主题

  • 根据上面的版本,下载一个即可,我目前使用的是7.8.0版本
  • 将下载好的主题添加到你的博客根目录下 themes 文件夹中,其中可以看到有默认的主题 landscape
  • 修改博客根目录下_config.yml文件中的theme
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: next-7.8.0

配置 Next 主题

修改个人信息

修改博客根目录下_config.yml文件中的 site 相关信息

# Site
title: Monkeylzl's World
subtitle: '
'
description: 经历一个过程然后成为更好的自己
keywords:
author: monkeylzl
#language: en
language: zh-CN
timezone: Asia/Shanghai

修改 next 的主题风格

next 一共提供了四种主题风格,可以分别切换,通过hexo s预览一下效果

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

修改菜单栏

修改配置

修改 next 主题文件夹下的_config.yml文件

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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 / item badges.
menu_settings:
  icons: true # 是否显示各个页面的图标
  badges: true # 是否显示分类/标签/归档页的内容量

解决Next主题 Cannot GET /tags/ 问题

  • 增加了新的 menu,但是点击之后显示Cannot GET /tags/
hexo new page "tags"
  • 执行命令后,在根目录下的source下会出现tags文件下,修改 tag 文件夹下的index.md,增加type: "tags"
  • 如果你的博客已经增加了评论系统,由于评论系统默认是打开的,所以这里要屏蔽下,所以增加 comments: false
  • 示例
---
title: tags
type"tags"
date: 2021-10-04 17:31:26
comments: false
---

如何自定义Menu

  • 待研究

增加本地搜索功能

  • 安装插件
npm install hexo-generator-searchdb --save
  • 修改博客根目录下_config.yml文件,增加 search
# Search
search:
path: search.xml # 支持json和xml,可自行设定,索引文件的路径,相对于站点根目录
field: post # 搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
format: html
limit: 10000 # 限制搜索的条目数
  • 修改 next 主题文件夹下的_config.yml文件
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enabletrue
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

增加阅读全文功能

  • 修改 next 主题文件夹下的_config.yml文件
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true
  • 配置完后,由于next 7.6 版本以后删除自动摘要功能,需要我们手动设置,方法主要有
    • 为每个博客写好 description
    ---
    title: Hexo 中 Next 主题(持续更新...)
    date: 2021-10-04 20:52:01
    tags: 博客搭建
    categories: 技术
    description: xxxx
    ---
    • 在博客中间手动添加<!-- more -->以截断,推荐该方法

增加评论系统

选择评论系统

next 支持的评论系统,详见next 主题文件夹下的_config.yml文件,我选择的是 valine

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: valine
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

配置 valine

Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

  • 注册 LeanCloud 账号,直接点击主页右侧控制台注册账号
  • 进入控制台后点击左下角创建应用,选择免费的「开发版」,也可以了解下「计价方案」
  • 创建完应用,点击应用卡片中的设置图标,在左侧菜单栏中点击「应用凭证」,可以看到自己的 AppID,Appkey
  • 选择安全中心,可以选择自己的「服务开关」,然后在 Web 安全域名中添加自己博客的域名「https://monkeylzl.github.io/」
  • 修改 next 主题文件夹下的_config.yml文件
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enabletrue
  appid: xx # Your leancloud application appid
  appkey: xx # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 有什么问题,欢迎留言指正与交流... # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-CN # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0
  • 查看评论数据,通过点击自己创建的卡片应用的第一个图标「数据存储」中的 Comment 查看

目录设置

  • 修改 next 主题文件夹下的_config.yml文件
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enabletrue
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6
  • next 7.8.0 版本 toc 中包含中文导致无法点击跳转问题 该问题官方已经FIX,详见官方修改

修改 source/js/utils.js 文件,如下:

registerSidebarTOC: function() {
    const navItems = document.querySelectorAll('.post-toc li');
    const sections = [...navItems].map(element => {
      var link = element.querySelector('a.nav-link');
      var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#'''));
      // TOC item animation navigate.
      link.addEventListener('click', event => {
        event.preventDefault();
        //var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#'''));
        var offset = target.getBoundingClientRect().top + window.scrollY;
        window.anime({
          targets  : document.scrollingElement,
          duration : 500,
          easing   : 'linear',
          scrollTop: offset + 10
        });
      });
      //return document.getElementById(link.getAttribute('href').replace('#'''));
      return target;
    });

代码风格设置

修改 next 主题文件夹下的_config.yml文件

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  #highlight_theme: normal
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enabletrue
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

切换暗黑模式

  • Next 7.x 使用 hexo-next-darkmode 插件自动添加可切换的暗黑模式,教程
  • 安装
npm install hexo-next-darkmode --save
  • 配置 修改 next 主题文件夹下的_config.yml文件,必须确保 NexT 原生的 darkmode 选项设置为 false,isActivated: true:默认激活暗黑/夜间模式,请始终与 saveInCookies: false、autoMatchOsTheme: false 一起使用
# close NexT's darkmode
darkmode: false

# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enabletrue
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

增加版权信息

修改 next 主题文件夹下的_config.yml文件

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

增加文章结束语

  • 修改修改 next 主题文件夹下的layout/_macro/post.swig 文件,在文章结束 END POST BODY 位置增加
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
            ------------- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读-------------
     </div>
    {% endif %}
</div>

订阅微信公众号

修改 next 主题文件夹下的_config.yml文件

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  WeChat: /images/wechat_channel.jpg || wechat
  #RSS: /atom.xml || rss

右上角增加GitHub

修改 next 主题文件夹下的_config.yml文件

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

返回顶部功能

修改 next 主题文件夹下的_config.yml文件,默认显示了阅读进度

back2top:
  enabletrue
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

设置头像

修改 next 主题文件夹下的_config.yml文件,默认显示了阅读进度

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: images/avatar.png #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

字数统计和阅读时长

  • 安装插件
npm install hexo-symbols-count-time --save
  • 修改 next 主题文件夹下的_config.yml文件
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true  #分隔线
  item_text_post: true  #文章中的显示是否显示文本
  item_text_total: true       #网页底部的显示是否显示文本
  awl: 2 #平均每个字符的长度
  wpm: 275 # 设定每分钟可阅读的字符数
  symbols: true #是否统计字数
  time: true #是否统计阅读时长
  total_symbols: true #是否统计总字数
  total_time: true #是否统计总阅读时长

添加音乐

  • 登陆网页版网易云音乐,然后找到自己喜欢的歌,点击歌曲下面的「生成外链播放器」
  • 修改 next 主题下 layout/_macro/sidebar.swig 文件,在<div class="sidebar-inner">中添加
<div id="music">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=28285910&auto=1&height=66"></iframe>
</div>
  • TODO APlayer 悬浮左下角音乐 Button 样式

社交链接

修改 next 主题文件夹下的_config.yml文件

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/monkeylzl || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

添加阅读次数,访问量等

修改 next 主题文件夹下的_config.yml文件

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enabletrue
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

参考文献

  1. Hexo主题 : https://hexo.io/themes/
  2. monkeylzl 效果博客 : https://monkeylzl.github.io/
  3. Next 0.1.0-5.4.1版本 : https://theme-next.iissnan.com/getting-started.html)
  4. NexT 6.0.0-8.8.0版本 : https://theme-next.js.org/
  5. 0.1.0-5.4.1版本 : https://github.com/iissnan/hexo-theme-next/tags
  6. 6.0.0-7.8.0版本 : https://github.com/theme-next/hexo-theme-next/tags
  7. 8.0.0-8.8.0版本 : https://github.com/next-theme/hexo-theme-next/tags
  8. valine : https://valine.js.org/
  9. LeanCloud : https://www.leancloud.cn/
  10. hexo-next-darkmode : https://github.com/rqh656418510/hexo-next-darkmode

monkeylzl

2021/10/06  阅读:45  主题:默认主题

作者介绍

monkeylzl