Next 主题配置

news2024/11/7 7:45:42

        当前用得最多的是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

        打开根目录下的 _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

        主题语言主要是看你的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          # 选择的主题

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

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

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

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

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

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

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

        在根目录下打开 Git Bash,输入如下代码:

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

        此时在根目录的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
---

        注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段 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.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.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.6 设置动态背景

1. canvas nest 风格

        在themes/next目录下打开Git Bash,输入:

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

        打开主题配置文件即 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

2. JavaScript 3D library风格

        在themes/next目录下打开Git Bash,输入:

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

        打开主题配置文件即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.7 添加顶部加载条

        在themes/next目录下打开Git Bash,输入:

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

        打开主题配置文件即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.8 设置侧边栏显示效果

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

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

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

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.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

        “||”前面的是链接,后面的是 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.12 显示文章字数和阅读时长

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

npm install hexo-wordcount --save

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

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

1.13 文章末尾添加版权说明

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

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

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

4. 初始化

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

5. 管理

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

6. 关闭

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

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

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. 刷新网页就可以看到Utterances评论框了。

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

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

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

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

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

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

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

1. 安装插件方法一(推荐)

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

npm install hexo-abbrlink --save

        在 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:

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

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

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

2. 安装插件方法二

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

npm i hexo-permalink-pinyin --save

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

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

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

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

        再打开网站的文件就可以看到效果。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
---

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

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

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

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

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

小结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

制作投票链接怎么做微信上投票连接怎么样做投票链接

关于微信投票&#xff0c;我们现在用的最多的就是小程序投票&#xff0c;今天的网络投票&#xff0c;在这里会教大家如何用“活动星投票”小程序来进行投票。 我们现在要以“小手绘盛夏”为主题进行一次投票活动&#xff0c;我们可以在在微信小程序搜索&#xff0c;“活动星投票…

RuoYi-Cloud本地运行

启动nacos bin目录打开cmd&#xff0c;输入startup.cmd -m standalone&#xff0c;单机模式启动 http://localhost:8848/nacos/ 用户名密码都是nacos 启动redis 在 D:\Redis-x64-3.2.100 目录下 按shift鼠标右键&#xff0c;打开powerShell&#xff0c;输入 .\redis-server…

2023最新版本Activiti7系列-流程变量

流程变量 流程变量可以用将数据添加到流程的运行时状态中&#xff0c;或者更具体地说&#xff0c;变量作用域中。改变实体的各种API可以用来更新这些附加的变量。一般来说&#xff0c;一个变量由一个名称和一个值组成。名称用于在整个流程中识别变量。例如&#xff0c;如果一个…

在 Android 上恢复已删除的通话记录 - 安卓手机通话记录恢复技巧

有时&#xff0c;Android 用户会在内存空间用完时删除他们的通话记录。他们认为那些电话通话记录将不再需要了&#xff0c;但突然出于某些原因他们需要恢复那些已删除的通话记录。 恢复已删除的照片、视频、音乐、短信和通话记录等数据在以前是一件很难的事情。但是现在如果你…

# 蓝牙音频相关知识

蓝牙音频相关知识 文章目录 蓝牙音频相关知识1 音频源2 蓝牙音频编解码器3 一些标准4 蓝牙音频其他相关知识4.1 蓝牙版本4.2 ANC&#xff08;主动降噪&#xff09;4.3 音响相关参数4.4 音质评价4.5 HI-Fi声音特点4.6 耳机线材4.7 耳机分类4.8 IP防尘防水等级4.9 噪音与量化噪音…

如何用Python语言调取百度翻译的API

诸神缄默不语-个人CSDN博文目录 本文介绍如何用Python语言调用百度翻译的API服务。 理论上类似的写法也可以应用于其他语言。 http://api.fanyi.baidu.com/manage/developer可以注册开发者&#xff0c;或者APP ID和秘钥&#xff1b;然后还可以进行开发者认证&#xff0c;获得…

ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

一、XML&#xff08;可扩展标记语言&#xff09; XML与HTML类似&#xff0c;不同的是HTML中都是预定义标签&#xff0c;而XML中没有预定义标签&#xff0c;全都是自定义标签&#xff0c;用来表示一些数据。 比如有一个学生数据&#xff1a;name“孙悟空”;age18;gender“男”&a…

【Python实战】Python采集大学教务系统成绩单

前言 在现代教育中&#xff0c;教务系统已经成为了学校管理和教学工作的重要组成部分。然而&#xff0c;由于各种原因&#xff0c;教务系统的成绩单并不能下载的&#xff0c;这给我们带来了很多不必要的麻烦和困扰。因此&#xff0c;采集教务系统成绩单的项目具有非常重要的意义…

【轻量化网络系列(6)】EfficientNetV1论文超详细解读(翻译 +学习笔记+代码实现)

