Hexo + NexT 主题美化 (NexT v7.2.0)

博主的金玉良言: 关于博客的样式, 自己感觉差不多就行了, 这真的是一个无底洞! 尤其是当你像我一样有强迫症的时候, 这也想要, 那也想要, 哇, 那滋味, 别提多酸爽了!

更换主题

说实话, 默认的 Hexo 主题我认为不好看, 所以我就上网搜索 Hexo 好看的主题, 最后发现, 最受欢迎的, 也是用的人最多的就是 NexT 主题了. 但是我想了一下, 既然用的人最多, 那么撞车的几率不就很高吗, 那样就没有 独一无二 的感觉了, 所以我坚决不用! ~~真香! ~~

其实用 NexT 主题是有很大的一个优势的, 因为用户多, 所以教程资料好找啊, 一找一大片, 不像我之前用的 Shana 和 Gal 主题, 教程? 不存在的!

在 NexT 项目地址 2018 处可以找到 NexT 主题. hexo-theme-next 就是主题项目, 其他的是 NexT 主题的插件项目. 进入 hexo-theme-next 项目, 里面详细说明了如何安装, 启用主题, 这里不再赘述.

NexT 项目地址

• 2014-2017 https://github.com/iissnan/hexo-theme-next

• 2018-2019 https://github.com/theme-next/hexo-theme-next

• 2020-NOW https://github.com/next-theme/hexo-theme-next

注 我在使用 NexT 主题之前, 也使用过几个其他的主题, 在这里也和小伙伴们说一下, 都是比较偏二次元风的, 毕竟我的网站名就是 "二次元游宅客" 嘛, 不过最后还是觉得太花里胡哨不好, 眼睛疼!

• 萌娘 Gal
• 灼眼的夏娜 Shana
• 埃罗芒阿老师 Sagiri

知识预备

Hexo 博客的配置文件有两个, 站点配置文件 和 主题配置文件, 站点配置文件在博客根目录中

F:\WorkSpace\HexoBlog\_config.yml

主题配置文件在相应的主题文件夹中

F:\WorkSpace\HexoBlog\themes\next\_config.yml

自定义站点配置文件

我们之前创建的本地博客只有一个空的模板, 还没有进行自定义, 下面我们来设置一下我们博客的标题, 副标题, 描述等等.

打开本地博客根目录下的 _config.yml 文件, 这个文件就是网站的配置文件.

下面是基础设置的介绍:

属性	含义	本人设置
Title	网站标题	二次元游宅客
Subtitle	网站副标题	Sword Art Online
Description	网站描述	一个热爱二次元和游戏开发的宅极客!
Author	您的昵称	Kuroha
Language	网站语言	zh-CN
Timezone	网站时区

• Timezone: 留空的话, Hexo 会使用本地电脑的时区和时区列表.
• Description: 用于 SEO（搜索引擎优化）, 告诉搜索引擎一个关于你博客的简单描述, 通常建议在其中包含网站的关键词.
• Author: 显示博客中文章的作者.
• 含义部分是常见的解释, 不同的博客主题或许会有不同的用法, 具体见你使用的网页主题的简介.

根据自己的情况修改上面的设置即可.

修改 theme的值为: next, 即可启用 NexT 主题. 前提是你已经安装了. ~~这不废话吗! ~~

自定义主题配置文件

其实默认的 NexT 主题就已经很漂亮了, 不过呢, 为了实现更好的效果, 下面我们就开始 NexT 主题的美化.

开启自定义 swig 文件功能

将 custom_file_path: 属性下面的值全部取消注释, 并且在网站根目录下的 source 文件夹中新建 _data 文件夹, 注意不是在主题根目录下的 source 文件夹中新建. 之后在 _data 文件夹中将对应的所有文件全部手动创建好(因为不会自动创建). 之后如果要自定义样式, 直接修改这些文件就行了.

开启 RSS 订阅

首先安装依赖: npm install --save hexo-generator-feed

在主题配置文件中搜索 rss 设置为: rss: /atom.xml

设置地址栏的 Favicon 图标

在主题配置文件中, 搜索: favicon 属性, 修改为自定义值, 下面是我的设置:

favicon:
  small: /images/sao-16x16.png
  medium: /images/sao-32x32.png

