NexT新老版本配置

写在前面

我的天老爷，搞了几天了终于略懂了一丢丢！一开始接触老坂本（5.1）跟着网上教程diy需要自己插入很多文件或者代码，而新版（7.7）基本插件化了，减少了很多目录文件，省去了自己写的同时也懵逼了一些。。毕竟现在教程基本都是老的，不过我没必要研究得太深入毕竟博客以内容质量为主，可以写写博客就ok了吧，反正目前也就只是自己在看而已，还是花点时间做正经事好了。。

NexT5.1

起始日期

主题配置文件下搜索since

since: 2020

显示阅读全文

auto_excerpt:
  enable: true   # 文章较多的话有必要设置为true显示阅读全文
  length: 150

也可以在md文件中用来截断，作为阅读全文的开始位置

设置语言

language: zh-Hans next5以下版本(包含)
language: zh-CN next6以上版本(包含)

menu

注意/和||之间不能留空格，否则出现%20，新版已修复

  home: /|| home
  #about: /about/ || user
  tags: /tags/|| tags
  categories: /categories/|| th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

浏览进度

主题配置文件搜索scrollpercent，设为true；如果箭头想放侧栏，搜索b2t把值改为true。

头像

添加头像

主题配置文件搜索 Sidebar Avatar 关键字，去掉 avatar 前面的#；

设置头像圆形、可旋转

打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件,修改如下（或自行更改侧边栏样式）:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

侧边栏社交活动

设置侧边栏社交链接

主题配置文件下搜索social，添加社交站点名称与地址即可

设置侧边栏社交图标

主题配置文件下搜索social_icons，添加社交站点名称（注意大小写）图标，图标名称来自Font Awesome图标地

RSS

站点目录下安装模块，$ npm install hexo-generator-feed --save，站点配置文件下添加配置(我也不知道干啥):

# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

友情链接

主题配置文件下搜索Blog rolls，配置：

# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局，一行一个连接
#links_layout: inline
links: #连接
  baidu: http://example.com/
  google: http://example.com/
  

修改文章样式

主页文章添加阴影效果

打开 themes/next/source/css/_custom/custom.styl ,向里面加代码:

.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

代码块自定义样式

还是custom.styl文件(新版直接主题配置文件下更改选择)，增加：

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

添加背景图

还是custom.styl文件，增加：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

NexT代码样式

主题配置文件下：

highlight_theme: night bright #可选值: normal | night | night eighties | night blue | night bright

版权声明

主题配置文件下搜索post_copyright，enable改为true：

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章底部#标签的图标样式

打开 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag"># ,将 # 换成 这个图标:

    {% for tag in post.tags %}
        {{ tag.name }}
    {% endfor %}

刷新时的加载条

打开 themes/next/_config.yml ，搜索关键字 pace ,设置为 true ,可以更换加载样式：

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

本地搜索

站点目录下安装模块，$ npm install hexo-generator-searchdb --save 打开站点配置文件添加：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开主题配置文件，搜索 local_search ，设置为true

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

文章顶部显示更新时间

主题配置文件搜索updated_at，设置为true

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: ture
  categories: true

统计文章字数，预览时间

站点目录下安装模块，$ npm i --save hexo-wordcount 打开主题配置文件搜索post_wordcount：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

修改Logo字体

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}

其中字体文件在 themes/next/source/fonts 目录下，里面有个 .gitkeep 的隐藏文件，打开写入你要保留的字体文件，具体字库自己从网上下载即可。

内容板块透明

博客根目录 themes\next\source\css_schemes\Pisces\index.styl 文件 .post-block 标签下 background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

开启代码复制

主题配置文件下：

codeblock:
    enable: true
    show_result: true

网站图标

主题配置文件下：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.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

不蒜子网站统计

我现在还不知道如何精确计数

主题配置文件中：

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: -user">> 访问人数
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: -eye">> 总访问量
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: -file-o">> 浏览
  page_pv_footer: 次

同时next/layout/_third-party/analytics/busuanzi-counter.swig文件里添加下面脚本，注意src要保持最新

leancloud计数

进入leancloud官网，注册得到appid和appkey，然后在安全中心里设置可以访问的域名或地址，之后就开始随便创建一个应用，在应用里创建class名为Counter，一定要Counter的类，然后在主题配置文件里打开leancloud的enable和写入appid和appkey，在Counter类中可以查看访问的情况

