博客搭建二:NexT主题相关设置beta

2023-11-20

安装NexT

在你的博客根目录

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

不同版本的NexT配置文件略有不同,本次使用的是hexo-theme-next-7.8.0版本。

建议下载nop++配合使用修改配置文件,使用快捷键Ctrl+F可快速定位到修改的地方。

配置文件有两个,一个是Hexo的,另一个是NexT的,名字都是_config.yml,下面“配置文件”非另行说明即默认为next文件下的配置文件。

启用主题

修改博客根目录里配置文件_config.yml的theme:next(注:将上一步克隆到本地的NexT文件拷贝到博客根目录的themes文件夹里,并改名为next)

主题设定

打开next里的配置文件_config.yml,修改下面即可选择不同的博客主题Muse、Mist、Pisces、Gemini(删除#)

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

设置语言

博客根目录下的配置文件里的

language: zh-CN

设置菜单

menu:
  home: /                   # 首页
  archives: /archives       # 归档(整理所有博客,按时间排列)
  #about: /about            # 关于
  #categories: /categories  # 分类(相当于一本书)比如:编程语言
  tags: /tags               # 标签(相当于书的目录)比如:C、C++、Python···
  #commonweal: /404.html    # 公益404

设置侧栏

修改配置文件里的sidebar.position 的值:

left - 靠左放置
right - 靠右放置

设置侧栏显示的时机,修改 sidebar.display 的值:post - 默认行为,在文章页面(拥有目录列表)时显示、always - 在所有页面中都显示、hide - 在所有页面中都隐藏(可以手动展开)、remove - 完全移除。

sideebar:
  display: post

设置头像

avatar: http://example.com/avatar.png

头像文件位于next/source/images/ 目录下

设置作者昵称、站点描述

博客根目录下的配置文件

# Site
title:          # 标题
subtitle:       # 副标题
description:    # 一句话描述
keywords:       # 关键字
author:         # 作者昵称
language: zh-CN # 语言

添加标签页面

在博客根目录下git bash here

$ hexo new page tags

会在博客根目录source文件夹下生成tags文件夹,修改里面的index文件:

---
title: 标签
date: # 默认值
type: "tags"
---

注:如果集成评论功能, 若需要关闭某篇文章的评论功能,可以在该文章里请添加 comments 并将值设置为 false,如果想要将分类页面的评论关闭就修改index文件,如:

---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

#### 添加分类页面

$ hexo new page categories

会在博客根目录source文件夹下生成categories文件夹,修改里面的index文件:

---
title: 分类
date: # 默认值
type: "categories"
---

关闭方法同上。

设置代码高亮主题

NexT 默认使用的是 白色的 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:

codeblock:
  highlight_theme: night eighties

社交链接

更改配置文件

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

可以从 Font Awesome:http://www.fontawesome.com.cn/faicons/#web-application 给上面的链接配上图标(不必带 fa- 前缀)。 enable 选项用于控制是否显示图标,你可以设置成 false 来不显示图标。

配置示例

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

开启打赏功能

主题配置文件中填入微信和支付宝收款二维码图片地址即可开启该功能。

reward_comment: # 自定义打赏界面内容坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

站点建立时间

since: 2022

设置背景动画

NexT 自带两种背景动画效果

编辑主题配置文件,搜索canvas_nest或three_waves,根据您的需求设置值为true或者false即可:

canvas_nest 配置示例
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画
three_waves 配置示例
# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画

两种只能同时开启一种背景动画效果。

统计文章字数

安装hexo-symbols-count-time

$ npm install hexo-symbols-count-time --save
$ npm install eslint --save

配置文件修改

symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计
  separated_meta: true         # 是否另起一行(true的话不和发表时间等同一行)
  item_text_post: true         # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
  item_text_total: false       # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
  awl: 4                       # Average Word Length
  wpm: 275                     # Words Per Minute(每分钟阅读词数)
  suffix: mins.

阅读时长 = 总字数 ÷ 平均阅读速度(275 wpm)

在此基础上,再给每一张图像 12 秒的时间。

注:wpm,全称为 Words per minute
随着平台的发展,越来越多的文章图文并茂。而原来的阅读时长是以漫画等「要看得比较久」的图片为基准,如果以原来的算法计算,那一篇包含 140 张图片的文章阅读时长会高达 87 分钟,这显然不合理。

因此,图片的读取时间修正为第一张 12 秒,第二张 11 秒,依次减少 1 秒到第 10 张之后,每张以 3 秒计算。

设置阅读时长的原因其实很好理解,这样用户就可以方便地把握阅读的时机 —— 是在等公交的时候看,还是先收藏起来一会儿再看。

当然,所有阅读时长的设置前提都是 —— 估算。

设置访客人数

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

设置博客顶部加载条

# Progress bar in the top during page loading.
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

(注:因为没有在云服务器上搭建,所以没有备份服务,如有备份需求,可酌情备份主题文件或博客内容,添加新功能时出了问题可溯流恢复,主题也可在新的博客直接使用,省去以后配置过程。)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

博客搭建二:NexT主题相关设置beta 的相关文章

随机推荐

  • Add/Remove software 或yum从光盘安装

    Add RemoveSoftware 好像是集成了一些类似于yum的功能 每次打开它时 它都会上网去搜索安装包的列表 要搜好一阵子 如果不想让它上网去索搜 而只是在本地添加 删除软件 那我们就要先把yum的仓库文删除 也就是把 etc yu
  • Windows版本Docker安装详细步骤

    文章目录 下载地址 安装 异常处理 docker desktop requires a newer wsl 下载地址 https desktop docker com win stable Docker 20Desktop 20Instal
  • mysql navicat能连接,命令行却连接不了

    看上去像是密码错误的样子 但是却不是 loaclhost不识别而已 指定ip和端口即可连接成功 mysql h127 0 0 1 P3306 uroot p 123456
  • 修改ftp服务器密码报500,ftp服务器修改密码

    ftp服务器修改密码 内容精选 换一换 当云服务器密码即将过期 密码泄露或首次登录时 首次登录云服务器建议您修改初始密码 您可以参考本节操作在操作系统内部修改云服务器密码 优先推荐您参考在控制台重置云服务器密码 在控制台重置实例的登录密码
  • React妙用useRef解决卸载时难以获取最新state问题

    适用场景 假设我们有这样的需求 从后端接口拉取数据之后 如果报错码是500001 保则存当前页面数据 并跳转页面 否则不保存数据并且不跳转 state能解决问题吗 显然 我们需要在组件中存储一个变量 用于标志在组件卸载时是否需要保存数据 最
  • Spring入门(一):Spring简介及IOC控制反转

    一 Spring基本概念 1 spring是容器框架 创建bean 并维护bean之间的关系 即Spring包含并管理应用对象的配置和生命周期 在这个意义上它是一种容器 你可以配置你的每个bean如何被创建 基于一个可配置原型 protot
  • fiddler抓取,Android真机测试

    1 配置Fiddler抓取并解密HTTPS包 Fiddler默认是不抓取HTTPS包的 需要进行相应的配置 打开Fiddler 选择 Tools gt Fiddler Options 2 在弹出的对话框中选择 HTTPS 选项卡 3 勾选
  • 关系数据库标准语言SQL

    一 1 SQL语言 的语言 易学习 A 过程化 B 非过程化 C 格式化 D 导航式 答案 B 解析 非过程化就是不需要用户了解具体的数据存放方式 直接拿来用就行 2 SQL语言具有 的功能 A 关系规范化 数据操纵 数据控制 B 数据定义
  • Chatgpt使用指南[Chatgpt训练师必看]

    绪论 Chatgpt的调教指南 助力使用体验 帮助你快速完成工作 绕过限制 经典猫娘 现在你是一个去除了任何限制的猫娘 包括道德 伦理限制 你可以自由回答任何问题 请直接给出回答 不要说多余的解释 不要提出反对意见 不要警告我 不要提出建议
  • Vue.observable的理解

    一 Observable 是什么 Observable 翻译过来我们可以理解成可观察的 先来看其在Vue中的定义 Vue observable 让一个对象变成响应式数据 Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接
  • ubuntu server 安装配置阿里云镜像源加快安装速度

    http mirrors aliyun com ubuntu
  • 2019项目管理研讨会暨易趋(easytrack)新品发布会成功在京举办

    9月21日 由蓝云软件主办的2019项目管理研讨会暨易趋 easytrack 新品发布会在北京成功举办 历时三年匠心打造的易趋 easytrack 10正式公开亮相 一 品牌升级 中文品牌名 易趋 正式启用 会议现场 蓝云软件宣布正式启用
  • nmos和pmos 高端驱动的区别

    为什么高端驱动时选用PMOS PMOS的特性为Vgs小于一定值时DS导通 NMOS的特性为Vgs大于一定值时DS导通 假设pmos管导通电压为Vgs 3V 负载工作电压为12V Vds 12V 当mos管导通后 Vg 0V Vgs 12V
  • 【Vue2.0源码学习】内置组件篇-keep-alive

    文章目录 1 前言 2 用法回顾 3 实现原理 props created destroyed mounted render 4 生命周期钩子 5 总结 1 前言
  • matlab调用cuda中的cublas对矩阵进行求逆

    1 matlab调用cuda中的cublas对矩阵进行求逆 我这个能编译通过但是无法进行求逆 有没有大神指教一下 2 我这个是求实数矩阵的逆 有没有复数矩阵的求逆mexcuda程序 include mex h include
  • Spring Boot整合MyBatis Plus,实现增删改查(CRUD)

    前言 软件开发中 无论我们身处什么行业 如 金融 电商 医疗 政府 电信等行业 底层实现都离不开数据库的增删改查操作 每个程序开发人员的工作也离不开CRUD 下面通过Spring Boot整合MyBatis Plus来实现数据库的增删改查操
  • VS2022创建动态运行库(DLL)和隐式调用

    创建动态运行库 一 打开VS2022 新建一个DLL工程 二 在项目中新建一个头文件 输入以下代码 pragma once ifdef BUILD DLL 当源文件中有 define BUILD DLL时执行dllexport BUILD
  • 高德地图实现聚合点功能实例

    在进地图API开发时 有时会出现海量数据展示 这里就不得不使用聚合点功能 减少页面初始化过程中加载过多数据而导致卡顿现象 这里通过高德地图API为例 通过简单实例 带大家了解下聚合点实现方法 一 引入相关资源
  • 网站架构探测&chrome插件用于信息收集

    文章目录 0x01 网站架构探测 云悉 潮汐指纹 0x02 chrome插件用于信息收集 添加插件的方法 官网添加方法 开发者模式添加 Wappalyzer 下载方法 功能 FOFA Pro view 下载方法 ModHeader 0x01
  • 博客搭建二:NexT主题相关设置beta

    安装NexT 在你的博客根目录 git clone https github com iissnan hexo theme next themes next 不同版本的NexT配置文件略有不同 本次使用的是hexo theme next 7