hexo next 主题配置

bgape002

于 2024-02-28 16:02:02 发布

阅读量1k

点赞数 19

分类专栏： git 文章标签： hexo next

本文链接：https://blog.csdn.net/bgape002/article/details/136348514

版权

git 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

title: hexo next 主题配置
date: 2021-03-13 13:27:10
top: 22
tags:

hexo
next

categories:

blog

主题配置

修改网站图标（favicon）

将待修改的图标放在..\themes\next\source\images下，修改主题配置文件（_config.yml）：

favicon:：
  small: /images/icon.png
  medium: /images/icon.png
  apple_touch_icon: /images/icon.png
  safari_pinned_tab: /images/icon.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

效果如图：

在这里插入图片描述

显示md文件中引入的图片

这里要在站点目录/source下新建一个images文件，然后将需要引入的图片放在该目录下。

在做图片路径引入时格式为：![](/imgages/图片全名)。注意，如果站点文件root非/的，应为！[](root/images/图片全名)

注意：这里图片可能不会在markdown编辑器显示，但会在网页显示。

首页文章显示内容截断

可以通过在编写的md文件中合适的位置插入来控制首页显示内容，在标记后的文章内容会被截断，并出现“阅读全文”按钮。

指定站点模板样式方案（scheme）

修改主题配置文件：

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

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 左侧网站信息及目录，块+片段结构布局

站点博客搜索功能

安装插件npm install hexo-generator-searchdb --save

修改站点配置文件（非主题配置文件）：

# 本地搜索
search:
  path: search.xml
  field: all
  format: html
  limit: 100

utterances 评论系统

暂时没配置成功，不知道是不是校园网问题。最近几天事情比较多，等以后有时间想起来再试试。(大概是想不起来了，不过valine用着也挺好)

畅言云评

有后台管理评论，可以在后台删除评论区留言。

畅言云评(原搜狐畅言)是一个简单而强大的社会化评论及聚合平台。(官方自夸，链接：http://changyan.kuaizhan.com/)

该评论系统可以免费使用，但会有不同程度的广告干扰。

注册账号，然后去创建应用，进入后台总览页面，复制appid,app secret

在这里插入图片描述

修改主题配置文件:

# Changyan
changyan:
  enable: true
  appid: 
  appkey:

valine 评论系统

无后台管理评论，在leanCloud注册后，创建应用——设置——应用Keys，复制appid,appkey。

修改主题配置文件:

valine:
  enable: true
  appid: # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # 评论区默认占字符
  avatar: mm # Gravatar style
  guest_info: nick,mail # Custom comment header
  pageSize: 10 # Pagination size
  language: # 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 e~~e~~e~~e~~~
  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

站点访问统计（不蒜子）

修改主题配置文件：

busuanzi_count:
enable: true  # false---ture
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

关于**不蒜子**

添加代码块复制按钮，并修改代码块显示风格为mac

修改主题配置文件：

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: galactic
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

打赏功能

修改主题配置文件：reward_settings与reward对应的图片，图片放在放在..\themes\next\source\images下

文章原创声明

修改主题配置文件：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # true 默认显示版权信息, false 默认不显示
  language:

效果如图：

在这里插入图片描述

页面阅读进度条

修改主题配置文件

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

效果如图：

在这里插入图片描述

进阶配置

修改文章默认模板

修改..\scaffolds\post.md

title: {{ title }}
date: {{ date }}
top:
tags: 
categories:

新建文件时，头文件信息自动生成如上格式，当使用命令hexo n "newblog"生成文件如图：

在这里插入图片描述

新增文章时自动打开markdown编辑器

建文件..\scripts\newpost.js，不存在路径，则一依此新建，文件代码如下：

var spawn = require('child_process').exec;
hexo.on('new', function(data){
  spawn('start  path ' + data.path); # path 为编辑器的绝对路径，如"D:\install\Typora\Typora.exe"
});

数学公式渲染

Next支持mathjax和katex两种渲染方式，其中katex的速度更快，但是对于Latex的支持有一定的限制。所以除非你的博客数量实在是过于庞大，不然就可以直接使用mathjax。

mathjax可以选用下面两种渲染引擎的中的任一一种

hexo-renderer-kramed
hexo-render-pandoc

# 需要先卸载默认的渲染引擎
npm un hexo-renderer-marked --save
npm i hexo-renderer-pandoc --save

然后，修改主题配置文件：

# Math Formulas Render Support
math:
  enable: true   # 注意这里是新增的
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true
  engine: mathjax  # 注意这里是新增的
  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

最后，在要渲染的md文件头部添加mathjax： true

在主题配置math下有一个名为per_page的选项，其值为true或者false。这个选项用来控制是否对每个篇文章都渲染数学公式。默认情况下是true，这意味只对Front Matter中含有mathjax: true的文章进行公式渲染。将per_page设置为false，则会对每一篇文章都尝试进行公式渲染。

你不会真的以为到最后了吧——|——

现在行内公式渲染会出现越界等问题，需要调整kramed\lib\rules\inline.js文件，我这边文件在C:\Users\bgape\.npminstall_tarball\k\r\a\m\kramed文件夹，网上有说在博客目录下的node_modules下，具体位置建议用Everything去搜下。如果是压缩包，则把压缩包原位置解压就好了。接下来修改两行代码：

# 第一处在第11行
  //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

# 第二处在第20行
  //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

自定义文章排序

修改Hexo文件夹下的`node_modules/hexo-generator-index/lib/generator.js`

添加代码如下：

posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

然后，在对应的md头部添加top: num，num为任意数字，数字大的置顶。

删除一篇已经发布的文章

解决步骤：

1、删除文件夹source/_posts下目标文章markdown文件
2、删除.deploy_git文件夹
3、执行hexo clean后，再执行hexo g，hexo g 即可。

原因分析：

因为在本地在执行hexo g后，会在博客根目录下生成一个public文件夹，这个文件夹里的文件组合起来就是一个完整的静态博客。接着如果执行hexo d，就会把这个public文件夹的东西完完整整地拷贝到.deploy_git文件夹里，并把该文件夹里的所有文件全部推送push到远程库。之后会触发Pages服务的钩子去build项目，然后部署到网站上。markdown文章在之前的hexo g之后，把生成的静态文件拷贝到了.deploy_git文件，但hexo clean并没能删除·.deploy_git·里的markdown的静态文件，所以每次部署的时候，它还会冒出来。