之后根据你的设置, 在主题的 Source/images 文件夹中添加相应的文件即可.

[注] 文件名和后缀要和配置文件中的保持一致

博客网站页脚设置

找到 footer 属性, 修改为自定义值, 下面是我的设置:

footer:
  since: 2019
  icon:
    # 效果: 一颗跳动的小红心
    name: heart
    animated: true
    color: "#ff0000"
  copyright:
    # 效果: 由 Hexo 强力驱动
  powered:
    enable: true
    version: true
  theme:
    # 效果: 主题-NexT
    enable: true
    version: true
  beian:
    # 效果: 显示备案
    enable: false
    icp:

在文章末尾添加创作协议

在主题的配置文件中, 搜索: creative_commons, 修改为自定义值, 强烈建议修改前阅读: 知识共享许可 , 下面是我的配置, 建议使用 by-nc-sa

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

添加 Github 快捷关注

在主题的配置文件中, 搜索: github_banner, 修改为自定义值, 如下:

github_banner:
  enable: true
  permalink: https://github.com/KurohaKirito
  title: Follow me on GitHub

添加社交链接

在主题的配置文件中, 搜索: social, 修改为自定义值, 如下:

social:
  Telegram: https://t.me/****** || telegram
  Steam: https://steamcommunity.com/profiles/******/ || steam
  E-Mail: mailto:******@***.com || envelope
  GitHub: https://github.com/****** || github

social_icons:
  enable: true # 是否显示社交链接的图标
  icons_only: false # 是否仅显示图标
  transition: false

**transition: false 说实话, 这个设置我也不知道有什么用! 有知道的请务必告知, 感谢! **

添加友情链接

在主题配置文件中搜索: links_icon, 修改为自定义值, 如下:

links_icon: link
links_title: 友情链接
links_layout: inline
links:
  ShyArcher: https://shyarcher.github.io/
  Noah: https://noahapps.github.io/

注: 这个地方也可以作为 "推荐阅读" 功能使用.

网站头像设置

在主题配置文件中, 搜索: avatar, 修改为自定义值, 如下:

avatar:
  url: /images/sao-avatar.png # 头像路径
  rounded: false # 头像是否显示为圆形
  rotated: true # 鼠标经过头像时, 头像是否旋转

给文章添加目录

在主题配置文件中搜索: toc, 修改为自定义值, 如下:

toc:
  enable: true
  number: true # 是否自动编号
  wrap: true # 标题过长时, 是否换行, 建议开启, 不换行的话有些字就看不见了
  expand_all: true # 标题是否完全展开
  max_depth: 10 # 标题最大级数

注: wrap 属性还是要解释一下, wrap 设置为 true, 那么当标题过长时, 在目录那里会进行自动换行, 但是如果设置为 false, 那么过长的部分就会用 ... 省略掉! 所以还是设置为 true 吧.

侧边栏属性设置

在主题配置文件中搜索: sidebar, 修改为自定义值, 如下:

sidebar:
  position: left # 侧边栏显示在左边还是右边
  width: 280 # 侧边栏宽度
  display: post # 侧边栏显示模式, 只有在"Muse"和"Mist"风格下有效
  offset: 10 # 侧边栏和文章页面之间的间隙, 只有在"Pisces"和"Gemini"风格下有效
  onmobile: true # 是否在手机页面上显示, 只有在"Muse"和"Mist"风格下有效

阅读进度百分比显示

在主题配置文件中搜索: back2top, 修改为自定义值, 如下:

back2top:
  enable: true
  sidebar: true # true: 将按钮显示在侧边栏, false: 将按钮显示在左下角或者右下角, 取决于侧边栏的位置
  scrollpercent: true # 是否显示百分比

添加预计阅读时间功能

NexT 主题默认没有安装这个功能所需的依赖, 所以我们要先安装依赖: hexo-symbols-count-time

安装方法 Github 上已经说得很明白了, 这里不再赘述.

在主题配置文件中搜索: symbols_count_time 修改为自定义值, 如下:

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
  suffix: mins.

文章底部标签前添加图标

在主题的配置文件中搜索: tag_icon 设置为 true

tag_icon: true

~~话说, 之前版本总是没有这个设置好吧, 每次都要自己添加, 哼! ~~ 这个版本终于有了!

