【Hexo-Next】主题基础配置篇(二)

已于 2023-01-23 19:11:54 修改
阅读量722 收藏 7
点赞数
分类专栏： Hexo-Next主题 文章标签： 经验分享 其他 前端
于 2022-11-09 22:31:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45867247/article/details/127779249
版权

💻【Hexo-Next】主题基础配置篇(二) 🏠专栏：Hexo-Next 主题
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【Hexo-Next】主题的常见配置

一. 设置（侧边栏和文章栏）圆角

  • 首先，在 根目录下找到source/_data/variables.styl文件（没有就创建）并增加下列代码：
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;
  • 然后，在 NexT 的配置文件 _config.yml 中取消 variables.styl 的注释
variable: source/_data/variables.styl

二. 添加字数统计和阅读时长

  • 首先，安装相关插件 运行如下命令：
npm install hexo-symbols-count-time
  • 其次，修改站点配置文件 _config.yml 打开 Hexo 根目录的 _config.yml，添加如下字段，并根据需要进行修改。
symbols_count_time:
  symbols: true            # 文章字数统计
  time: true               # 文章阅读时长
  total_symbols: true     # 站点总字数统计
  total_time: true        # 站点总阅读时长
  exclude_codeblock: false # 排除代码字数统计
  awl: 4                   # 平均词长度
  wpm: 275                 # 每分钟阅读词数
  suffix: "mins."          # 如果阅读时间少于 60 分钟，则添加后缀作为字符串参数

  • 最后，修改主题 _config.yml 打开 theme/next/ 文件夹下的 _config.yml，找到 symbols_count_time 字段，根据需要进行设置，其下各字段含义如下：

    # Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true  #文章中的显示是否显示文字（本文字数|阅读时长） 
  item_text_total: true  #网页底部的显示是否显示文字（站点总字数|站点阅读时长）

效果图：
在这里插入图片描述

三. 添加赞赏功能

  • 首先，准备自己的支付宝和微信二维码

  • 然后，在_config.yml中配置图片

把以wechat.jpg、alipay.jpg命名的收款二维码图片放入themes/next/source/images中

  • 最后，在主题配置文件中，配置以下内容：
# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true #打赏开启
  animation: false 
  comment: 赞赏一杯咖啡 #评论
  #comment: Buy me a coffee

reward: #打赏
  wechatpay: /images/wechatpay.png  #微信收款码图片路径
  alipay: /images/alipay.png  #支付宝收款码图片路径
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

四. 添加社交

打开/blog/themes/next/_config.yml文件，查找Social Links字段并修改（把要用的社交链接前的#去掉，并在链接位置改为自己的社交相关链接）如下：

social:
  GitHub: https://github.com/fanxing28 || fab fa-github  
  E-Mail: mailto:wei861097416@outlook.com || fa fa-envelope
  CSDN: https://blog.csdn.net/qq_45867247?spm=1000.2115.3001.5343 || fa fa-crosshairs
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

效果图：
在这里插入图片描述

五. 顶部进度条

  1. 进入博客文件夹的/themes/next文件夹下

    cd ../themes/next

  2. 下载安装Progress module，如下

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

  3. 在/themes/next/_config.yml中设置，如下

    # Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue #设置进度条颜色，可以选择以上所有颜色
  # All available themes:
  # 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: bounce  #设置进度条样式，可以选择以上所有样式

效果图：

请添加图片描述

六. 文章加密

在许多写博文的时候你可能需要写一些私密的博客, 通过密码验证的方式让人不能随意浏览.。这里简单记录下实现方法。

(1) 安装

  • npm install --save hexo-blog-encrypt
  • 或 yarn add hexo-blog-encrypt (需要) Yarn)

(2) 快速使用

  • 将 “password” 字段添加到您文章信息头就像这样.
---
title: myblog
date: 2022-06-14 11:10:05
password: HelloWorld
---

(3) 设置优先级

文章信息头 > 按标签加密

(4) 高级设置

