Hexo博客之NexT配置教程

介绍

  • 在看本篇之前,请确保你已成功搭建好个人博客。如没有,请移步:[博客搭建教程]
  • 该教程中的所有链接均指向为官方链接,望知悉。
  • 该教程为我上一篇教程的后续教程,即 Hexo 的主题配置及修改。
  • 该教程主要是针对 NexT 主题,其他主题略有出入,如有需要请自行百度。

一、注意事项

  • 所有配置内容在冒号后边均有一个空格(划重点!!!)
  • 请区分好这两个概念,以后会以这两个名词来代指配置文件
    配置文件区分
  • 如果你修改某些配置后,没有效果,请先执行清理缓存操作,再开本地服务
  • (2021.06.03更新)Next 主题在 7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。请点击这里进行设置后在进行基础选项的配置。

二、常用指令

1.创建文章或页面

  • hexo new [layout] <title> ,layout 属性如下:
    post:新建文章,存放路径于 source/_posts
    page:新建页面,如404,分类等,存放路径于 source/
    draft:新建草稿,存放路径于 source/_drafts
  • 上面的 <title> 属性是博文 Markdown 文件的名字,一般也会自动生成为博客文章的标题,也是博文链接的后缀(如 https://www.wrysmile.cn/2020/03/22/hexo-tutorial/ 中的hexo-tutorial
  • 新建文章可以使用简写命令,如本文的创建即可以用 hexo n Hexo博客之NexT配置教程
  • 新建草稿也可以用另一个命令 hexo publish [layout] <title>

2.上传仓库

  • hexo clean 清理缓存文件——db.json和已生成的静态文件——public
  • hexo g 生成网站静态文件到默认设置的 public 文件夹
  • hexo s 启动本地服务器,用于预览主题。默认地址:http://localhost:4000/
  • hexo d 自动生成网站静态文件,并部署到设定的仓库

三、相关链接

  • Next主题:你可以去 NexT 官网下载,官网有下载链接、下载方法以及安装方法。查看链接
  • Next插件:这里总结了 Next 部分插件地址。查看链接
  • Next更新:该地址总结了 Next 各版本更新日志。查看链接

四、基础配置

1.切换主题

  • 将解压好的主题放入数据目录下的 themes 文件夹下,并改名为 next
  • 打开 站点配置文件 ,找到 theme 字段,将其改为 next
    1
    theme: next          //直接把后边修改为主题名就行

2.选择 Scheme

  • Scheme 这里可以理解为网站的整体布局或方案
  • NexT 内置了四种样式,在 主题配置文件 中搜索 Schemes,然后将下面四个中任意一个前面的注释符号”#”去掉即可
    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse //默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
    #scheme: Mist //Muse 的紧凑版本,整洁有序的单栏外观
    #scheme: Pisces //双栏 Scheme,小家碧玉似的清新
    #scheme: Gemini //Pisces的宽松版本,看起来比较更美观

3.设置网站语言

  • 站点配置文件 中搜索 language,在后边填入你想设置的语言即可
    语言

  • 新版本中官方将中文的语言命名由 zh-Hans 改为了 zh-CN

4.菜单设置

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大多数的场景,同时无须担心在 Retina 屏幕下图标模糊的问题。

  • 主题配置文件 中搜 menu,需要开启哪个选项就把其前面的注释符号”#”去掉即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
    home: / || home //首页
    #about: /about/ || user //关于
    #tags: /tags/ || tags //标签
    #categories: /categories/ || th //分类
    archives: /archives/ || archive //归档
    #schedule: /schedule/ || calendar //日程表
    #sitemap: /sitemap.xml || sitemap //站点地图
    #commonweal: /404/ || heartbeat //公益404
  • 而图标按以下内容设置,需要用哪个就去掉其前面的注释符号”#”即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu_icons:
    enable: true
    #Icon Mapping
    #home: home
    #about: user
    #categories: th
    #tags: tags
    #archives: archive
    #schedule: calendar
    #sitemap: sitemap
    #commonweal: heartbeat
  • 如需对这些页面进行配置,请点击这里跳转到进阶配置

5.开启侧栏功能

  • 主题配置文件 中搜 sidebar,position 是指侧栏的位置,display 是指侧栏显示的时机。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    sidebar:
    #position: left //靠左放置
    #position: right //靠右放置(只针对于Pisces、Gemini这两个Scheme)

    //(display只针对于Muse、Mist这两个Scheme)
    #display: post //默认行为,在文章页面(拥有目录列表)时显示
    #display: always //在所有页面中都显示
    #display: hide //在所有页面中都隐藏(可以手动展开)
    #display: remove //完全移除

6.修改头像

  • 主题配置文件 中搜 avatar,将值设置为头像链接地址
    头像修改

7.修改站点标题、副标题、昵称、描述等信息

  • 站点配置文件 中搜 Site,按需修改内容即可
    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: //标题
    subtitle: //副标题
    description: //站点描述
    keywords: //关键字
    author: //作者
    language: //语言
    timezone: //时区

8.开启友链

  • 主题配置文件 中搜 Blog rolls,修改相应参数即可

    1
    2
    3
    4
    5
    6
    links_icon: link               //友链的图标
    links_title: Links //友链的标题
    links_layout: block //友链的布局
    #links_layout: inline
    links:
    Title: http://example.com/ //显示名称:网址链接
  • 新版更新如下:

    1
    2
    3
    4
    5
    6
    7
    8
    # Blog rolls
    links_settings:
    icon: fa fa-globe
    title: 标题
    # Available values: block | inline
    layout: block
    links:
    #Title: https://example.com

9.开启分享功能

(1).百度分享

  • 主题配置文件 中搜 baidushare,将前边的注释符号去掉,按下边代码修改即可开启

    1
    2
    3
    #baidushare:
    type: slide
    baidushare: true
  • 新版已移除

(2).NeedMoreShare2

  • 主题配置文件 中搜 needmoreshare,修改相应参数为 true 即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    needmoreshare2:
    enable: false //这个指全局开关
    postbottom: //在文章底部显示
    enable: true
    options:
    iconStyle: default //这里指图标风格
    boxForm: horizontal //这里指分享框的样式
    position: bottomCenter //这里位置可以根据上边注释进行自己调试
    networks: Weibo,Wechat,QQZone //这里需要哪些网站根据上边注释自己添加
    float: //在博客中漂浮显示
    enable: false
    options:
    iconStyle: default
    boxForm: horizontal
    position: middleRight
    networks: Weibo,Wechat,QQZone
  • 新版已移除

(3).jiathis

  • 未收录

(4).duoshuo_share

  • 未收录

10.开启”回到顶部”百分比显示

  • 主题配置文件 中搜 b2t,修改相应参数为 true 即可

    1
    2
    b2t: true              //是否在侧栏中开启回到顶部开关
    scrollpercent: true //是否以百分比形式显示
  • 新版更新如下:

    1
    2
    3
    4
    5
    6
    7
    # 回到顶部按钮设置
    back2top:
    enable: true
    # Back to top in sidebar.
    sidebar: true
    # Scroll percent label in b2t button.
    scrollpercent: true

11.开启文章内打赏功能

  • 主题配置文件 中搜 reward_comment,去掉前面注释符号并修改相应内容参数即可

    1
    2
    3
    4
    #reward_comment: Donate comment here  //打赏内容显示
    #wechatpay: /images/wechatpay.jpg //微信打赏图片/地址
    #alipay: /images/alipay.jpg //支付宝打赏图片/地址
    #bitcoin: /images/bitcoin.png //比特币打赏图片/地址
  • 新版更新如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Donate (Sponsor) settings
    # Front-matter variable (unsupport animation).
    reward_settings:
    # If true, a donate button will be displayed in every article by default.
    enable: true
    animation: true
    comment: 介绍
    reward:
    wechatpay: /images/wechatpay.png
    alipay: /images/alipay.png
    #paypal: /images/paypal.png
    #bitcoin: /images/bitcoin.png

12.开启侧栏社交功能

  • 主题配置文件 中搜 social,需要哪个去掉哪个前面的注释符号,并修改网址为自己的网址

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #social:
    #GitHub: https://github.com/yourname || github
    #E-Mail: mailto:yourname@gmail.com || envelope
    #Google: https://plus.google.com/yourname || google
    #Twitter: https://twitter.com/yourname || twitter
    #FB Page: https://www.facebook.com/yourname || facebook
    #VK Group: https://vk.com/yourname || vk
    #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
    #YouTube: https://youtube.com/yourname || youtube
    #Instagram: https://instagram.com/yourname || instagram
    #Skype: skype:yourname?call|chat || skype
  • 新版更新如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Social Links
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
    social:
    #GitHub: https://github.com/yourname || fab fa-github
    #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
    #weibo: https://weibo.com/u/yoururl || 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
    social_icons:
    enable: true
    icons_only: false
    transition: false

13.博客主页开启”阅读全文”功能

  • 博客主页默认显示所有文章内容,看起来有些冗杂,故开启”阅读全文”开关可以进行适当控制
  • 这里有三种方法,自行选取适合自己的
  • 第一种最为推荐,可以自己控制显示多少;
    第二种也推荐,可以自行更改显示内容;
    第三种不推荐,这种排版显示不美观,但可以进行全局控制。

(1).文章截断

  • <!-- more --> 语法,在文章开头适当位置插入 <!-- more --> 即可进行首页内容控制

(2).描述

  • 在文章中的 front-matter 中添加 description ,并插入你想要显示的内容摘要即可
    1
    2
    3
    4
    5
    title: Hello world
    data: 2019-02-02 20:33:56
    tags: 标签
    categories: 分类
    description: //这里填写对该篇文章的描述,该描述仅在首页显示,进入文章后不显示

(3).主题自带

  • 主题配置文件 中搜 auto_excerpt,对相应参数进行修改即可

    1
    2
    3
    auto_excerpt:     //自动形成摘要
    enable: false //选择是否开启
    length: 150 //对文章开头的截取长度,默认150个字符
  • 新版更新如下:

    1
    2
    # Automatically excerpt description in homepage as preamble text.
    excerpt_description: true

14.修改网站图标

  • 找一些自己心仪的图标,并下载 16x16/32x32 且格式为 png 的图标图片
  • 将这两张图片分别改名为 favicon-16x16.png favicon-32x32.png并放置在 themes\next\source\images\ 目录下
  • 主题配置文件 中搜 favicon,修改相应的图片即可

15.开启网站顶部刷新进度加载条

  • 主题配置文件 中搜 pace,对相应参数进行修改,需要哪种样式就去掉前面的注释符号即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    pace: true
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    #For example
    pace_theme: pace-theme-flash
    #pace_theme: pace-theme-minimal
  • 新版已移除,只有一种默认进度条,如下:

    1
    2
    3
    4
    5
    # Progress bar in the top during page loading.
    # For more information: https://github.com/rstacruz/nprogress
    nprogress:
    enable: true
    spinner: false

16.开启网站动态背景效果

  • 主题配置文件 中搜 canvas_nest,之后的四行代码对应动态背景的配置,NexT 中内置了四种动态背景,对相应的参数进行修改即可

    1
    2
    3
    4
    5
    6
    7
    8
    # Canvas-nest
    canvas_nest: false
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: true
    # canvas_sphere
    canvas_sphere: false
  • 这里可以同时开启多个特效,但容易对网站造成相应的资源损耗,建议不要这样做

  • 新版已移除,解决办法请 移步 到这里进行查看

17.Front-matter 的设置

(1).什么是 Front-matter

  • 就是博文最上方以 --- 分隔的那部分,主要用来对文章进行一些修饰

(2).默认可以使用的参数

参数描述默认值
layout布局
title标题
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)多个标签用[,]分隔
categories分类(不适用于分页)
permalink覆盖文章网址