在文章底部添加打赏

在主题的配置文件中搜索: reward_settings 修改为自定义值, 如下:

reward_settings:
  enable: true
  animation: false # 关闭抖动动画
  comment: 您的支持将鼓励我继续创作!
reward:
  alipay: /images/alipay.png

添加最受欢迎文章功能

也可以作为 推荐阅读 功能使用.

NexT 主题默认没有安装这个功能所需的依赖, 所以我们要先安装依赖: hexo-related-popular-posts

安装方法 Github 上已经说得很明白了, 这里不再赘述.

在主题的配置文件中搜索: related_posts 修改为自定义值, 如下:

related_posts:
  enable: true
  title: 推荐阅读
  display_in_home: false # 是否在首页摘要处显示
  params:
    maxCount: 5
    PPMixingRate: 0.0
    isDate: false # 是否显示日期
    isImage: false # 是否显示图片
    isExcerpt: false # 是否显示摘要

代码高亮风格设置

第一步: 在站点配置文件中搜索: highlight, 将 auto_detect 设置为 true, 如下:

highlight:
  enable: true # 开启高亮
  line_number: true # 开启标注行号
  auto_detect: true # 开启自动检测
  tab_replace:

第二步: 在主题配置文件中搜索: codeblock 修改为自定义值, 如下:

codeblock:
  highlight_theme: night eighties # 代码高亮风格
  copy_button:
    enable: true # 是否显示 "复制" 按钮
    show_result: true # 是否显示 "复制成功"
    style: mac # 代码框风格

第三方服务设置

NexT 主题支持很多第三方服务, 但是默认都没有安装相应的依赖, 所以大部分设置都要先安装相应的依赖才行.

添加图片浏览功能

NexT 主题默认没有安装这个功能所需的依赖, 所以我们要先安装依赖: theme-next-fancybox3

在主题的配置文件中搜索: fancybox 修改为 true, 如下:

fancybox: true

下面是测试图片, 鼠标点击图片就会进入图片浏览模式.

添加 lazyload (懒加载)

Lazyload 能够让网页只加载在电脑屏幕显示范围内的图片, 让范围外的图片暂时不加载, 来加快网页加载速度.

NexT 主题默认没有安装这个功能所需的依赖, 所以我们要先安装依赖: theme-next-lazyload

在主题的配置文件中搜索: lazyload 修改为 true, 如下:

lazyload: true

添加阅读进度条

还是老步骤, 安装依赖: theme-next-reading-progress

在主题配置文件中搜索: reading_progress, 修改为自定义值, 如下:

reading_progress:
  enable: true
  color: "#37c6c0" # 进度条颜色
  height: 5px # 进度条宽度

注 如果你部署后发现没有效果, 可以试试将宽度调整为 50px, 你就能看到效果了, 之后记得再将宽度改回去.

添加评论系统

NexT 支持很多第三方评论系统: Disqus, 畅言, Valine, LiveRe (来必力), Gitalk.

Disqus: 不采用, 因为不支持 Markdown 啊喂! 这让人怎么优雅地发评论啊!

畅言: 不采用, 因为需要 备案 啊喂! 我一个 "个人博客网站" 备啥案啊! 而且还要手机号验证! 喂! 我就不能匿名评论吗? 话说, 你怎么也不支持 Markdown 啊喂!

LiveRe: 同样需要登陆啊喂! 我就不能匿名评论吗? 话说, 你好像也不支持 Markdown 啊喂!

Gitalk: 使用 issue 来实现评论功能, 话说我不推荐这种方式! 虽然它支持 Markdown.

Valine: **支持 Markdown ! ** **支持 Markdown ! ** **支持 Markdown ! ** **支持匿名! ** **支持匿名! ** **支持匿名! ** 也支持图片评论.

所以我采用 Valine 作为我的评论系统.

Q: Valine 支持图片? 我怎么没找到发图片的按钮? 博客主, 你这不骗人嘛!
A: 大哥! Valine 不是支持 Markdown 嘛, 那你告诉我它不支持图片? 你就不能使用 Markdown 语法来显示图片吗? !

想详细了解 Valine 的朋友们可以点击这里: Valine 中文官方文档 !

