devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Next 主题配置_next主题

作者：IT小白 | 2024-05-28 07:19:38

赞

踩

next主题

        当前用得最多的是next主题，那为什么用得多呢？当然是符合大多数人的审美。我使用的是next(v7.8.0)，下载地址：theme-next/hexo-theme-next

1 基本设置

1.1 主题设置

        打开博客根目录 Blog 文件夹，右键 Git Bash，输入如下代码将next主题下载到目录 Blog/themes：

git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 1

        打开根目录下的 _config.yml(称为站点配置文件)，修改主题（注意冒号后都要有空格）：

# Site
title: CarpeDiem's Blog         # 标题
subtitle: '虽不能至，心向往之'
description: '不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之。'       # 简介或格言
keywords: "Python, Linux, Java, 算法, 人工智能"
author: Carpe Diem     # 作者
language: zh-CN           # 主题语言 en/zh-CN
timezone: Asia/Shanghai           # 中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-bamboo          # 主体修改为 next

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

        主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans：

        next主题有四种，如下图依次为Muse、Mist、Pisces、Gemini（你可以每个设置一遍，确定一个喜欢的），这里选的是Gemini，打开目录 Blog/themes/next/ 下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini          # 选择的主题

  • 1
  • 2
  • 3
  • 4
  • 5

        温馨提示：注意区分 根目录 Blog 下的 _config.yml 和 Blog/themes/next/ 下的_config.yml，搞混就找不到相应的配置

        回到根目录打开 Git Bash，输入如下三条命令：

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

  • 1
  • 2
  • 3

1.2 设置菜单

        打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：

menu:
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  resources: /resources/ || download   #资源
  # schedule: /schedule/ || calendar    #日历
  # sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取
  # commonweal: /404/ || heartbeat      #腾讯公益404

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

        “||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网 这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources 是我自己添加的。

        新添加的菜单需要翻译对应的中文，打开 theme/next/languages/zh-CN.yml，在 menu 下设置：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  resources: 资源
  search: 搜索

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

        在根目录下打开 Git Bash，输入如下代码：

hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"

  • 1
  • 2
  • 3
  • 4

        此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个 index.md 文件，修改内容分别如下：

---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---

---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---

---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---

---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---

  • 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

        注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段 comments 并将值设置为false。

1.3 设置建站时间

        打开主题配置文件即 themes/next 下的_config.yml，查找since：

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2023-06      # 建站时间

  • 1
  • 2
  • 3

1.4 设置头像

        打开主题配置文件即 themes/next 下的 _config.yml，查找avatar，url后是图片的链接地址：

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif   #图片的位置，也可以是http://xxx.com/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true   #头像展示在圈里
  # If true, the avatar will be rotated with the cursor.
  rotated: false  #头像随光标旋转

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

1.5 网站图标设置

        我是在这个网站找的图标，免费的图标素材网站：Easyicon

        下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.6 设置动态背景

1. canvas nest 风格

        在themes/next目录下打开Git Bash，输入：

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

  • 1

        打开主题配置文件即 themes/next 下的 _config.yml，找到 canvas-nest，将enable：false 改为true：（如果找不到 canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到 themes/next 中）

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2. JavaScript 3D library风格

        在themes/next目录下打开Git Bash，输入：

git clone https://github.com/theme-next/theme-next-three source/lib/three

  • 1

        打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了，我已经选了canvas-nest，就没有选这种风格：

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.7 添加顶部加载条

        在themes/next目录下打开Git Bash，输入：

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

  • 1

        打开主题配置文件即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：

pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

1.8 设置侧边栏显示效果

        打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

1.9 侧边栏推荐阅读

        打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

# Blog rolls
links_settings:
  icon: fa fa-link
  title: 推荐网站          # 修改名称
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com
  菜鸟教程: https://www.runoob.com/
  C语言中文网: http://c.biancheng.net/sitemap/
  CS自学指南: https://csdiy.wiki/
  Road To Coding: https://www.r2coding.com/#/
  计算机专业学习路线: https://hackway.org/docs/cs/intro
  鱼C论坛: https://fishc.com.cn

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

1.10 添加社交链接

        打开主题配置文件即themes/next下的_config.yml，搜索social：

# 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/molimi || fab fa-github
  E-Mail: mailto:qxie8888@gmail.com || fa fa-envelope
  CSDN: https://blog.csdn.net/xq151750111 || fa fa-codiepie

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

        “||”前面的是链接，后面的是 FontAwesome 图标名称。

1.11 设置博文内链接为蓝色

        打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：

.post-body p a{
     color: #0593d3;
     border-bottom: none;
     &:hover {
       color: #0477ab;
       text-decoration: underline;
     }
   }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

1.12 显示文章字数和阅读时长

        从根目录Blog打开Git Bash，执行下面的命令，安装插件：

npm install hexo-wordcount --save

  • 1

        然后打开站点配置文件，在文件末尾加上下面的代码：

symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

1.13 文章末尾添加版权说明

        查找主题配置文件themes/next/_config.yml中的creative_commons：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

  • 1
  • 2
  • 3
  • 4
  • 5

1.14 添加评论

        针对 Hexo 静态博客的 nexT主题 继承了多种评论系统，此处介绍两种相对好用的评论系统： Valine、Gitment 和 Utterances 。

1. Valine 评论系统

        Valine 评论系统，此款系统不需要登录，无后端，nexT 主题最新也已经支持安装。

        因为 Valine 是基于 LeanCloud 系统的，所以先在 LeanCloud 中注册账号，LeanCloud官网：https://console.leancloud.cn/login，注册登陆后，访问控制台，创建应用，选择开发版，确定创建，如下图

        创建成功，生成了 AppID 和 AppKey，在控制台—应用凭证 查看，如下图

        在主题的配置文件_config.yml中，修改关于 valine 的配置，如下图

        上述设置仅作参考！最后，重新部署即可。