(3).怎么修改

  • 打开你 Hexo 的根目录,找到 scaffolds 文件中的 post.md文件,并用 VScode,记事本等软件打开
  • 需要添加哪些功能,按格式添加即可,注意每个参数后面都需要加一个空格

五、进阶配置

1.添加标签、分类、关于、归档等页面

  • 在基础配置中我们已经开启了这三个页面,但当你实际去点这些页面时,你会发现跳转页面显示404错误,这是因为我们还没有创建这些页面,通过下面指令来进行创建。

(1).创建

  • 在 hexo 的根目录打开 git 命令行
  • 分别输入以下命令即可:
    新建标签页——输入命令 hexo new page "tags"
    新建分类页——输入命令 hexo new page "categories"
    新建关于页——输入命令 hexo new page "about"
    新建归档页——输入命令 hexo new page "archives"

(2).修改内容

  • 在 Hexo 的根目录下找到 source 文件夹,新建好的页面就在里面,用 Markdown 编辑器打开 .md 文件进行编写,内容如下:

  • 标签页

    1
    2
    3
    title: 标签                 //这里为你在主页想要显示的文字
    date: 2019-01-23 14:39:14 //这里为日期,默认,无需改动
    type: "tags" //这里的类型一定要和基础配置中的菜单中的英文对应
  • 分类页

    1
    2
    3
    title: 分类                 //这里为你在主页想要显示的文字
    date: 2019-01-23 14:45:41 //这里为日期,默认,无需改动
    type: "categories" //这里的类型一定要和基础配置中的菜单中的英文对应
  • 关于页

    1
    2
    3
    4
    title: 关于                 //这里为你在主页想要显示的文字
    date: 2019-01-23 14:47:58 //这里为日期,默认,无需改动
    type: "about" //这里的类型一定要和基础配置中的菜单中的英文对应
    //关于页面三个横线下边可以写你关于自己的描述,语法为Markdown语法
  • 归档页

    1
    2
    3
    title: 归档                 //这里为你在主页想要显示的文字
    date: 2019-01-23 14:50:49 //这里为日期,默认,无需改动
    type: "archives" //这里的类型一定要和基础配置中的菜单中的英文对应