在主题配置文件中搜索: valine 修改为自定义值, 如下:

valine:
  enable: true
  appid: ******
  appkey: ******
  notify: true # 谁得到新回复时, 谁就会有邮件提醒, 建议开启, 对博客主和来访者都有好处.
  verify: true # 评论前是否有验证码验证.
  placeholder: ヾﾉ≧∀≦)o来啊, 快活啊! # 评论框提示语句.
  avatar: retro # 匿名评论者的用户头像.
  guest_info: nick,mail,link # 用户选填信息: 昵称, 邮箱(要填写 Gravater 的账号邮箱地址), 个人网站地址.
  pageSize: 10
  language: zh-cn
  visitor: false # 文章阅读数统计, 建议不要使用, 后面会使用不蒜子统计来实现文章阅读数统计功能.
  comment_count: true # 评论数统计.

获取上面代码所需的 appid 和 appkey

Valine 的评论数据其实是保存在 LeanCloud 上面的, 这里所需要的 appid 和 appkey 其实都是 LeanCloud 网站上的, 所以我们要先注册一个 LeanCloud 账号, 点击这里: LeanCloud 官网, 不过呢, 从 2019-07-15 开始就需要实名认证了, 这个比较烦, 不过没办法, 忍忍吧, 10 分钟左右就认证好了, 当然如果你脸黑 · · · 呃 · · · 就当我什么也没说!

Q: 话说回来, 你怎么不早说需要实名认证啊!
A: 如果我提前说了, 那你还会用 Valine 吗?

完成实名认证之后, 就可以新建应用了, 名字呢无所谓, 也支持中文, 起一个你喜欢的名字吧!

创建完应用之后, 点击应用右上角的 齿轮 标记, 进入设置页面, 再次点击左下角的 "设置", 之后点击 "应用 Key", 就会出现 App ID 和 App Key 了.

然后填写到主题配置文件的相应位置就可以了, 是不是很简单? !

2019-12-20 更新:

所以我采用 Valine 作为我的评论系统.

すみません, ほんどにすみません!

今天我发现 Leancloud 的使用现在要绑定域名, 而绑定域名需要备案......(可是我真的不想备案啊~ 因为在我的心中网络世界是不同于现实世界的另一个新世界, 那里充满幻想, 充满热爱, 可以以自己最喜欢的样子去生活, 所以为什么我还要继续使用现实世界的身份啊? ) 所以经过综合考虑, 我换用了 Gitalk !

使用 Gitalk 评论系统

简介: Gitalk 是使用 Github 中的 Issues 功能实现的评论系统, 我之前之所以说不推荐使用这种方式, 是因为这种方式有滥用 Github 的嫌疑, 不过有人问过 Github 官方, 官方也回应了说这样不算违反用户协议, 就是说这样用官方也是默许的.

1. 首先去自己的 Github 上新建一个 Repository, 并开放 Issues 功能. (其实这个是默认开放的) 名字写一个自己比较容易记住的名字即可. 我起的名字是: MyBlogCommentSystem (感觉好中二)

2. 之后新建一个 Application, URL 就填写你的域名即可, 应用名称, 描述什么的按喜好填写.

3. 填写 Next 的主题配置文件, 下面是我的配置:

gitalk:
  enable: true
  github_id: Github 用户 ID (注意大小写)
  repo: 仓库名称 (注意大小写)
  client_id: 之前创建的 Application Client ID
  client_secret: 之前创建的 Application Client Secret
  admin_user: Github 用户 ID (注意大小写)
  distraction_free_mode: true
  language:

4. 最后去每篇博客的评论区部分, 登录自己的 Github 账号来初始化 Issues 即可使用 Gitalk 评论系统.

去掉侧边栏的虚线

说到这个, 就得提到博客的 "即时聊天功能" 了, 我知道的有: DaoVoice, Tidio, Chatra 这三个. 点击即可进入官网.

这三个我都用过, 不过就用了几天, "高级版免费试用" 还是有剩余时长的. 有一点点副作用, 就是博客加载时间会变长, 有卡顿感, 说到卡顿, 不得不说的就是这个项目了: live2d_demo (一个会说话, 会换装, 能拖动的看板娘). 由于我没有服务器哈, 没办法自己搭建 API 服务器, 就使用的原作者的 API 服务器, 但是你想嘛, 肯定有很多很多人都在用原作者的 API 服务器啊, 所以速度上嘛 · · · 唉, 别提了, **太慢了! ! ** 不过我还能接受, 因为 ~~~ 开源啊! ! ! 免费啊! ! ! 对吧? !