2. Gitment 评论系统

        Gitment 评论系统是基于 Github 开发的，是依靠 GitHub Issues 的评论系统，Next 主题最新也已经支持安装。

        安装前提：更新 Next 主题（5.1.2 主题及以上）

1. 注册 OAuth application

  1. 在 github 中进行注册，进入 https://github.com/settings/profile
  2. 点击左侧 Developer settings
  3. 点击左侧Oauth Apps
  4. 点击 Register a new application

        注册完成之后，得到：Client ID 和 Client Secret

2. 新建存放博客评论仓库

        在 github 中建一个项目，专门用来存储你的博客评论

3. 配置 nexT 主题文件

        编辑主题配置文件：themes\ next主题 \ _config.yml，找到有关 gitment 的设置，如下

gitment:   
  enable:  true
  mint: true  
  count: true 
  lazy: false  						#评论懒加载，如果true，则默认不展示评论，点击按钮查看评论
  cleanly: false  	
  language: 		
  github_user: 						#github名称
  github_repo: BlogComments			#上一步新建存放评论的仓库名
  client_id: b8bad0exxxx			#上面注册 OAuth Application 的 Client ID
  client_secret: bcee560xxxxxx		#上面注册 OAuth Application 申请的 Client Secret
  proxy_gateway: 
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4. 初始化

        在设置完成后，Hexo重新部署。每篇文章都要点击初始化评论按钮。

5. 管理

        评论显示在新建存放评论的仓库中的 issue 中。

6. 关闭

        可以单独关闭某个页面的评论，在页面的 Front-matter 中添加 comments 字段，设为 false。比如标签页不想要评论，则在标签页面中做如下设置

---
title: xxxxxxxxx
date: 2023-06-06 17:05:24
type: "tags"
comments: false
---

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3. Utterances 评论系统

        这里主要介绍基于 Github Issues 的轻量级博客评论系统 Utterances。主要介绍 Utterances 的配置与使用

        Utterances是一个基于Github Issues的轻量级评论系统，可用于博客、Wiki等。它具有以下优点：

  • 开源
  • 不追踪，无广告，始终免费
  • 所有的数据都存储在Github Issues
  • 样式基于Github的Primer设计语言
  • 夜间模式
  • 轻量级；原生TypeScript；在“常青树”浏览器上不使用网络字体，JavaScript框架或Polyfill。

快速上手

  1. 在 GitHub 上新建一个公开仓库（Repository），安装 Utterances GitHub App 至该仓库。
  2. 在你的网页需要插入 Utterances 评论的位置，粘贴以下代码（username，reponame 分别修改为你的 GitHub 用户名，仓库名）。
 <script src="https://utteranc.es/client.js"
         repo="username/reponame"
         issue-term="pathname"
         theme="github-light"
         crossorigin="anonymous"
         async>
 </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  1. 刷新网页就可以看到Utterances评论框了。

        了解更多配置，请移步——自托管Utterances教程：基于Github Issues的轻量级博客评论系统

1.15 修改永久链接的默认格式

        如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。

        在 Hexo 根目录下的 _config.yml 文件采用初始设置。这里因为用“年月日”会让文章链接的层次太深，所以我用"article"代替：

# permalink: :year/:month/:day/:title/
permalink: article/:title.html
permalink_defaults:

  • 1
  • 2
  • 3

        生成的文章链接就是 (标题为“我的个人博客”)：https://[你的网站域名]/article/我的个人博客.html

        链接中出现中文显然不太好，所以下面给出三种替代中的方法。

1. 安装插件方法一（推荐）

        在 Hexo 根目录下使用 git bash 执行命令：

npm install hexo-abbrlink --save

  • 1

        在 Hexo 根目录下的 _config.yml 文件，修改为如下配置：

# permalink: :year/:month/:day/:title/
# permalink: article/:title/
permalink: article/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

        然后在 git bash 按顺序运行如下命令：

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

  • 1
  • 2
  • 3

        再打开网站的文件就可以看到效果————https://[你的网站域名]/article/60762.html（其中60762就是随机生成的）

2. 安装插件方法二

        中文链接转拼音，在 Hexo 根目录下使用 git bash 执行命令：

npm i hexo-permalink-pinyin --save

  • 1

        在 Hexo 根目录下的 _config.yml 文件中，修改以下的配置项：

permalink: article/:title.html
permalink_pinyin:
  enable: true
  separator: '-'    # default: '-'
permalink_defaults:

  • 1
  • 2
  • 3
  • 4
  • 5

        然后在 git bash 按顺序运行如下命令：

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

  • 1
  • 2
  • 3

        再打开网站的文件就可以看到效果。https://[你的网站域名]/article/wo-de-ge-ren-bo-ke.html（标题为“我的个人博客”）

3. 采用urlname

        在写每篇md文章的时候，在 Front-matter 里加上urlname：

---
title: Next 主题介绍
date: 2023-06-06 15:31:11
urlname: 2023060601
---

  • 1
  • 2
  • 3
  • 4
  • 5

        在 Hexo 根目录下的 _config.yml 文件中，修改以下的配置项：

permalink: article/:urlname.html  # urlname值文章里必须填写，格式2023060601
permalink_defaults:

  • 1
  • 2

        然后在 git bash 按顺序运行如下命令：

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

  • 1
  • 2
  • 3

        再打开网站的文件就可以看到效果。https://[你的网站域名]/article/2023060601.html

小结

        第一种方法是我试过中最好的；第三次之，因为每次都要手动加上urlname；而第二种，当文章的中文标题名字过长时，效果并不好。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/636212
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号