1. 文章信息头
---
title: Hello World
tags:
- 作为日记加密
date: 2022-06-14 14:12:49
password: nickname
abstract: 本篇博文已被加密了, 请输入密码查看.
message: 您好, 这里需要输入密码.
wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
2. _config.yml

示例

# Security
encrypt: # hexo-blog-encrypt
  abstract: 本篇博文已被加密了, 请输入密码查看.
  message: 您好, 这里需要输入密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
3. 对博文禁用 Tag 加密

只需要将博文头部的 password 设置为 "" 即可取消 Tag 加密。

Example：

---
title: Callback Test
date: 2022-06-14 11:15:59
tags:
    - A Tag should be encrypted
password: ""
---

Use a "" to diable tag encryption.

(5) 配置优先级

文章信息头 > _config.yml (站点根目录下的) > 默认配置

(6) 关于 Callback 函数

在部分博客中，解密后部分元素可能无法正常显示或者表现，这属于已知问题。目前的解决办法是通过自行查阅自己的博客中的代码，了解到在 onload 事件发生时调用了哪些函数，并将这些函数挑选后写入到博客内容中。如：

---
title: Callback Test
date: 2022-06-14 11:55:45
tags:
    - Encrypted
---

This is a blog to test Callback functions. You just need to add code at the last of your post like following:

It will be called after the blog decrypted.

<script>
    // 添加一个 script tag 与代码在文章末尾.
    alert("Hello World");
</script>

例子在: Callback 例子。

(7) 对 TOC 进行加密

如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

  • 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码，通常在30行左右。
  • 使用如下的代码来替代它：
<% if(post.toc == true){ %>
  <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
    <strong class="toc-title">Index</strong>
      <% if (post.encrypt == true) { %>
        <%- toc(post.origin, {list_number: true}) %>
      <% } else { %>
        <%- toc(post.content, {list_number: true}) %>
      <% } %>
  </div>
<% } %>
<%- post.content %>

(8) 禁用 Log

If you want to disable the logging, you can add a silent property in _config.yml and set it to true. 如果你想要禁止使用 Log，你可以在 _config.yml 中增加一个 silent 属性, 并将其设置为 true。

# Security
encrypt: # hexo-blog-encrypt
  silent: true

这样就会禁止如 INFO hexo-blog-encrypt: encrypting "{Blog Name}" based on Tag: "EncryptedTag". 的日志。

(9) 加密主题

之前, 我们尝试使用 template 关键字来让用户能修改自己的主题。后来发现真不是一个好主意. 所以我们现在引入了主题：theme 关键字。

你可以简单的使用 theme 在 _config.yml 里或者文章头， 如下：

(10) 文章信息头

---
title: Hello World
tags:
- 作为日记加密
date: 2022-06-14 11:45:25
password: neic
abstract: 本篇博文已被加密了, 请输入密码查看.
message: 您好, 这里需要输入密码.
theme: xray
wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

(11) 其它

可添加的 Front-matter 字段：

  • password: 是该博客加密使用的密码
  • abstract: 是该博客的摘要，会显示在博客的列表页
  • message: 这个是博客查看时，密码输入框上面的描述性文字

**想了解更具体的：**我们可以借助 Hexo插件中心 中的 hexo-blog-encrypt 实现。

七. 阅读全文

​ 很多时候写一篇博文时都非常的长，这个时候将一篇博文在主界面缩短就很重要。下面为大家带来了三种设置阅读全文链接的方法。

  1. 在文章中使用< !--more--> 手动进行截断

    这种方法可以根据文章的内容，自己在合适的位置添加 < !--more--> 标签，使用灵活，也是Hexo推荐的方法。

    1.设置圆角
<!--more-->
2.添加字数统计

  2. 在文章中的front-matter中添加description，并提供文章摘录
    这种方式只会在首页列表中显示文章的摘要内容，进入文章详情后不会再显示。

    ---