前言 EfficientNetV1是Google在2019年发布的文章&#xff0c;这篇论文最主要的创新点是Model Scaling。论文提出了compound scaling&#xff0c;混合缩放&#xff0c;把网络缩放的三种方式&#xff1a;深度、宽度、分辨率&#xff0c;组合起来按照一定规则缩放&#xff0c;从…

使用FPGA驱动GS2972(3G-SDI模式)外同步(HSYNC VSYNC DE)或内(BT1120)同步输出彩条调试

GS2972视频输出调试 一、外同步模式1.1 GS2972的硬件初始化1.2 GS2972的驱动时序1.3 GS2972的驱动RTL代码1.4 GS2972输出彩条1.5 GS2972驱动易出bug二、数据内嵌同步模式2.1 GS2972的硬件初始化2.2 GS2972的驱动时序2.3 GS2972的驱动RTL代码2.4 GS2972输出彩条2.5 GS2972驱动易…

IIC总线简介及IIC的通信过程与时序

1.IIC总线简介 IIC总线&#xff1a; IIC总线是Philips公司在八十年代初推出的一种串行、半双工总线&#xff0c;主要用于近距离、低速的芯片之间的通信&#xff1b;IIC总线有两根双向的信号线&#xff0c;一根数据线SDA用于收发数据&#xff0c;一根时钟线SCL用于通信双方时钟…

跳槽一次涨8k,5年跳了3次...

最近有人说&#xff0c;现在软件测试岗位初始工资太低了&#xff0c;有些刚刚入行的测试朋友说自己工资连5位数都没有…干了好几年也没怎么涨。 看看别人动辄月薪1-2万&#xff0c;其实我想说也没那么难。 说下如何高效地拿到3万的工资&#xff0c;总体来说&#xff0c;就靠跳…

墨天轮关系型分布式数据库榜单解读

分布式关系型数据库概述 作为数据库演进方向之一&#xff0c;分布式能力受到更多用户的关注。从技术架构演进来看&#xff0c;数据库正走过了从单机式、集中式到分布式的发展过程&#xff0c;目前是多种架构并存的阶段。分布式架构以其更好的存储与计算扩展能力&#xff0c;受…

四六位、不定长、计算题等验证码,一款工具全部搞定,简单方便还开箱即用,精度高达96%!!

四六位、不定长、计算题等验证码,第三方平台准确率低,自己不会神经网络训练,嫌麻烦,一款工具全部搞定,开箱即用!! 本文秉承着开箱即用的原则,真正做到一款工具识别秒杀所有单行文本验证码,这里的单行指的就是某张4位6位或者计算题或者文字的验证码,我是使用了4位+6位…

Vue2数据代理的理解

理解 最近在复习Vue2&#xff0c;对于数据代理有些模糊。查阅了一些资料。 这是官方解释https://v2.cn.vuejs.org/v2/api/#data数据代理&#xff1a;通过代理对象 操作&#xff08;读/写&#xff09;目标对象中的属性 这里出现了两个对象&#xff0c;一个叫代理对象&#xf…

VMware虚拟机安装Windows Server 2003

哈喽&#xff0c;各位小伙伴大家好&#xff0c;win server2003算是拖了比较久了&#xff0c;一直没发布&#xff0c;今天完成server2003的安装后server系列的安装教程就告一段落了。马上暑假了&#xff0c;想必新生开学之后&#xff0c;很多计算机网络专业的同学们要开始接触到…

全志V3S嵌入式驱动开发(sd卡驱动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前开发过程中&#xff0c;整个linux的启动都是基于sd卡进行的。此外&#xff0c;我们有这么几点发现&#xff0c;首先&#xff0c;v3s本身是识别…

Python3+Selenium2完整的自动化测试实现之旅(五):自动化测试框架、Python面向对象以及POM设计模型简介

目录 前言 1 自动化测试框架概述 2 自动化测试框架需要的环境 3 自动化测试框架设计思想&#xff1a;Python面向对象 4 自动化测试框架设计思想&#xff1a;POM&#xff08;Page Object Model&#xff09;页面对象模型 【自动化测试工程师学习路线】 结语 前言 之前…

【AI数学】相机成像之外参数

在一个多视点计算机视觉系统里&#xff0c;系统输入除了多个视角的图像外&#xff0c;一般还需要输入对应视角下相机的内外参数。其中&#xff0c;相机内参数决定了图像坐标系和相机三维坐标系的映射关系&#xff0c;而相机外参数则决定了相机三维坐标系和世界坐标系的对应关系…

【TCP/IP】多进程服务器的实现(进阶) - 进程的概念及fork函数

目录 进程的概念及应用 进程的定义 进程的ID fork函数&#xff08;进程创建函数&#xff09; 多进程&#xff08;以及多线程&#xff09;是现代计算机网络的精髓。在之前&#xff0c;我们所做的诸如回声服务器、回声客户端、文件收发等都是偏向基础的单进程应用。而经过前面…