2.添加评论功能

(1).来必力评论

使用社交网站账户登录,免去注册过程。
提高用户的参与和沟通意愿。
管理/删除我的评论内容。
提供管理页面,管理网站文章及评论内容。

  1. 去来必力官网注册账号。直达链接:查看链接
  2. 进入管理页面
    管理页面
  3. 选择 City 免费版本
    City版
  4. 选择一般网站,找到 uid 这一行,复制后面的值
    uid
  5. 主题配置文件 中搜 livere_uid,粘贴刚刚复制的 uid 的值即可
    粘贴uid
  6. 进入博客可以看到,来必力评论功能已添加
    评论功能

(2).Waline评论

  • 前面的来比力评论加载速度总是很慢,所以之后打算换为 Valine 评论,结果发现在 Next8.2.0 版本中移除了对 Valine 的支持,查阅后发现是因为安全问题,可查看这里进行了解

  • 根据上文可得知 Waline 解决了 Valine 安全问题

  • 配置方法可查看该链接进行配置

3.添加网页在线联系功能

  1. 去 DaoVoice 官网注册一个账号。直达链接:查看链接
    • 经读者2021.3.17日反映上面链接已经失效,现已更新请点击这里
  2. 在这里填入此邀请码——13e39436
    DaoVoice
  3. 找到这段中的 app_id,以后会用到
    app_id
  4. 找到 /themes/next/layout/_partials/head.swig 这个文件,在这两段中间插入这段代码
    插入位置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {% if theme.daovoice %}
    <script>
    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/2e5d695d.js","daovoice")
    daovoice('init', {
    app_id: "theme.daovoice_app_id"
    });
    daovoice('update');
    </script>
    {% endif %}

    注意:将第三行后边的 //widget.daovoice.io/widget/2e5d695d.js 中js文件名改成自己的id就行(即2e5d695d改为自己的id);将第五行的 theme.daovoice_app_id 部分换为自己的id。

  • 新版 Next 优化:将以上代码直接粘贴到 source\_data\head.njk 中即可
  1. 主题配置文件 中添加以下代码
    1
    2
    3
    # Online contact
    daovoice: true
    daovoice_app_id: //这里填你刚才获得的 app_id
  2. 然后去 DaoVoice 控制台中的应用设置-聊天设置中进行个性化设置

4.设置 RSS 订阅

RSS 订阅是站点用来和其他站点之间共享内容的一种简易方式,即 Really Simple Syndication(简易信息聚合),使用这个东西就可以把自己写的博客推送给读者。

  1. 在 Git 中安装 hexo-generator-feed 插件
    命令为: npm install hexo-generator-feed --save
  2. 站点配置文件 中在最后一行写入以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Extensions
    feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
  3. 各参数的含义如下:
    1
    2
    3
    4
    5
    6
    7
    type:    RSS的类型(atom/rss2)
    path: 文件路径,默认是atom.xml/rss2.xml
    limit: 展示文章的数量,使用0或则false代表展示全部
    hub:
    content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
    content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
    content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,,防止从中间截断.
  4. 主题配置文件 中搜 rss,按以下设置即可开启 RSS 功能
    1
    rss: /atom.xml

5.添加网页标题崩溃欺骗搞怪特效

  • 该特效来自一位博主的教程。直达链接:查看链接
  • 旧版 Next 无法生效,新版 Next 将以下代码粘贴到 source\_data\footer.njk 文件中即可:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {# 崩溃欺骗 #}
    <script type="text/javascript">
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
    $('[rel="icon"]').attr('href', "/img/TEP.ico");
    document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
    clearTimeout(titleTime);
    }
    else {
    $('[rel="icon"]').attr('href', "/favicon.ico");
    document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
    titleTime = setTimeout(function () {
    document.title = OriginTitle;
    }, 2000);
    }
    });
    </script>

6.添加动态二次元人物

  1. Git 端安装 hexo-helper-live2d 插件
    命令为: npm install --save hexo-helper-live2d

  2. 站点配置文件 中添加以下代码,详细配置请参考 文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: true //控制开关
    scriptFrom: local //默认
    pluginRootPath: live2dw/ //插件在站点上的根目录(相对路径)
    pluginJsPath: lib/ //脚本文件相对与插件根目录路径
    pluginModelPath: assets/ //模型文件相对与插件根目录路径
    tagMode: false //标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false //调试, 是否在控制台输出日志
    model:
    use: live2d-widget-model-koharu //使用的模型名字
    display:
    position: right //放置位置
    width: 150 //调整宽度
    height: 300 //调整高度
    #hOffset: 0 //调整水平位置,如需要请去掉注释
    #vOffset: -20 //调整垂直位置,如需要请去掉注释
    mobile:
    show: true //是否在手机端显示,为了不影响观看效果,建议关闭该选项
  3. 下载模型,模型名称可以去 这里 参考,命令为:npm install live2d-widget-model-koharu

    live2d-widget-model-koharu 即为模型名字,只需修改这里就行,这个模型就是我当前博客正在使用的,请将目光移到左下角。

  4. 下载完成后,在 Hexo 的根目录新建一个名为 live2d_models 的文件夹,在 node_modules 文件夹中找到刚刚下载的 live2d 模型,并将其复制到刚刚新建的文件夹内

  5. 修改第3步的代码 use 段,将其改为你下载的模型名称即可

