新建文章、创建标签和分类、阅读全文、搜索功能
next主题的使用方法

next主题的使用方法

Hexo
https://hexo.io/zh-cn/
NexT
http://theme-next.iissnan.com/
Hexo框架下用NexT(v7.0+)主题美化博客
https://blog.csdn.net/weixin_39345384/article/details/80785373
HEXO-NexT-V7-Gemini主题优化篇
https://yangyang188.coding.me/archives/3575fa23/

hexo的特点

pjax：依赖jq的pushState+ajax库
无切换、高性能加载显示html，又能跟普通url兼容，而ajax引入hash会影响seo

启用数据目录

在 hexo/source/_data 目录下新建 next.yml 文件，把 Next 的主题配置文件 next/_config.yml 内容全部复制到 next.yml，然后修改override为true

新建额外目录文件：
1、custom_file_path中增加一个路径，
2、next/scripts/events/lib/injects-point.js中增加对应变量
3、引用文件{{- next_inject('xxx') }}
4、新建文件

定义 CSS 路径

Next 7.2 版本后取消了 \themes\next\source\css_custom\custom.styl，怪不得这个路径一直找不到，需要在配置文件里重新定义。此处的配置项基于数据目录功能，所以必须完成前面的「启用数据目录」才能生效。
next.yml中的custom_file_path，解注style并新建对应文件

配置激活/失活时的网页标题

custom-script
yml配置文件里新建title_trick {enable,leave,enter}

关联文章

hexo-related-popular-posts 报错- -
lib/list-json.js中要加try catch : ret.path = pathFn.join(config.root , list.path)

列表页添加可配置图片

layout/_macro/post.swig中添加2处代码
<!--noindex-->
{% if post.descriptionImage %}
  <div class="out-img-topic-descriptionImage">
    <img src={{ post.descriptionImage }} class="img-topic-descriptionImage"/>
  </div>
{% endif %}
每个文章页头部添加需要显示的图片路径
descriptionImage: ''
<!--/noindex-->

背景动态图片

jquery-backstretch
可以放到bodyEnd中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
  $("body").backstretch("https://背景图.jpg");
</script>

rating评分

注册后填写网站的id

1) 可以配置评分方式，侧栏 > Rating > Setting，建议用 IP address 或 Device (cookie)，免登录，毕竟 Socials 里面的选项几乎都被墙，不适合国内网络环境。
2）建议在侧栏 > Site > Setting 中勾选 Private 选项，这样只能域名下使用

看板娘/桌宠

https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
https://github.com/xiazeyu/live2d-widget-models
npm install –save hexo-helper-live2d

~~/themes/next/layout/_layout.swig~~
~~body里添加{live2d()}~~
3.0不需要包含live2d(),只需安装依赖,models放入node_models内和站点文件配置live2d:

高定版本（高级定制
https://github.com/stevenjoezhang/live2d-widget
下载后放到目录/source/live2d-widget下，和_post同级
替换autoload.js中的live2d_path值和本地目录名称live2d-widget一致

/themes/next/layout/_layout.swig
线上
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
本地
<script src="/live2d-widget/autoload.js"></script>

Markdown

首行缩进：空两格
开头
字体高亮
字体高亮

表格
class	interface	byte	short	int	long
class	interface	byte	short	int	long

插入图片

图片根路径默认是source/images
![](/images/avatar.jpg)
{% img /images/avatar.jpg "图片" %}

fancybox放大预览，安装依赖后在配置页打开
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
<img src="/images/avatar.jpg" title="放大预览" alt="放大预览"/>
{% img /images/vi-vim-cheat-sheet.gif 600 600 "点击查看大图:vi/vim-cheat-sheet" %}

themes/next/js/utils内添加拦截，实现imageHref和imageTitle
if ($image.hasClass('nofancybox')) {
  var imageHref = $image.attr('href') 
  if(imageHref){
    var imageWrapLink = $image.wrap(`<a href=${imageHref} target="_blank"></a>`)
  }
  var imageTitle = $image.attr('title') || $image.attr('alt');
  if (imageTitle) {
    $image.after(`<p class="image-caption">${imageTitle}</p>`)
  }
  return;
}
<img src="/images/avatar.jpg" title="不需要放大预览" alt="不需要放大预览" class="nofancybox"/>

文章置顶

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

.md中top:true 或者true: 2控制多篇顺序

添加样式themes/hexo-theme-next/layout/_macr中<div class="post-meta">里
{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

随机副标题文案

站点_config.yml中：subtitle用-添加文案
/next/layout/_partials/header/brand.swig分割,数组随机显示

网易云

live2d

新建文章

1	hexo new [layout] <title>

如果没指定[layout]就使用default_layout中的默认模板

hexo new 文章名 // 简写新建
hexo new “文章名 1” // 空格需要用引号
hexo new post 文章名 // 用post模板新建文章

npm install –save hexo-generator-index hexo-generator-archive hexo-generator-tag

个性化页面

站点_config.yml中skip_render配置过滤source下的指定目录或文件

创建标签和分类

hexo new page tags

1 2	# 在tags/index.md中加入 type: "tags"

hexo new page categories

1 2	categories/index.md中加入 tags: "categories"

文章页加入

categories: 
- Axx
tags:
- Bxx

可以在scaffolds/post.md模板中加入categories:和tags:
每次hexo new 文章名时会自动包含分类和标签

字数统计

npm install hexo-symbols-count-time –save

阅读全文

1、md中手动<!-- more -->
2、md中头部front-matter中使用description
3、auto_excerpt功能在新版中弃用，换成npm包
npm install hexo-excerpt --save
主题_config.yml中`添加`:
excerpt:
  depth: 1
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: false

搜索功能

引用algolia search:

1、npm install --save hexo-algolia
2、站点_config.yml中
algolia:
    applicationID: 'applicationID'
    indexName: 'indexName'
    chunkSize: 5000

3、git bash中：
$ export HEXO_ALGOLIA_INDEXING_KEY=your Search key
$ hexo algolia
4、主题_config.yml中:
algolia_search:
  enable: false

引用local search:

1、npm install hexo-generator-searchdb --save
2、站点_config.yml中
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
4、主题_config.yml中:
local_search:
  enable: true
5、hexo generate生成search.xml
6、hexo server查看效果

hexo-admin后台管理

DeprecationWarning: fs.SyncWriteStream is deprecated.报错是因为node8.0+移除了方法，某插件依赖了这个方法
通过hexo –debug找到
在hexo-admin的依赖中找到hexo-fs/lib/fs.js并注释下面这行

1	exports.SyncWriteStream = fs.SyncWriteStream;

飞雪连天射白鹿，笑书神侠倚碧鸳

hello hexo,你好 hexo