论我的hexo博客优化之路

目录

  • hexo的安装
    1. 漂亮的hexo主题——next
  • 作者头像添加
    1. 网站图标
  • Sidebar的超级优化
    1. 添加标签、分类等页面
    2. 添加localsearch页面搜索
    3. 添加RSS
    4. 添加社交链接、友情链接
    5. 添加可爱的看板娘(加对话框)
    6. 修改back2top按钮样式
    7. 添加一个Aplayer播放器
  • 各种插件,完善浏览体验
    1. 添加文章加密
    2. 添加Valine评论系统
    3. 添加版权声明
    4. 添加tidio实时聊天功能
    5. 添加Aplayer漂亮的音乐播放器
    6. 添加动态背景canvas
    7. 添加脚注hexo-reference
    8. 添加needmoreshare国内分享
    9. 添加likelyshare分享
    10. 添加mathjax数学公式渲染
    11. 添加pangu排版
  • hexo页面的美化
    1. 修改底部全站字数统计
    2. 隐藏Hexo、Next字样
    3. 添加自定义的话
    4. 修改底部user图标
    5. 添加打赏按钮
    6. 添加自定义颜色块标签
    7. 添加代码块复制按钮
    8. 添加图片放大显示
    9. 添加Dplayer播放器
    10. 添加标题崩溃欺骗
  • hexo访问终极优化
    1. 添加hexo-nest压缩静态资源,加速博客
  • 添加quicklink,后台加载其他页面链接
  • 添加fastclick,消除点击延迟
  • CDN
  • 让各大网站收录你的博客

一、hexo的安装

参考官网.


Windows下安装

若想在本机安装hexo,首先需要以下两个软件:

安装成功后,在你喜欢的位置安装hexo(通过git bash)。

npm install -g hexo-cli

接下来,在你想安装hexo的文件夹中,点击Git Bash Here

hexo init

这样,基本的安装就完成了,打开hexo所在目录检查是否安装成功。

编辑站点信息

编辑站点配置文件_config.yml,即为hexo根目录下的_config.yml文件。推荐使用Atom。

在文件的开头,你将看到如下文字:

# Sitetitle: Hexosubtitle:description:keywords:author: John Doelanguage:timezone:

此为你的网站配置。如下表格是参数详解。

参数 描述
title 网站标题
subtitle 网站副标题
desciption 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。

其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

例如:我将其修改为

# Sitetitle: Sakitami的集装箱subtitle: 我已经无敌了!description: 为世上的自由而战!(误keywords:author: Sakitamilanguage: zh-CNtimezone:

下一段,您将看到如下文字:

url: http://yoursite.comroot: /permalink: :year/:month/:day/:title/permalink_defaults:

参数详解:

参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的永久链接格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值

其中,url即是你博客的域名地址。剩下的部分暂时可以不用修改。 例如,我将其修改为:

url: https://blog.skihome.xyzroot: /permalink: :year/:month/:day/:title/permalink_defaults:

hexo主题——Next

不得不说next真的是hexo中最易用、最美观(自我认为)、支持插件最多的主题了。所以我在这里推荐使用Next作为hexo主题。

安装

请参考官网


首先使用Git Bash cd到你的hexo根目录。运行如下指令:

git clone https://github.com/theme-next/hexo-theme-next themes/next

*注意
此代码安装的是最新主分支,可能不稳定,但包括最新的功能。若想使用稳定版本,请参考官方文档

您可以通过命令更新到最新的主分支。
更新NexT:cd到next目录后执行git pull操作。

使用NexT主题

编辑站点配置文件_config.yml,将themes改为next。

theme: next

检查是否切换

首先,使用hexo g命令生成静态文件。

使用hexo server命令检查。 cd到你hexo的根目录,在Git Bash中输入hexo server。 若一切正常,你将看到如下图示。

此时,你可以通过http://localhost:4000 打开你的hexo博客。

若为以上图示,则证明切换成功。在Git Bash通过Ctrl+C退出Server模式。

修改Next配置文件

编辑主题配置文件_config.yml,即为hexo\themes\next的_config.yml文件。 搜索scheme字样,直到看到如下字段。

# Schemesscheme: Muse#scheme: Mist#scheme: Pisces#scheme: Gemini

Next默认有4中可选样式,这里我选择Gemini,将其前面的#号去除。

# Schemes#scheme: Muse#scheme: Mist#scheme: Piscesscheme: Gemini

这样就完成了NexT基本配置。


二、作者头像添加

编辑主题配置文件_config.yml,搜索avatar,直到看到如下字段。

其中url是你的头像位置,rounded是是否为原型显示,opacity不透明度,rotated将使用光标旋转头像。你可以按照自己喜好修改。

在hexo\themes\next\source位置新建uploads文件夹,用于存放你的头像等个人信息文件。将你的头像保存在此文件夹中。

 avatar: url: /uploads/avatar.jpg rounded: true opacity: 1 rotated: true 

网站图标

网站图标为png格式文件,并不是ico格式文件。

  • favicon-16x16-next.png
  • favicon-32x32-next.png
  • apple-touch-icon-next.png

Sidebar的超级优化

Sidebar
针对NexT主题的Gemini有效,本文为NexT 7.1.2版本的Gemini样式

添加标签、分类等页面

编辑主题配置文件_config.yml,搜索menu,直到看到如下字段

添加关于、标签、分类页面,将对应的#号去除即可。 例如,我将其修改为:

 menu: home: / || home about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive 

最前面的home、about是页面显示的文字,双竖线后面的则是图标标签。
Next默认使用FontAwesome图标。

你可以添加中文、以及非博客页面。例如:

 menu: 不老不死!: https://www.bilibili.com/video/av55888297 || tv 

返回hexo根目录,使用Git Bash输入如下指令新建三个页面:

 hexo new page abouthexo new page tagshexo new page categories 

打开对应文件,例如,打开about页面文件,则为hexo\source\about\index.md。

在这里可输入你的关于信息。若想禁用评论,请在开头加入comments: false。例如:

 title: 关于date: 2019-05-30 18:49:53comments: false 

警告
tags和categories的index.md内不可加任何内容。只可添加comments以及type

举例:


未完待续

5+
发表评论

相关文章