7.开启爱心点击效果

  1. themes\next\source\js\src\ 目录下新建 clicklove.js 文件,在其中添加以下代码:
    1
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  2. themes\next\layout\_layout.swig 文件末尾添加以下代码:
    1
    2
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/src/clicklove.js"></script>
  3. 目前无效,正在寻找解决方法
  4. 无效原因已找到:之前因为是将博客部署在了 Gitee 上,这个上边不显示,后来我把博客部署在了 Github 上,发现这个特效突然出现了,初步猜测是这个原因。

!!!新版 Next 设置

  • 只需要将以下代码粘贴到 source\_data\footer.njk 文件中即可(没有请新建):
    1
    2
    3
    4
    {# 页面点击小红心 #}
    <script type="text/javascript">
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
    </script>

8.修改文章内链接文本的样式

  • 打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件,在第一行 \\Custom styles 后边插入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if hexo-config("custom_css.post_body_a.enable")
    .post-body
    a:not(.btn){
    color: convert(hexo-config("custom_css.post_body_a.normal_color"));
    border-bottom: none;
    &:hover {
    color: convert(hexo-config("custom_css.post_body_a.hover_color"));
    text-decoration: underline;
    }
    }

    这里的 a:not(.btn) 是为了不影响首页的“阅读全文”按钮。这里,我们用了 hexo-config() 函数读取配置,用 stylus 的内建函数 convert() 转换成 stylus 需要的颜色格式。

  • 主题配置文件 的末尾填上如下代码:

    1
    2
    3
    4
    5
    6
    custom_css:
    # the style of post body link
    post_body_a:
    enable: true //是否开启
    normal_color: "#4D4DFF" //原始链接的颜色,这里是蓝色(颜色可自己修改)
    hover_color: "#fc6423" //鼠标经过时的颜色,这里是橙色(颜色可自己修改)
  • 新版 Next 优化:将第一段代码粘贴到 source\_data\styles.styl 文件中即可

9.修改文章底部标签前面的图标

文章下边标签的图标默认为 “#” 号,并不美观。通过修改代码可以改为比较好看的图标

  • themes\next\layout\_macro\ 文件夹下的 post.swig 文件中搜 rel="tag>#" ,将#号换为 <i class="fa fa-tag"></i> ,如下:

    1
    <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
  • 然后就换为比较美观的一个小图标了
    实用技巧

  • 新版 Next 优化: 主题配置文件 tag_icon 改为true即可

10.自定义代码块样式

  • 打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件,向里面加入以下代码(颜色可以自定义):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // Custom styles.
    code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
    }
    // 大代码块的自定义样式
    .highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
    }
    .highlight, code, pre {
    border: 1px solid #d6d6d6;
    }
  • 新版 Next 优化:将以上代码粘贴到 source\_data\styles.styl 文件中即可

11.隐藏网站底部的驱动信息

创建好博客后,页面底部会有“由Hexo强力驱动”字样,如果不想要这部分信息,可按以下操作进行

  • 打开 themes\next\layout\_partials\ 文件夹下的 footer.swig 文件,使用注释符号 <!-- 示例 --> 注释掉以下代码即可
    去除驱动

  • 新版 Next 只需要在 主题配置文件 footer 字段中的 powered 值改为 false即可

12.在网站底部添加访客量、总访问量

  • 主题配置文件 中搜 busuanzi_count,对相应参数进行修改即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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: <i class="fa fa-user"></i> 访客数 //前半部分为图标,后半部分为显示的文字
    site_uv_footer:
    # custom pv span for the whole site
    site_pv: true //是否开启统计总访问量
    site_pv_header: <i class="fa fa-eye"></i> 总访问量 //前半部分为图标,后半部分为显示的文字
    site_pv_footer:
    # custom pv span for one page only
    page_pv: false //是否开启博文阅读量
    page_pv_header: <i class="fa fa-file-o"></i> 阅读数 //前半部分为图标,后半部分为显示的文字
    page_pv_footer:
  • 新版更新如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Show Views / Visitors of the website / page with busuanzi.
    # For more information: http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: fa fa-user
    total_views: true
    total_views_icon: fa fa-eye
    post_views: true
    post_views_icon: far fa-eye

13.添加字数统计、阅读时长统计功能

  1. Git端安装 hexo-wordcount 插件,命令为:npm install hexo-wordcount --save
  2. 主题配置文件 中搜 post_wordcount,对相应参数进行修改即可
    1
    2
    3
    4
    5
    6
    post_wordcount:
    item_text: true
    wordcount: true #单篇 字数统计
    min2read: true #单篇 阅读时长
    totalcount: false #网站 字数统计
    separated_meta: true
  3. 如需修改显示格式,打开 themes\next\layout\_macro\ 文件夹中的 post.swig 文件,按下图修改即可
    字数统计
  • 新版已移除,推荐使用 symbols_count_time ,方法在下面

!symbols_count_time方法

  • 在 git 命令行执行以下代码:

    1
    2
    3
    4
    # 卸载原有依赖 不卸载对新插件有影响
    npm uninstall hexo-wordcount
    # 安装新依赖
    npm i hexo-symbols-count-time
  • 主题配置文件 中搜 symbols_count_time,对相应参数进行修改即可

    1
    2
    3
    4
    5
    6
    7
    symbols_count_time:
    # 换行显示字数统计和阅读时长
    separated_meta: true
    # 文章底部显示
    item_text_post: true
    # 博客底部显示 默认为false
    item_text_total: true
  • 站点配置文件 中可以设置显示哪些内容和一些统计维度(没有该字段自行添加即可):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    symbols_count_time:
    # 文章字数
    symbols: true
    # 阅读时长
    time: true
    # 总文章字数
    total_symbols: true
    # 阅读总时长
    total_time: true
    # 是否排除代码统计
    exclude_codeblock: false
    # 平均字长 即将多少个字符统计为1个字数
    awl: 4
    # 每分钟的字数 阅读速度
    wpm: 275
    # 统计单位 这里是分钟
    suffix: "mins."