我: 哎! 哎! 别打我! 我错了我错了!
看板娘: 谁让你说我主人坏话的! 哼😕!

咱们作为使用者(白嫖者), 要有良心的对吧? 感谢 fghrsh 大佬🙏!

拓展: 和 看板娘 类似的还有一个, 叫做 伪春菜, 有兴趣的小伙伴可以自行搜索了解.

哎, 刚才说到哪了? 因为这四者 (DaoVoice, Tidio, Chatra, live2d) 都会让博客的加载时间变长, 而且前三者是 **收费的! 收费的! 收费的! ** (我指的是高级版本, 基础版本都是免费的) 所以到底用还是不用, 就要看各位自己的判断了, 我推荐呢, 各位试用一下, 过过瘾就行了🤣! 感觉即时聊天还不如在简介或者关于页面挂上自己的 QQ, 微信, Telegram 来得实在.

所以呢我并没有使用这个即时聊天功能, 侧边栏的聊天图标我也关闭显示了, 又因为我使用的是 Gemini 风格, 这就导致侧边栏处出现了 **一道虚线, 一道虚线! , 一道虚线! ! ** (终于说到重点了, 之前的废话全是说明这一条虚线出现的原因, 哈哈) 之所以我要强调, 是因为我可是连一丁点前端基础都没有啊! 这个东西折磨了我好久好久, 还好我也是一只程序猿, 耐心什么的, 还不跟玩似的!

有想要添加 即时聊天功能 的小伙伴可以从目录那里找到相关部分说明的位置坐标, 精准定位.

经过好长好长一段时间的折腾, 其实就是一个 F12 (原谅我真的一点前端知识都没有), 终于被我找到了解决办法:

在 themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件中, 搜索: feed-link, 可以找到如下代码:

.feed-link, .chat {
  border-top: 1px dotted $grey-light;
  border-bottom: 1px dotted $grey-light;
  text-align: center;
  ······
  省略
  ······

其中的 border-top 和 border-bottom 就是虚线了, 将 1px 修改为 0px 就可以了, 这样虚线就消失了!

随便建议大家把这个也改了:, 找到 themes\next\source\css\_common\components\sidebar\sidebar-author-links.styl 搜索: links-of-author, 将 margin-top 修改为 0px 这样侧边栏社交链接上面的空隙就消失了!

文章分享功能

NexT 主题集成的分享有3种: Add-this, Likely, NeedMoreShare2

• add-this: 不知道为什么, 在 NexT 7.2.0 版本中, 无论我怎么设置, 就是无效, 没有任何效果, F12 控制台也没有报任何错误! 很烦! 而且还要注册账号!
• Likely: 推荐使用, 因为可以分享 Telegram, 哈哈, 必须用啊! 不用注册账号!
• NeedMoreShare2: 不推荐, 它的样式我也不怎么喜欢, 弃用.

在主题配置文件中搜索: likely 修改为自定义值, 如下:

likely:
  enable: true
  look: big
  networks:
    twitter: Tweeter
    facebook: Facebook
    linkedin: LinkedIn
    telegram: Telegram
    whatsapp: WhatApp

搜索引擎收录

先要判断一下自己的博客是否已经被百度谷歌等搜索引擎收录, 在搜索栏中按下面的格式输入: site:域名 比如我检测的时候就是这样写: site:kuroha.vip 如果能搜索到自己的博客网站, 就说明已经收录了, 相反就是没有收录. 话说, 一个新站, 一上来就被搜索引擎收录, 这可能吗?

百度搜索

大概 1 年前, 就是 2018 年, 那时候将网站提交到百度是不用注册一个叫做 "熊掌ID" 的东西的, 但是现在不行了, 百度强制用户只有绑定了 "熊掌ID" 之后, 才能开始使用站长之家, 否则什么功能也用不了, 你没看错, 什么也做不了! 所以我就去注册个 "熊掌ID" 试试, 然后我看到了这个: 🤔

于是我默默地将鼠标移动到了浏览器的标签页上, 按下了鼠标中键! 拜拜了您嘞!

如果有小伙伴就是想让百度收录自己的博客, 请参考: 栾铸显的博客

谷歌搜索

让谷歌搜索收录自己的博客就简单多了. 前提: 你能用 Google Search

进入 Google 站点服务平台 , 注册登录, 点击 "添加资源", 选择 "网址前缀", 默认的验证方法是 "HTML 文件", 这个方法不适用于解析网址. 比如我的域名 "kuroha.vip" 就是解析到 Github Pages 上的, 所以这个方法不适用, 而且我也不推荐用这个方法. 点击 "HTML文件" 这四个字的位置, 你会发现刚才的页面折叠起来了. ~~因为我之前弄的时候就卡在这里了, 死活找不到其他方法在哪里. 笨, 没办法. ~~ 选择 "HTML 标记" 这个方法, 复制 content 后面的内容, 不要复制 引号. 之后打开主题配置文件, 搜索: google_site_verification, 将你刚才复制的一串字符粘贴上就可以了.

google_site_verification: xxxxxx99uVjXfXzFHr0M_2lKQ1z_jDOlFl4-6xxxxxx

文章底部打分功能

在主题配置文件中, 搜索: rating, 修改为自定义值, 如下:

rating:
  enable: true
  id: *****
  color: fc6423

• 去这个网站注册账号, 填写网站信息, 获取 id.
• 颜色可以自定义修改.
• 个人建议这个功能可以弃用了, 因为访客想要给文章评分的话, 也是要注册账号并登陆的, 试想一下, 有哪个访客会为了打一个没有什么意义的评分而去注册账号呢?

不蒜子统计

在主题配置文件中, 搜索: busuanzi_count, 修改为自定义值, 如下:

busuanzi_count:
  enable: true
  total_visitors: true # 站点总访问人数
  total_visitors_icon: user
  total_views: true # 站点总浏览次数
  total_views_icon: eye
  post_views: true # 单篇博客浏览次数
  post_views_icon: eye

本地搜索功能

本地搜索功能需要安装依赖: 这里!

在主题配置文件中, 搜索: local_search, 修改为自定义值, 如下:

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false

即时聊天功能

Next 主题配置文件中直接支持的有 Chatra 和 Tidio, 两者的使用方法基本相同, 先到官网注册账号, 他们的官网分别是 Chatra 和 Tidio, 之后在他们的网站上填写上自己的网站信息, 聊天窗口的外观也可以自己定义.

准备工作准备好了之后, 在账号设置中获取 id 和 Key, Chatra 中使用的标识码就做 id, Tidio 使用的标识码叫做 Key, 填写到主题配置文件中, 并将 enable 设置为 true 即可.

博客背景动画效果

在主题配置文件中, 搜索: canvas_nest, 修改为自定义值即可.

Next 中自带三种背景动画, 下面是效果预览:

下面是我的设置:

canvas_nest:
  enable: false
  onmobile: true
  color: "0,0,255"
  opacity: 0.5
  zIndex: -1
  count: 99

three:
  enable: false
  delay: false
  three_waves: true
  canvas_lines: true
  canvas_sphere: true

canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1

博客加载进度条

在主题配置文件中, 搜索: pace, 修改为自定义值即可. 如果要用的话个人推荐 loading-bar 主题, 但是个人建议不要使用, 因为这样会给用户一种博客加载时间特别长, 博客很卡的感觉.

这是我的配置: (很显然, 我已经禁用了)

pace:
  enable: false
  theme: loading-bar

博客在加载的时候, 一般是先加载文章, 之后加载附加功能, 像: Live2D, 音乐播放器, 即时聊天服务等. 所以不使用进度条的话, 在加载完文章后, 访客就可以开始浏览文章了, 这时后台再继续默默加载附加功能. 但是进度条是在博客完全加载完成后才会消失的, 所以, 如果使用了进度条功能, 访客就要继续等待, 直到附加功能也完全加载完毕才能开始浏览博客......我想如果我是访客, 我直接就切换标签页, 去逛别人的博客去了.

手动添加华丽效果

看板娘 Live2D

第一种: hexo-helper-live2d 优点: 有声音, 缺点: 无法换装, 无法换模型, 响应事件少.

使用方法见官方网址: hexo-helper-live2d

第二种: live2d-widget 优点: 能换装, 能切换模型, 响应事件多, 缺点: 无声音, 配置较复杂. (现在可能已经有声音了)

使用方法见官方网址: live2d-widget

第三种: live2d_demo 优点: 能换装, 能切换模型, 响应事件多, 缺点: 无声音, 配置较复杂. (现在可能已经有声音了)

使用方法见官方网址: live2d_demo

音乐播放器 Aplayer

Aplayer 源码地址: APlayer

首先, 在 next/source/lib 目录下新建 aplayer 文件夹, 之后下载项目源码并解压, 将 APlayer.min.js 和 APlayer.min.css 文件复制到 next/source/lib/aplayer 中.

再之后, 继续在当前目录下新建一个 music.js 文件, 输入以下代码:

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: '歌曲的名字',
        artist: '歌手',
        url: '音乐文件的地址',
        cover: '封面图片的地址',
      }
    ]
});