title:新建文章
date:2022-06-14 11:45:25
tags:hexo博客
description:这是对整片文章的描述，会显示在主页上，点击进入详情后不会再显示

  3. 自动形成摘要，在主题配置文件中添加
    默认截取的长度为 150 字符，也可以根据需要自行设定。

    auto_excerpt:
  enable: true
  length: 150

效果图：
在这里插入图片描述

繁星学编程
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2022搭建Hexo+NexT博客教程
m0_51994765的博客
02-06 6599
注： 本教程的操作截图是win11的，但操作和win10没有什么区别 要能顺利搭建博客，需要你有打开谷歌的能力（懂的都懂） 安装Git 1. 下载Git 蓝奏云下载链接：https://plutolog.lanzouw.com/iAuCUzj8ahe 官网下载链接：Git for Windows 注：我使用的版本Git是2.35.1.2，新手请使用相同版本 2. 安装Git （1）双击下载的安装包，点击next （2）选择安装位置，可默认选择，继续点击next （3）可默认选择，.
【Hexo-Next】主题基础配置篇(一)
浅陌繁星的博客
10-16 524
本文主要讲述Hexo博客Next主题的三个简单的配置（近期文章（侧边栏）、粒子时钟、添加live2d卡通人物）
2024年Hexo+NexT（三）：Next主题配置详解_hexo next，dubbo原理面试
最新发布
2401_84850851的博客
05-14 1007
enable: false # 启动开关length: 150 # 从开始往后选取的摘要文字数量。post_meta:item_text: true # 是否显示“发表于”这几个文字created_at: true # 文章创建日期updated_at: false # 文章修改日期categories: true # 文章所属分类post_wordcount: # 字数统计。
Hexo 转至 Next 优化及插件使用问题
childtclx的博客
08-30 270
hexo-asset-image 与 hexo-abbrlink 纷争 hexo-abbrlink 插件用于将文章链接永久化，hexo-asset-image 插件用于当站点配置（根目录下的 _config.yml，themes 目录下的叫主题配置）中的 post_asset_folder 为 true 时，能通过相对路径使用资源文件夹中的图片等，这个好处是像使用 Typora 文本编辑器通过设置使拖进来的图片自动转换成对应的相对路径，使写博客变得更加高效。 注：hexo-asset-image 版本为
Hexo-Next 主题博客个性化配置超详细，超全面(两万字)
热门推荐
Z小旋
03-10 3万+
隐藏网页底部 powered By Hexo / 强力驱动 打开 themes/next/layout/_partials/footer.swig 找到： {% if theme.footer.powered.enable %} <div class="powered-by">{# #}{{ __('footer.powered', '<a class="theme-link" ...
【个人网站搭建】hexo框架Next主题下添加网站运行时间
C/C++攻城狮
08-15 796
Hexo博客框架版本（hexo vesion）：5.3.0Next主题版本：v5.1.4最后更新日期：2022-08-15。
hexo-theme-next-7.4.2_hexo_
10-04
标题中的“hexo-theme-next-7.4.2”指的是Hexo博客框架的一个主题版本，Next是Hexo的热门主题之一，版本号7.4.2代表了该主题的特定更新迭代。Hexo是一个基于Node.js的静态站点生成器，它使得搭建个人博客或网站变得...
my-hexo-next:不推荐使用下一个主题。 引入全新主题，番茄！
06-11
The source code of my hexo theme,based on 。 欢迎到我的博客查看效果 | 在基础上增加以下功能： 增加high一下功能 增加侧边栏目录显示 增加多说分享 增加多说热评文章 感谢。 增加high一下功能 在配置文件中增加...
hexo-blog
03-20
Next主题是Hexo众多主题中的一个明星产品，它提供了丰富的配置选项和功能，如响应式设计、暗色模式、多语言支持等。Next主题的设计注重用户体验，使得博客在视觉上具有吸引力，同时保持了易读性和可导航性。此外，...
typecho-theme-next:（重构中）Hexo 主题 NexT.Mist 的 Typecho 移植版
05-09
计划与 Hexo 版本保持同步，支持所有的 Schemes，可通过主题设置配置: Next.Mist (以这个为基础) Next.Muse Next.Pisces Next.Gemini 正在做的： 代码格式化 去掉逝去的多说评论 引入 next 的 stylus 样式，...
基于Next5主题美化的一款hexo博客主题
08-08
【标题】：“基于Next5主题美化的一款hexo博客主题” 【描述】：“基于Next5主题美化的一款hexo博客主题”是指使用Hexo框架中的Next5主题进行了一系列的定制和优化，旨在提供更美观、更具个性化的博客展示效果。...
小程序：基于wepy的小程序换肤功能
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-02 299
主要代码在三个文件中 1、该文件重要配置主题色 // config/theme.js // 睿肤识别（skin）主题 // 慧捷肌肤（dermoscopy）主题 const themeData = { skinStyle: ` --themeColor: #fff; --themeBgColor: blue; `, dermoscopyStyle: ` --themeColor: #fff; --themeBgColor: red; `, } export default
Hexo博客-NexT主题自定义主页配置方法
Bingin的博客
09-08 2307
Refrence https://zhuanlan.zhihu.com/p/366761432 问题 在使用Hexo博客框架的Next主题时，默认主页是数篇博客的摘要。想要修改主页（也即首页）的内容（例如给出网站的介绍等），需要进行自定义配置。 步骤 在根目录的source目录下，新建一个index.md文档 这个source目录下的index.md文档即是我们自定义的主页。在文档中做出的任何修改均会体现在自定义主页中。 修改根目录下的_config.yml文件的index_generator项
hexo之next主题个性化配置详细教程
傻瓜的博客
06-28 1万+
hexo之next主题个性化配置详细教程1.在右上角或者左上角实现fork me on github实现的效果图 具体实现方法 点击传送门>> 挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码： 然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中 <div class="headband"></div>的下面
Hexo-Next 主题配置
颹蕭蕭
03-02 320
next 主题下载慢？ 官方仓库 https://github.com/theme-next/hexo-theme-next 但是由于国内访问次数太多，很容易被限速。建议先fork到你自己的github仓库，然后再从你自己的github地址下载，效率要高些。 而且，你在本地做的优化调整也可以方便保存到远程仓库中。 ...
Hexo框架+NextT主题搭建博客教程
YekonGLE
11-26 2813
最近这一阵子把博客托管到 coding net 上去了，并使用Hexo框架和NextT主题来搭建博客，正如部分网友所说的那样，真是踩坑无数。为此记录下我的搭建过程，有需要的网友也可参考一下。(以下内容针对Windows平台，并且笔者假设读者对 git 有基本的了解，可以参考我另一篇博文关于git的使用) 使用Hexo框架 安装Hexo注意，使用 Hexo 框架前确保已经安装了 node.js 运
hexo博客next7.8主题配置
听书人的博客
04-15 496
next主题的优化，持续更新
NexT的主题设定与配置
BLUEHEART
02-23 6718
本篇文章将介绍NexT的主题设定与配置 在Hexo 中有两份主要的配置文件，其名称都是_config.yml。其中，一份位于站点根目录下，主要包含 Hexo本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。 我们约定，将前者称为 站点配置文件，后者称为 主题配置文件 主题设定 选择 Scheme Scheme 是 NexT提供的一种...
hexo + next主题高级配置
destiny'Note
10-31 2025
前言 配置完yilia后，发现缺少一些东西，百度之下，找到了特别喜欢的主题——next。跟大家分享配置经验。 首先，本文是根据我自己的博客配置而写的，并不全面，其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客：destiny'Note 其次，本文中有部分自己的改进方案，并非全部摘自他文 我的博客原文链接：hexo + next主题高级配置 一、主题下载 git clone htt
npm install hexo-renderer-pug hexo-renderer-stylus --save
02-23
npm install hexo-renderer-pug hexo-renderer-stylus --save 是一个命令，用于安装 Hexo 博客框架所需的两个插件：hexo-renderer-pug 和 hexo-renderer-stylus。这两个插件分别用于渲染 Pug（以前称为 Jade）和 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值