14.用 LeanCloud 添加阅读次数统计功能

该功能在第十二点的 busuanzi 配置中已有,但其在博客首页并不显示,且不能管理相关博文的阅读量(我认为是缺点),所以我选择 LeanCloud。

  1. 先去 LeanCloud 官网注册。直达链接:查看链接
  2. 在控制台创建一个新应用,名称随便起,选开发版
    创建新应用
  3. 点击新创建好的应用的右上角,找到“应用key”选项,之后会用到这些信息
    应用key
  4. 点击存储-创建class,这里的 class 名称为了不出错,最好用 Counter
    创建class
  5. 在设置-安全中心-Web安全域名处填入自己的博客地址
    安全域名
  6. 主题配置文件 中搜 leancloud_visitors,修改相应配置为 true ,再把第三步的信息填入即可
    1
    2
    3
    4
    leancloud_visitors:
    enable: true
    app_id: #你的app_id
    app_key: #你的的app_key

15.设置文章置顶功能

  • 安装支持文章置顶的插件
    先移除旧插件,命令为:npm uninstall hexo-generator-index --save
    再安装新插件,命令为:npm install hexo-generator-index-pin-top --save

  • 设置置顶标志
    打开 themes\next\layout\_macro 目录下的 post.swig 文件,定位到 <div class="post-meta"> 字段,在该行下边加入以下代码:

    1
    2
    3
    4
    5
    6
    7
    {% if post.top %}
    <span class="post-meta-item-icon">
    <i class="fa fa-thumb-tack"></i>
    </span>
    <font color="red">置顶</font>
    <span class="post-meta-divider">|</span>
    {% endif %}
  • 新版 Next 不建议修改主题源文件,而是在数据文件中进行修改,方法如下:

    • source\_data\ 下打开 post-meta.njk 文件(没有则新建)
    • 在该文件中新增如下字段:
      1
      2
      3
      4
      5
      6
      7
      {% if post.top %}
      <span class="post-meta-divider" style="margin: 0 5px;"> | </span>
      <span class="post-meta-item-icon">
      <i class="fa fa-thumbtack"></i>
      </span>
      <font color="red" style="margin: 0 3px;">置顶</font>
      {% endif %}
  • 开启置顶功能

    • 想要某篇文章置顶,就去该篇文章的 Front-matter 中加入 top: true 字样。这里 true 可以换为数字,多篇文章置顶情况下,数字越大的越在最上边
    • Front-matter 即为每篇文章最前面部分,如下:
      1
      2
      3
      4
      5
      6
      title: 个人博客搭建入门教程
      date: 2019-01-26 23:31:51
      tags: 实用技巧
      categories: 博客搭建
      copyright: true
      top: true
  • 如果想要将 top 预置入 Front-matter 将前往这里

16.插入网易云音乐

(1).在侧栏中插入网易云音乐接口

  1. 打开 themes\next\layout\_macro 目录下的 sidebar.swig 文件,定位到 include '../_custom/sidebar.swig' 这一长串代码,在 </div> 下边加入这一段代码:
    1
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=86 height=86 src="{{ theme.background_music }}"></iframe>
  2. 如下图:
    sidebar添加网易云
  3. 打开网页端网易云音乐,找到你想要插的歌曲,进入播放页面点击“生成外链播放器”
    找歌
  4. 在这个界面找到框住的内容
    斜杠后内容
  5. 主题配置文件 中适当位置增加网易云入口
    1
    2
    # 侧栏网易云音乐链接
    background_music: //这里填写上一步红框中的内容,冒号后边有空格
  • 图片如下:
    添加网易云链接

(2).在文章中插入网易云链接

  1. 打开网页端网易云音乐,找到你想要插的歌曲,进入播放页面点击“生成外链播放器”
    找歌
  2. 将以下代码直接插入文章中即可
    修改播放器样式

    想要将歌曲改为歌单的请百度:怎么把自己的歌单做成外链

17.在文章底部增加版权信息

(1).NexT内置的Copyright功能

  • 主题配置文件 中 post_copyright,将 false 改为 true
    1
    2
    3
    4
    post_copyright:
    enable: true
    license: CC BY-NC-SA 3.0
    license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
  • 之后所有文章都会带有版权信息

(2).个性化配置版权信息

  1. themes\next\layout\_macro\ 目录下新建名为 my-copyright.swig 文件,向其中插入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    {% if page.copyright %}
    <div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

    <!-- JS库 sweetalert 可修改路径 -->
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
    </p>
    <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
    </div>
    <script>
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
    clipboard.on('success', function(){
    swal({
    title: "",
    text: '复制成功',
    icon: "success",
    showConfirmButton: true
    });
    });
    });
    </script>
    {% endif %}

    中间的标题、作者、时间,最后更新、原始链接、许可协议等都可以自己修改

  2. themes\next\source\css\_common\components\post\ 目录下新建名为 my-post-copyright.styl 文件,向其中插入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #b5b5b5;
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #a3d2a3;
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }
  3. themes\next\layout\_macro\post.swig 文件中,定位到 theme.wechat_subscriber.enabled 这里,在这一行上边插入以下代码:

    1
    2
    3
    4
    5
    {% if not is_index %}
    <div>
    {% include 'my-copyright.swig' %}
    </div>
    {% endif %}
  4. themes\next\source\css\_common\components\post\post.styl 文件的最后加入以下代码:

    1
    @import "my-post-copyright"
  5. 在博客数据文件的根目录下有 scaffolds\post.md 文件,在三条横线上边加入 copyright 即可(置顶 top 类似),如下:

    1
    2
    3
    4
    5
    6
    7
    title: {{ title }}
    date: {{ date }}
    tags:
    categories:
    description:
    top:
    copyright:
  6. 这样每篇新建的文章都有 copyright 了,如果想要开启版权信息,只要在 copyright 后面写上 true 即可,注意空格!