之后修改 themes/next/layout/_layout.swing 在文件最后添加:

<!--Aplayer 音乐播放功能-->
{% if theme.aplayer %}
  <link rel="stylesheet" href="/lib/aplayer/APlayer.min.css">
  <div id="aplayer"></div>
  <script type="text/javascript" src="/lib/aplayer/APlayer.min.js"></script>
  <script type="text/javascript" src="/lib/aplayer/music.js"></script>
{% endif %}

最后在 主题配置文件 中, 找一个自己喜欢的位置, 写入 aplayer: true. 什么时候想要关闭这个功能了, 直接设置为 false 即可.

鼠标红心效果

在 themes/next/source/js/src 下创建 love.js 文件, 粘贴以下内容:

!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);

之后修改 themes/next/layout/_layout.swing 在文件最后添加:

<!--页面点击小桃心-->
{% if theme.love %}
  <script type="text/javascript" src="/js/love.js"></script>
{% endif %}

最后在 主题配置文件 中, 找一个自己喜欢的位置, 写入 love: true. 什么时候想要关闭这个功能了, 直接设置为 false 即可.

页面标题欺诈

在 themes/next/source/js/ 下创建 crash_cheat.js 文件, 粘贴以下内容:

<!--崩溃欺骗-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr('href', "/images/sao-16x16.png");
        document.title = '😰 w(ﾟДﾟ)w 页面崩溃啦!  ';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="shortcut icon"]').attr('href', "/images/sao-16x16.png");
        document.title = '😏 ♪(^∇^*) 噫? 又好了! ';
        titleTime = setTimeout(function () {
            document.title = '🤔 啊来来! 原标题是啥来着?  ';
        }, 2000);
		
		titleTime = setTimeout(function () {
            document.title = '😮哦~! 想起来了!  ';
        }, 4000);
		
		titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 6000);
    }
});

之后修改 themes/next/layout/_layout.swing 在文件最后添加:

<!--崩溃欺骗-->
{% if theme.crashcheat %}
  <script type="text/javascript" src="/js/crash_cheat.js"></script>
{% endif %}

最后在 主题配置文件 中, 找一个自己喜欢的位置, 写入 crashcheat: true. 什么时候想要关闭这个功能了, 直接设置为 false 即可.

球形标签云

球形标签云其实就是用这个插件 TagCanvas 实现的, 点击进入官网.

进入官网后下载 tagcanvas.js 文件, 也可以直接在左面我给出的链接那里 "右键->链接另存为", 保存到: themes\next\source\js 目录下.

打开 themes\next\layout\page.swig 文件, 如果你已经开启了 "自定义 swig 功能", 其实开不开也无所谓啦 , 进入博客网站根目录下的 source 文件夹, 打开 _data 文件夹, 没有的话就新建一个, 叫做 _data , 在 _data 文件夹中再新建一个 tagcanvas.swig 文件, 打开这个文件, 粘贴以下内容:

<div class="tags" id="myTags">
  <canvas width="350" height="350" id="my3DTags">
    <p> Anything in here will be replaced on browsers that support the canvas element </p>
  </canvas>