使用leancloud计数后，上面的不蒜子统计的page_pv属性可以关闭因为同样是页面浏览量。

NexT7.7

后来在7.7版本主题配置文件基本自己阅读了一遍，毕竟不是很难读，英文不懂就去找翻译，而且很多配置都插件化了，基本都只是需要主题配置文件就能操作的，除非自己diy页面的其他样式。

设置头像

主题配置文件下搜索avatar，设为true.

背景动画

Canvas-nest风格（很常见的动态背景）

# 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

git clone [https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest ](https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest)

clone可能会很慢，或者直接download zip并解压到站点目录下的/source/lib里，并重命名为canvas-nest，重新生成服务器即可

JavaScript 3D library风格

git clone [https://github.com/theme-next/theme-next-three source/lib/three](https://github.com/theme-next/theme-next-three source/lib/three)

同上可以直接下载zip解压到lib下并重命名为three，然后在主题配置文件下搜索theme-next-three，将想要的效果改为true即可

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: true
  canvas_lines: false
  canvas_sphere: false

丝带背景风格

新版还带有第三种动态背景风格，同样先下载依赖到lib并重命名为canvas-ribbon，见下面截出的代码：

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

文章背景样式

可以自己建立博客目录文件/source/_data/styles.styl,在里面写入样式代码，然后在主题配置文件里搜索custom_file_path最下面那个自定义style放行就ok了

// 底栏背景色
// .footer {
//     background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
// }

//顶栏图片
// .header {
//     background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
// }

//背景图片
// body{   
//         background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
//         background-size:cover;
//         background-repeat:no-repeat;
//         background-attachment:fixed;
//         background-position:center;
// }

//侧栏图片及内部文字颜色修改
.sidebar {
    background:url("https://s2.ax1x.com/2020/02/20/3ZLwj0.jpg");
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    p,span,a {color: #ad5389}
}

这样设置适合有侧边栏的主题，比如mist那个，其他主题再自行DIY.

阅读全文

新版的阅读全文已经改了，之前还很懵，但就在刚才全明白了，好奇怪为什么之前看不出来，但我就是刚才尝试了那么几次。。。

新版需要下载插件excerpt，自然的就需要在站点配置文件里配置：

excerpt:
  depth: 5  #按层来算，也就是按代码块来算
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

然后主题配置文件这样设置：

excerpt_description: true
...
read_more_btn: true

配置的默认深度depth原本是10层，我改为5层。刚才我就是理解了这个depth原来就是md文件中的代码块，也就是说当从文章（不包括标题）开始算起10个代码块后就会开始显示阅读全文按钮（在主页上），而不安装该模块的话就无法更改阅读全文按钮的位置。也就是说，不像旧版可以限制字数，新版限制的是层数，但需要相应的模块插件。然后写在md文件里的\的作用就是截断上面部分的文章，当点击阅读全部之后，会自动定位到该标签下面部分的文章，一般不需要这个定位。而网上有旧版的教程说这个截断标签也是可以限制字数的一种方法，这点我前面照写了，我自己没试过。

安装模块的链接我忘记记了，但网上或者github搜索hexo excerpt_excludes应该就有了，记得主题配置文件要设置excerpt_description的值为true。

更改文章切入动作

根据注释可以自行更换多种文字切入动作

motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
    # swoopIn | whirlIn | shrinkIn | expandIn
    # bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
    # slideUpIn | slideDownIn | slideLeftIn | slideRightIn
    # slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
    # perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
    post_block: fadeIn
    post_header: slideUpBigIn #标题的出现
    post_body: bounceLeftIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

评论系统

评论系统我用valine，因为valine和leancloud是同个appid和appkey，之前用leancloud统计文章阅读量但新版用不了了，无意中发现valine居然也有文章阅读量统计？？？然后我就直接打开了新世界的开关！！！然后发现评论系统每个页面都有除了主页，于是网上找了找解决方法，最后在对应页面的md文件里开头附上comments: false 就ok了, 下面是主题配置文件下的valine配置，记得要先申请leancloud的appid和appkey，点击跳转leancloud计数

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 # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  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

写在最后

由于这些都是存在我笔记中的知识点，后面新版的我基本都自行看注释解决了，毕竟新版是真的容易懂了一些吧，就是某些细节的地方还暂时摸不着头脑。接下去就慢慢磨我的博客吧，一点一点学习应该就能懂了，坚持很重要，现在是疫情时期，继续加油~