(3).新版Next优化

  • 新版 Next 不推荐直接修改主题源文件,所以可以按如下方法进行配置:

  • 打开 source\_data\post-body-end.njk 文件(没有请新建),将如下代码复制进去(可以自行修改):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    {% if page.copyright %}
    <div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
    <!-- JS库 sweetalert 可修改路径 -->
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ author }} 的个人博客">{{ author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> </p>
    <p><span>注意事项:</span>转载请保留原文链接及作者,请尊重作者的劳动成果</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
    </p>
    </div>
    <script>
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
    clipboard.on('success', function(){
    swal({
    title: "",
    text: '复制成功',
    icon: "success",
    showConfirmButton: true
    });
    });
    });
    </script>
    {% endif %}
  • 打开 source\_data\styles.styl 文件(没有请新建),将如下代码复制进去(可以自行修改):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #b5b5b5;
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #a3d2a3;
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }
  • 主题配置文件 中的 custom_file_path 字段中的这两个文件取消注释即可

  • 接着执行旧版的5、6操作即可

18.搜索服务

  • NexT 官网给出了四种搜索——Swiftype、微搜索、Local Search以及Algolia。直达链接:查看链接
  • 个人认为第三个即本地搜索比较方便一些,这里只说一下本地搜索的设置
  • 安装 hexo-generator-search 插件
    命令为:npm install hexo-generator-search --save
  • 安装 hexo-generator-searchdb 插件
    命令为:npm install hexo-generator-searchdb --save
  • 站点配置文件 最下边添加以下代码:
    1
    2
    3
    4
    5
    6
    #搜索功能
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  • 主题配置文件 中搜 local_search,将 enable 改为 true 即可
    1
    2
    3
    4
    5
    6
    7
    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

19.为博客添加背景图

可能有人会觉得博客背景太白并不怎么好看,可以通过以下方法来修改背景图

  • themes\next\source\css\_custom\custom.styl 文件中添加以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //背景图片相关
    @media screen and (min-width:1200px) {
    body {
    background-image:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover
    }
    #footer a {
    color:#eee;
    }
    }
  • 将你的背景图命名为 background.jpg 放入 themes\next\source\images\ 目录下,然后重新上传博客即可

  • 我这里上传无效,所以就把上面的url部分换成了图床外链(方法请百度),如下:

    1
    background-image:url(https://s1.ax1x.com/2020/10/15/0oUEQK.jpg);
  • 新版Next优化:只需要将以上的代码直接添加到 source\_data\styles.styl 文件里即可

20.隐藏首页部分文章(新版Next不支持)

有的时候我们并不想让某些文章出现在首页上,但在归档中还是可以找到的,这时就需要下方的方法了,该方法出自CSDN,转载请声明:原文

(1).修改主题的index.swig

  • 路径在 Hexo\themes\next\layout\index.swig
  • 将这段
    1
    2
    3
    4
    5
    6
    {% block content %}
    <section id="posts" class="posts-expand">
    {% for post in page.posts %}
    {{ post_template.render(post, true) }}
    {% endfor %}
    </section>
  • 改成
    1
    2
    3
    4
    5
    6
    7
    8
    {% block content %}
    <section id="posts" class="posts-expand">
    {% for post in page.posts %}
    {% if post.notshow != true %}
    {{ post_template.render(post, true) }}
    {% endif %}
    {% endfor %}
    </section>
  • 注意:上边在 for 循环中判断文章中的属性 notshow,如果不为 true 就打印出文章。所以在需要隐藏的文章 front-matter 中添加 notshow:true 就会隐藏。
  • !!!注意:最新版

(2).将notshow直接写入front-matter中

  • 打开你 Hexo 的根目录,找到 scaffolds 文件中的 post.md文件,并用 VScode,记事本等软件打开
  • 按下方的格式插入即可
    1
    2
    3
    4
    5
    6
    7
    8
    title: {{ title }}
    date: {{ date }}
    tags:
    categories:
    description:
    top:
    notshow:
    copyright:
  • 注意:notshow: 后面有一个空格

(3).进行设置

  • 如果需要在你的以前的文章中设置隐藏,打开你的那篇文章的 .md 文件,按我上方的格式插入并在后面表明true即可
  • 如果是新发表的文章,只要你进行过刚刚的设置,那么在你新建一个文档时,自动会补充 notshow 属性,你只要在后面填写 true 即可

21.网站底部添加已运行时间

  • 正在咕咕咕~ ~ ~

六、拓展配置

1.使用插件在文章中插入图片

  • 站点配置文件 中搜 post_asset_folder,将值改为 true

  • 安装 hexo-asset-image 插件
    命令为:npm install hexo-asset-image --save

  • 安装好后,只要你每次新建文章之时,在文章所在目录(即\source_posts)下会自动生成同名文件夹,只要把该篇文章中所需要的图片放在该文件夹内,然后在文章中使用 ![](该文件夹名字/图片名字) 即可在文章中插入该图片
    插入图片

2.使用图床在文章中插入图片

  • 使用图床外链插入图片链接
    优点:占用空间少,GitHub 的仓库容量仅有200M,使用图床可以减少空间的使用量
    缺点:图床一但被墙或关闭服务,可能会导致图片全部失效,所以建议将图片备份好,一旦图床失效,可以立即上传到其他图床上

  • 这里我使用的是 SM.MS 图床,点击这里跳转。该图床上传上去以后有多种格式选择,你如果需要在本博客中添加,直接选择 Markdown 即可,如下:
    Markdown图床.png

  • 然后在文章的适当位置插入 Markdown 语句即可,格式为:![图片名](图片链接)

3.首页页面优化

  • 本人不是太喜欢 Next 主题的默认样式,有一种死气沉沉的感觉,所以对首页进行了相关的优化

  • 本套配置基于 NexT 主题的 Gemini 的风格,主要包含了全局圆角化、文章透明、左上角颜色修改、去除网站顶部小黑条、手机端优化,可以自行进行修改,效果如下图:
    全局圆角.png

  • 打开 source\_data\styles.styl 文件(没有请新建),粘贴以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // 左上角分类栏相关修改
    // 修改背景颜色与手机端阴影
    .site-brand-container {
    background:none;
    border-radius: 15px;
    .site-nav-on & {
    +tablet-mobile() {
    box-shadow: none;
    }
    }
    }
    // 修改左上角标题颜色
    .site-brand-container .site-meta .brand{
    color: black;
    }
    .site-brand-container .site-meta .site-subtitle{
    color: gray;
    }
    // 修改手机端按钮颜色
    .site-nav-right .toggle, .site-nav-toggle .toggle{
    color: gray;
    }
    .site-nav-right .toggle .toggle-line, .site-nav-toggle .toggle .toggle-line{
    background: gray;
    }
    // 修改手机端顶部栏圆角
    .header-inner{
    background: rgba(255,255,255,.9);
    border-radius: 15px;
    }
    // 回到顶部圆角
    .back-to-top{
    border-radius: 15px;
    }
    // 去除首页文章与文章之间的背景色
    .main-inner{
    background: none;
    }
    // 消除顶部黑条
    .headband{
    background: transparent;
    }
  • 打开 source\_data\variables.styl 文件(没有请新建),粘贴以下代码:

    1
    2
    3
    4
    5
    // 修改圆角
    $border-radius = 15px;
    $border-radius-inner = 15px;
    // 修改背景透明度
    $content-bg-color = rgba(255,255,255,.9);
  • 主题配置文件 中的 custom_file_path 相应文件取消注释即可

4.数据文件功能设置

(1).介绍

  • 自从 NexT-7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。

  • 推荐先进行该步操作后再进行以上的选项配置

(2).next.yml(已废弃)

  • 老版本的 NexT 主题还提供了另一种配置方法,就是将主题配置放在 /source/_data/next.yml 文件. 此方法已弃用。
  • 如果 /source/_data/next.yml 文件存在,请删除它,然后下面两种方法二选一,这里是官方文档的解释

(3)._config.[name].yml方式

  • 好处:站点配置文件 主题配置文件 分离,便于设置
  • 版本:确保 Hexo 为5.0或更高版本
  • 要求:删除 /source/_data/next.yml 文件
  • 方法:
    • 在站点根目录创建 _config.[name].yml 文件,其中[name]字段为 站点配置文件 中 theme 字段内容
    • 主题配置文件 中的内容全部复制到上面的文件中
    • 重新上传博客即可应用以上配置

(4).theme_config方式

  • 好处:站点配置文件 主题配置文件 不分离,一个配置文件即可设置所有选项
  • 版本:确保 Hexo 为5.0或更高版本
  • 要求:删除 /source/_data/next.yml 文件
  • 方法:
    • 站点配置文件 的最下面追加 theme_config: 字段
    • 主题配置文件 中的内容全部复制到该字段下面
    • 将复制的所有内容全部向后缩进两个空格(VS Code的快捷键是选中之后按下 Ctrl + ] 即可快速缩进)
    • 重新上传博客即可应用以上配置