</div>
<div class="tags" id="tags">
  <ul style="display: none">
    {{ tagcloud({
      min_font: 16,
      max_font: 35,
      amount: 999,
      color: true,
      start_color: 'black',
      end_color: 'green',
    }) }}
  </ul>
</div>
<script type="text/javascript" src="/js/tagcanvas.js"> </script>
<script type="text/javascript" >
  window.onload = function()
  {
    try
    {
      TagCanvas.Start('my3DTags','tags',
      {
        textFont: 'Georgia,Optima',
        textColour: null,
        outlineColour: 'black',
        weight: true,
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.05,
        bgRadius: 1,
        freezeDecel: true
      });
    }
    catch (e)
    {
      document.getElementById('myTags').style.display = 'none';
    }
  };
</script>

之后打开 themes\next\layout\page.swig 文件, 找到 43, 44 行之间的位置, 没有行数标记的话, 就搜索 tag-cloud-tags , 它所在的位置就是第 44 行. 在这一行的上面添加如下内容:

{# 球形云标签 #}
{% if theme.tagcanvas %}
{% include '../../../source/_data/tagcanvas.swig' %}
{% endif %}

{# 普通云标签 #}

最后在 主题配置文件 中, 找一个自己喜欢的位置, 写入 tagcanvas: true 即可.

注 球形标签云也可以使用 hexo-tag-cloud 插件来实现, 不过我没用这种方法, 有时间的话我再试试吧. 执行我上面的操作后, 球形标签云和普通标签云是同时存在的, 如果你只想要显示球形标签云, 还是在 page.swig 文件中, 把后面那个 普通云标签 的 div 标签注释掉就行了. 就像这样:

{# 球形云标签 #}
{% if theme.tagcanvas %}
{% include '../../../source/_data/tagcanvas.swig' %}
{% endif %}

{# 普通云标签 #}
{# <div class="tag-cloud-tags">
  {% if not theme.tagcloud %}
    {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}
  {% else %}
    {{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
  {% endif %}
</div> #}

文章写作部分

Hexo 博客的属性设置

title: //文章标题
date: //博客的建立日期, 如果自己手动添加, 请按固定格式添加
categories: //分类, 支持多级
tags: //标签, 多个: [标签1,标签2,标签3]
description: //文章的描述, 在每篇文章标题下方显示, 并且作为网页的 description 元数据. 如果不写, 则自动取 <!-- more --> 之前的文字作为网页的 description 元数据. 建议每篇文章都务必加上!
keywords: //关键字, 并且作为网页的 keywords 元数据. 如果不写, 则自动取 tags 里的项作为网页的 keywords 元数据
comments: true | false //是否开启评论
layout: //页面布局, 默认值是 post, 默认值可以在站点配置文件中修改 default_layout

Markdown 支持部分 html 标签

1. <kbd> 标签

   <kbd> 标签可以将其中的文字渲染成一个按键, 虽然目前 <kbd> 已经被标记为了 "过时的" 标签, 但是还是可以使用其来实现简单的效果.

   代码: 复制的快捷键是: <kbd>Ctrl</kbd> <kbd>C</kbd>

   效果: 复制的快捷键是: Ctrl C

2. <font> 标签

   利用 font 标签可以简单修改文字的颜色, 加粗斜体这些可以直接使用 Markdown 的语法.

   代码: <font color='red'> *这是红色斜体* </font> <font color='green'> **这是绿色粗体** </font>

   效果: 这是红色斜体 这是绿色粗体

Markdown 支持自定义标签

如何定义标签?

[tag1]: tag1Name

如何使用标签?

[text1][tag1]

Markdown 支持自定义锚点

如何使用标题锚进行跳转?

[text1][#标题名称]

[注]

• 无论是几级标题, 都只写一个井号
• 标题中所有的标签符号全部会被无视
• 标题中所有的空格会全部转化为横线 (-)
• 如 What is LaTex? => #what-is-latex
• 如 Ready, set, Go! => #ready-set-go

Gitpages 支持使用 Markdown 实现任务列表

语法格式:

- [x] item 1
    * [x] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [x] item C
- [ ] item 2
- [ ] item 3

效果:

• item 1
  • item A
  • item B
    more text
    • item a
    • item b
    • item c
  • item C
• item 2
• item 3