5.关于npm插件

  • 本文的配置中很多地方都通过 npm 命令进行了插件的安装,这里写一些相关知识

(1).安装

  • 全局与局部安装

    1
    2
    npm install xxx		//利用 npm 安装xxx模块到当前命令行所在目录
    npm install -g xxx //利用 npm 安装xxx模块到全局目录
  • 局部安装时将模块写入 package.json

    1
    2
    3
    npm install xxx				//安装但不将依赖写入 package.json 中
    npm install xxx –-save //安装并将依赖写入 package.json 的 "dependencies" 中
    npm install xxx -–save-dev //安装并将依赖写入 package.json 的 "devDependencies" 中

(2).卸载

  • 全局与局部卸载

    1
    2
    npm uninstall xxx      //删除xxx模块
    npm uninstall -g xxx //删除全局模块xxx
  • 局部安装时将 package.json 中内容删去

    1
    2
    3
    npm uninstall xxx				//删除模块但不删除留在 package.json 中的对应依赖
    npm uninstall xxx --save //删除模块同时删除留在 package.json 中 "dependencies" 下的对应依赖
    npm uninstall xxx --save-dev //删除模块同时删除留在 package.json 中 "devDependencies" 下的对应依赖

6.使用批处理命令部署博客

  • 虽然在上传 Hexo 博客时的命令只有3条,但是本着能懒就懒的原则,使用一个命令完成岂不美哉?

  • 在桌面新建一个 .txt 文档,将如下内容填写进去,使用时请把后面的注释去掉:

    1
    2
    3
    4
    @echo off					//关闭回显
    H: //切换到博客站点目录所在的盘符,我这里是H盘
    cd H:\Github-blog //进入站点目录,我这里是H:\Github-blog
    hexo clean&&hexo g&&hexo d //Hexo 命令一键部署
  • 保存以后将这个文件改名为 自动部署.bat ,双击即可执行

7.在博客中插入自己本地文件且不渲染

  • 在博客目录下的 source 目录中新建一个 demo 文件夹,并将自己的 HTML 本地网页存放在此处

    • 因为 source 目录在 hexo g 时会生成到托管网站的 /public 目录下
  • 在自己的博客文章中,使用如下两个例子进行引入,这里使用的是相对路径

    1
    2
    3
    4
    5
    6
    7
    [例子1](/demo/index.html)
    <a href="/demo/index.html">例子2</a>
    <a href="/demo/index.html" target="_blank">例子3</a>
    解释:
    例子1是使用了Markdown写法,直接在当前窗口打开该页面
    例子2是使用了HTML标签,直接在当前窗口打开该页面
    例子3是使用了HTML标签和target属性,此时在新的窗口打开该页面,不影响当前页面
  • 因为该页面是属性自己本地页面,不和博客同框架样式的,所以需要取消渲染

  • 打开 站点配置文件 ,找到 skip_render 字段,按如下格式,如果有多个文件换行对照写即可:

    1
    2
    skip_render:
    - 'demo/index.html'
  • 如果你进行了 hexo-neat 压缩,还需要在 neat_html 字段中,按如下填写(如果没有请无视):

    1
    2
    3
    4
    neat_html:
    enable: true
    exclude:
    - 'demo/index.html'
  • 重新执行 hexo clean && hexo g && hexo d 操作即可

七、问题集合

1.关于本地搜索框被置于最底层的问题

  • 之前在改变全局圆角的时候,因为考虑到背景图片问题,所以我顺便给每个部分设置了一个透明度,使用的是 opacity: 0.9; 这个属性,效果也十分显著
  • 但第二天我就发现,本地搜索框突然不能正常使用,具体表现为:点击搜索有反应,但弹出的搜索框却被置于了网页的最下面一层,且无法进行点击
  • 在我查了一下 GitHub 的 issue 时(点这里查看),发现原来是因为 opacity 的原因,把这个注释掉就好了,但这样就不可以实现透明效果了,所以你可以这样做:
  • 在 background-color 处使用 rgba 来实现,如下:
    1
    2
    background-color: rgba(255,255,255,.8);
    //前面三个值为你的颜色的rgb值,后面那个值是透明度,值为0-1中间的数

2.关于错误代码问题

(1).Template render error

  • 在执行 hexo g 的命令时提示该代码
  • 经过排查,发现是由于我写的一篇 md 文档导致的,说明里面有部分特殊符号被网页进行了解析
  • 如下图,这里的 import 标签我虽然用的单行代码引用的方法,但被浏览器解析了,而换成代码块的方式,就不会出现错误了
    代码问题01 .png

(2).FATAL Port 4000 has been used

  • 在执行 hexo -s 的命令时提示该代码

  • 经过排查,是因为我在上次执行该命令时没有及时终止进程导致的,按如下步骤杀死进程即可成功执行

  • 在 Windows 命令行窗口分别执行如下命令:

    1
    2
    3
    netstat -ano						// 查看系统当前所有窗口占用状况
    netstat -ano | findstr "4000" // 查看4000端口被哪个应用占用
    tasklist | findstr "进程id号" // 通过id查找对应的进程名称
  • 注意:如果此时进程名称为 node.exe 即代表是因为 hexo -s 命令没有终止导致的。如果显示为其他名字,代表是其他软件端口与 hexo 的端口冲突,此时应该更换 hexo 端口号,方法自行百度

  • 确认进程名称为 node.exe 时执行如下命令:

    1
    taskkill /f /t /im "进程id或者进程名称"		// 杀掉当前进程
  • 然后再执行 hexo -s 即可成功打开博客了

3.关于git bash无法终止hexo s

  • 在 Windows 的 cmd 窗口执行该命令即可:taskkill /F /IM node.exe

4.关于博客整体的升级问题

  • 升级之前最好查看下 Node.js 、Hexo、Next 之前的版本匹配问题
  • 这里是官方给的版本对照图:
    Hexo 版本最低兼容 Node.js 版本
    5.0+10.13.0
    4.1 - 4.28.10
    4.08.6
    3.3 - 3.96.9
    3.2 - 3.30.12
    3.0 - 3.10.10 or iojs
    0.0.1 - 2.80.10

(1).NodeJS升级

  • Windows 可直接下载最新稳定版并安装

  • 更新 npm 使用以下命令:

    1
    2
    npm -g install npm ( 官方最新稳定版 )
    npm -g install npm@6.1.0 ( 自己需要的版本 )
  • 此时可通过执行如下命令查看 Node.js和npm 是否更新成功

    1
    2
    node -v
    npm -v

(2).Hexo升级

  • 在博客的目录下执行以下命令:

    1
    2
    3
    4
    5
    6
    7
    8
    npm install hexo-cli -g			//全局升级hexo
    npm install -g npm-check //安装npm-check
    npm-check //查看系统插件是否需要升级
    npm install -g npm-upgrade //安装npm-upgrade
    npm-upgrade //更新package.json
    //在执行npm-upgrade命令后会要求输入yes或者no,直接输入Yes或Y即可
    npm update -g //更新全局插件
    npm update --save //更新系统插件
  • 此时可通过执行如下命令查看 Hexo 是否更新成功

    1
    hexo -v

(3).Next升级

  • 若你的主题版本很老,建议对自己的主题文件夹进行备份

  • 在博客根目录打开 git bash 窗口,输入以下命令(next-8.4.0可以自行更改):

    1
    git clone https://github.com/next-theme/hexo-theme-next themes/next-8.4.0
  • 在主题配置文件中更换主题为 next-8.4.0

(4).更新后的问题

a).博客主页无法进入且乱码

  • 报错信息为:

    1
    {% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}
  • 原因为:
    hexo 在5.0之后把 swig 给删除了,此时需要自己手动安装

  • 修改如下:

    1
    npm i hexo-renderer-swig

b).博客主页的首页跳转404

  • 报错信息为:
    点击首页等导航时链接地址为:https://xxx.github.io/%20,且跳转到404页面

  • 原因为:
    所有导航路径后都有 %20,%20 代表空格,而这个一部分又是 next 主题中生成的,只要将主题配置文件里 || 之前所有的空格删掉即可

  • 修改如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
    home: /|| home
    about: /about/|| user
    tags: /tags/|| tags
    categories: /categories/|| th
    archives: /archives/|| archive
    #schedule: /schedule/ || calendar
    #sitemap: /sitemap.xml || sitemap
    #commonweal: /404/ || heartbeat

c).页面特效失效

  • Next 主题从6.0版本开始就移除了原本关于页面特效的一部分依赖(可比对next/soure/lib下文件),导致新版本无法直接生效相关配置,如果需要安装可以在 theme-next 仓库中搜索主题字段并按文档安装

  • 主题有:canvas_nestthree_wavescanvas_linescanvas_sphere

  • 这里以 Windows 环境下配置 canvas_nest 为例:

    • hexo/source/_data 下创建 footer.swig 文件(如果有则追加内容):

      1
      <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
    • 修改主题配置文件中的如下字段:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      # Define custom file paths.
      # Create your custom files in site directory `source/_data` and uncomment needed files below.
      custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      #style: source/_data/styles.styl

d).网站语言问题

  • 官方将中文的语言命名由 zh-Hans 改为了 zh-CN
  • 站点配置文件 中修改语言字段:
    1
    language: zh-CN

e).字体大小问题

  • 更新至新版以后字体默认大小比原先大了些,需要调整可以在 font 配置下进行修改,如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    font:
    enable: true
    # 字体地址
    host:
    # 正文字体
    global:
    # 拓展字体库,设置为 true 将从hosts中加载字体
    external: true
    # 字体族
    family: Lato
    # 大小:size=1 为默认大小,0.8将缩小为80%
    size: 0.9
    title:
    external: true
    family:
    size:
    # 正文标题字体大小
    headings:
    external: true
    family: Lato
    size:
    posts:
    external: true
    family:
    codes:
    external: true
    family:

八、该系列文章