前言

这个教程的重点在于调教Sakura主题,关于Hexo+GitHub搭建博客的教程数不胜数,这里仅仅简单描述并提供相关指令以便复制,并对一些关键步骤或常见问题进行解答。

任何的主题修改请尽量以体验为重,花里胡哨的东西反而会影响体验

我尽量文字讲清楚,配图慢慢补充


一 、搭建Hexo并生成静态页面

0 . 环境配置

这个我度娘都能搜到,重复一遍意义不大,这里只提供需要的软件名称和命令

① 需要安装:Node.js , Git,Notepad++(方便编辑)

② 需要准备:Github账号

③ 安装后检查(在CMD中)

node -v //检查node版本
npm -v //检查npm版本
git --version //检查git版本

出现版本号则为安装成功。


1 . 基本准备

(1) GitHub Pages

GitHub Pages国内速度不理想

使用其他静态页面服务请先跳转至 加速优化 部分

①新建一个GitHub仓库,名为 |USERNAME|.github.io (|USERNAME|为你的GitHub用户名),勾选 初始化README(即Initualize this repository with README),创建仓库

②进入仓库的设置界面(Settings),找到GitHub Pages一栏,将Source中的 None 改为 master branch

(2) Hexo

①安装

在任意位置新建一个文件夹作为你的博客文件夹(这里博客文件夹以\Blog代替),在\Blog中右键,点击 Git Bash Here,输入以下内容

npm i hexo-cli -g //安装Hexo
hexo -v           //验证安装
hexo init         //初始化\Blog文件夹
npm install       //安装基本组件

②预览

hexo g   //生成静态页面
hexo s   //打开本地服务器

进入浏览器访问 localhost:4000 你可以进入你的Hexo博客页面

然后按 Ctrl + C 停止服务器,Hexo的基本搭建完毕


2 . 简单配置与连接

(1)载入主题

hexo-Sakura主题载入方式:直接覆盖到博客根目录

其他主题请参照制作者自述或其他教程

你可以再用 hexo g && hexo s 检查主题是否生效


(2)连接到GitHub

打开Git Bash,键入:

git config --global user.name "Username"  //Username更换为你的GitHub用户名

git config --global user.email "Email"    //Email更换为你的GitHub注册邮箱

SSH Key生成:

ssh-keygen -t rsa -C "Email"  //生成
cat ~/.ssh/id_rsa.pub         //查看

将生成的 以ssh-rsa开头的字符完整复制,在你的GitHub中,右上角头像下面点击 Settings - SSH and GPG keys ,新建一个SSH Key,名称任意,将你剪贴板内以ssh-rsa开头的字符整个粘贴进去,保存退出。

验证:

键入

ssh -T git@github.com

若出现的信息有 Hi Username(你的用户名)即为配置成功

P.S. 这个地方注意,以后用到本地SSH的时候,均可使用此密钥,无需重置或新建。


(3) GitHub Pages的部署

① 配置文件修改

在 \Blog\_config.yml 中,找到 deploy: 一栏,直接改为:

deploy:
  type: git
  repository: https://github.com/Username/|USERNAME|.github.io
  branch: master

保存退出。


② 自定义域名

若已购买域名(可不备案),可在 \Blog\Source\ 中创建文件 CNAME (无后缀名) 右键编辑,改为你的自定义域名,然后在你的域名DNS解析中添加一个CNAME记录,地址为|USERNAME|.github.io

若未购买域名,可将CNAME中写 |USERNAME|.github.io作为访问域名


③ 部署

在 \Blog 中右键,Git Bash Here,键入

hexo g //生成静态页面
hexo d //部署到GitHub

完成后在浏览器中输入你的域名,正常访问即部署完成


④ 前期部署异常的解决方案

检查上述操作是否全部执行,检查各种路径和地址有没有写错,再尝试执行 npm install 等

终极解决方案:重复上述步骤,从头开始

就是这么粗暴!


二、Sakura主题调教

0 . 基本修改

在这之前:请了解 jsDelivr 等CDN的使用方法,这里不做过多描述

(1) 主题目录下_config.yml的配置

基本信息

# site name   // #后面的为注释,无用
prefixName: とある科学の   //左上角站点名
siteName: 楓             //左上角站点名
# favicon and site master avatar
favicon: https://cdn.jsdelivr.net/gh/Nastsuki-Kaede/Blog-Resources/icon/favicon.ico   //这个是你的标签页logo
avatar: /img/avatar.jpg      //主页头像
url: https://www.flymc.top   //域名
description: Zaphkiel,Zayin! //描述,主页的那句话
cdn: https://cdn.jsdelivr.net/gh/Natsuki-Kaede/Blog-Resources  //套用的CDN链接,后面有用,建议建立一个属于自己的图床,在后面的图片里 img:/icon/xxx.png 将被代替为 https://cdn.jsdelivr.net/gh/Natsuki-Kaede/Blog-Resources/icon/xxx.png

首屏公告

notice: 你想说的话 //改为false公告会消失哦

懒加载进度条

lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg

可换为自己喜欢的进度条


顶栏菜单

menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    技术: {path: /categories/技术/, fa: fa-code }, 
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
    转载: {path: /categories/转载/, fa: fa-book }
  } }
  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }
  赞赏: { path: /donate/, fa: fa-heart faa-pulse }
  关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    我?: {path: /about/, fa: fa-meetup}, 
    主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
    Lab: {path: /lab/, fa: fa-cogs },
  } }
  客户端: { path: /client/, fa: fa-android faa-vertical }
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }

这里可根据自己的需要进行修改,不需要的可以删除或者#注释掉,path: /xxx/ 所在目录为\Blog\source\xxx\,fa: fa-xxx 为图标,可在Font-Awesome官网中搜索到,如游戏机图标为 fa-gamepad。faa-xxxxx 为鼠标悬浮在图标上的动态效果,如 faa-shake 为左右摇晃,faa-vertical 垂直摇晃,可根据自己喜好修改,在后续添加顶栏菜单项时也可以自行使用。


开屏背景图片

bg:

  - https://cdn.jsdelivr.net/gh/Nastsuki-Kaede/Blog-Resources@master/cover/cover(0).webp
  - https://cdn.jsdelivr.net/gh/Nastsuki-Kaede/Blog-Resources@master/cover/cover(1).webp
  - https://cdn.jsdelivr.net/gh/Nastsuki-Kaede/Blog-Resources@master/cover/cover(2).webp
  //这里我是用了我的三张图作为示例,这样可以固定三张图片在主页随机显示
  //值得一提的是,这里的背景图片设置支持API,也就是可以调用一些随机图片的API使用,如
bg:  
  - https://random.52ecy.cn/randbg.php
  //已知出现的问题是,使用单个API不能及时更新图片
  //目前的解决方法是,加入多个相似API(相同的多复制几个不可以哦)


//---------------------------------

# 背景图片样式 空 原图效果 filter-dim 阴影 filter-grid 横条 filter-dot 点点
bgclass: filter-dot

//---------------------------------

# startdash面板

startdash: 
  - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
  - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}
  - {url: /, title: 大标题, desc: 底部的小字描述, img: /img/startdash/wangshiwu.jpg}

//这里是StartDash!!面板的三个链接,根据自己喜好修改
//配图修改:在img: 后加入自己的图片链接,如果是/xxxx/xxx.jpg,则会自动套用CDN,被取代为 cdn/xxxx/xxx.jpg (cdn为上面设置的链接,希望你还有印象)

//---------------------------------

# your site build time or founded date
# 你的站点建立日期 

siteBuildingTime: mm/dd/yy   //如25/03/2020

通讯社交配置

social:
  github: {url: https://github.com/Nastsuki-Kaede, img: /icon/github.png}
  sina: {url: https://weibo.com/u/5184914688, img: /icon/sina.png}
  wangyiyun: {url: https://music.163.com/#/user/home?id=270814481, img: /icon/wangyiyun.png}
  zhihu: {url: https://www.zhihu.com/people/flymc-98, img: /icon/zhihu.png}
  email: {url: mailto:xflymci@163.com, img: /icon/email.svg}
  wechat: {url: /#, qrcode: /social/wechat.jpg, img: /icon/wechat.png}

//这里根据自己需要修改,可增加或删减,img: 后的配图同上,会被取代为有cdn的链接
msocial:
  github: {url: https://github.com/Nastsuki-Kaede, fa: fa-github, color: 333}
  weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=1943337979&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

//手机版网页的社交配置,修改方式同上,color: 后可换为自己喜欢的颜色代码

捐赠页与二维码

donate:
  paypal: https://www.flymc.top/paypal
  alipay: /donate/AliPayQR.jpg
  wechat: /donate/WeChanQR.jpg
  wechatSQ: /donate/WeChanSQ.jpg
//这个地方同样会套用cdn,也可以改成图片链接,随意

首页视频

movies:
  url: https://cdn.jsdelivr.net/gh/Nastsuki-Kaede/Blog-Resources/cover-video
  # 多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv。其他的可以试下,不保证有用
  name: sugar.mp4

//url: 后为视频所在目录   name: 后为视频名,不再赘述

Aplayer音乐播放器

aplayer: 
  id: 4925243818   //这里是歌单ID(注意不要写成用户id,看准playlist后面的数字!)
  server: netease     //网易云
  type: playlist      //歌单
  fixed: true         //是否紧贴底部 true/false
  autoplay: true      //自动播放
  loop: all           //循环模式  all/one/none
  order: random       //循环顺序  random/list 
  preload: metadata   //预加载 auto/metadata/none
  volume: 0.1         //初始音量 1-100 对应 0-1
  mutex: true         //互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器

//其他详情可去Aplayer官方Docs查看 https://aplayer.js.org/#/zh-Hans/

Valine评论

这里Sakura整合了Valine,我们只需要去LeanCloud注册账号,获取AppID和AppKey,这个地方请参照:https://valine.js.org/quickstart.html

# Valine
valine: true
v_appId: 你获取的AppID
v_appKey: 你获取的AppKey
//以下为开启评论验证码的部分,推荐开启

Valine验证码配置

Sakura主题开启Valine验证码的方式比较特殊,由于我尝试 verify: true没有效果,所以这里提供一下我的方式。

我们需要在\Themes\_config.yml中#Valine区底部加入 v_verify: true

如下:

# Valine
valine: true
v_appId: APPID
v_appKey: APPKEY
v_verify: true 

在\Themes中搜索 sakura-app.js ,打开进行编辑:

Ctrl + F 搜索 valine ,找到以下内容:

      if (!valine) {
        var valine = new Valine()
        valine.init({
          el: '#vcomments',
          appId: mashiro_option.v_appId,
          appKey: mashiro_option.v_appKey,
          path: window.location.pathname,
          placeholder: '你是我一生只会遇见一次的惊喜 ...'
        })
      }

我们在appKey一行下再起一行,加入 verify: mashiro_option.v_verify, 如下:

      if (!valine) {
        var valine = new Valine()
        valine.init({
          el: '#vcomments',
          appId: mashiro_option.v_appId,
          appKey: mashiro_option.v_appKey,
          verify: mashiro_option.v_verify,  //不要忘了最后的 ,
          path: window.location.pathname,
          placeholder: '你是我一生只会遇见一次的惊喜 ...'
        })
      }

这样验证码就开启啦!


Valine识别QQ邮箱头像

这里需要一个Valine.min.js,可以点击这里获取

放到 \themes\主题文件夹\source\js\ 中,这里以Sakura为例

修改 \layout\_partial\中的footer.ejs

搜索 Valine.min.js ,将其所在一行删掉,替换为

<script type="text/javascript" src="/js/Valine.min.js"></script>

保存退出。

打开编辑刚才放到js文件夹中的Valine.min.js

查找 a(e.get(“mail”) 有以下内容:

<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',

往前一点,找到 var C=function(e,n,r)

在var之前换行

使之变成如下:

...... //特别长的那行
var C=function(e,n,r){
    var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',
    s=e.get("ua")||"",......

将以下部分

var C=function(e,n,r){
 var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',

直接改为

 var C=function(e,n,r){
    var qq_img=m.cdn+a(e.get("mail"))+m.params;
     if(e.get("mail").indexOf("@qq.com") >= 0){
        var prefix = e.get("mail").replace(/@.*/, "");
        var pattern=/^\d+$/g;
        var result= prefix.match(pattern);
        if(result!==null){
            qq_img = "//q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100";
        }
    }
    var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+ (qq_img)+'">',

保存退出即可。

思路参考:Valine-实现QQ邮箱识别生成头像地址 稍作一些调整和修改


(2) 分类页与标签页设置

这里可以完全照搬Hexo-Sakura主题作者hojun的Docs:分类页与标签页配置

原Docs已经足够详细,我以后会再补充的啦~


1 . 个性化配置

(1) 首屏文字/头像

hexo的首屏默认为头像,以下是修改为文字的教程:

在\themes\Sakura\layout\_partial中找到 headertop.ejs

<div class="header-tou">
   <a href="<%- theme.url%>">
       <img src="<%- (theme.cdn || '') + theme.avatar %>">
   </a>
</div>

修改为:

<div class="header-tou">
   <h1 class="center-text glitch is-glitching Ubuntu-font" data-text="你想更换的文字">你想更换的文字</h1>
</div>

(2) 鼠标个性化

鼠标样式

找到style.css ,搜索.cur,找到以下内容:

cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur),auto

cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/work.cur),alias

cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),auto

cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/normal.cur),auto

cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/No_Disponible.cur),auto;

这是不同状态下的鼠标样式,如texto.cur为鼠标悬浮于文本时的样式,No_Disponible.cur为无响应时的鼠标样式

以上的url()中可替换为自己喜欢的鼠标样式,


鼠标点击特效

找到主题目录中的 layout.ejs

在末尾添加:

<script src="鼠标点击特效的链接"></script>

这里提供几个我找到的:

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>   //社会主义价值观文字
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>   //点击出现爱心
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/clickBom.js"></script>   //气球爆炸(有点影响体验)
//我自己用的看代码直接拿就行,放本地了emmm

P.S. 多个效果可叠加,但不建议。注意自己页面的性能和实际体验!


(3) 标签页

在layout.ejs中添加,同样是在最后新开一行即可

这里提供一下我的:

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>

效果就是标签页中离开显示的 你丑你就走 和 重新回到页面显示的 你帅你就回来

其他的效果可以度娘找到很多,根据自己喜欢的来,不可叠加


(4) 背景效果和漂浮物效果

layout.ejs中添加,方法同上

//背景效果
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/piao.js"></script>   //漂浮彩带,点击可变换

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>   //可随鼠标滚动并吸附的线条


//漂浮物效果
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/sakura.js"></script>   //樱花飘落

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/snow.js"></script>   //雪花飘落
//谨慎添加,略微影响阅读体验

注意:这里的修改很影响页面的性能和加载的速度,请谨慎添加,不建议叠加


(5) 左下角看板娘

layout.ejs中添加,方法同上

//原版

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

//我的修改版
//修改内容:调整大小,去除了纸飞机游戏和info按钮

<script src="https://cdn.jsdelivr.net/gh/Natsuki-Kaede/Blog-Resources@master/live2d/autoload.js"></script>

自行选择,也可以使用别的live2d看板娘,但是在这里不推荐hexo-helper-live2d插件

这一区域等待完善…

2 . 一些细节…

(1) 评论框右侧图片替换

在style.css中搜索 comment_bg,找到:

    background-image: url(xxxxxxxxxxxxxxxxx/comment_bg.png);

将url()中的内容替换为自己想要的图片链接即可


(2) 修改主题主配色

在style.css中查找 #fe9600 和 orange 并替换为你想要的颜色代码

啊…补充说明一下,在你做完所有更改之前先别改这个主配色…

最后一起改,防止出错


(3) 关于页 我?的对话框修改

找到\Themes\Sakura\source\js\botui.js,右键修改

将文本内容和选项替换为自己想要的即可


(4) 页脚声明等

在footer.ejs中修改


(5) 手机版页面

在mheader.ejs中修改


(6) 禁用鼠标右键与F12

layout.ejs中添加

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>

这个纯粹是满足我禁用鼠标右键的强迫症(可以这么说吧)

事实上控制台还是可以通过 Ctrl + Shift + I 打开的


(7) 404页面修改

在 \Themes\Sakura\Source\ 中找到 404.html

将自己喜欢的404模板修改后替换即可

模板一抓一大把,修改也很简单,这里不做过多讲解

P.S. 404页面使用的本地资源可以放在一起


(8) 代码高亮

高亮修复:

博客根目录下_config.yml中 找到highlight一栏

把highlight关掉:

highlight:
  enable: true

鼠标悬浮行突出:

style.css下添加:

.hljs-ln-line:hover {
    background-color: rgba(255, 255, 255, .1);
}
.hljs-ln-line.hljs-ln-n:hover{
    background-color: rgba(0,0,0,0) !important;
}

三、加速与体验优化建议

1 . 加速优化

托管GitHub于GitHub Pages的博客速度总是不尽人意,Sakura主题加载了大量的资源,本身性能并不太好,这里提供一些加速方法,分为托管于GitHub Pages的加速方法和其他加速方法。

这里主要针对未备案域名(毕竟已备案的域名可以用国内的各种服务,COS/OSS开个静态页面速度就很快)

(1) 通用加速方法

① 图片资源加速

推荐方法:

jsdelivr: 将你的图片传至GitHub仓库,通过 https://cdn.jsdelivr.com/gh/|USERNAME|/目录/xxxxx.jpg (也可以是webp,png等格式图片,随意)

PicGo: 项目地址:PicGo 将图片上传到配置好的图床,直接引用


②Cloudflare CDN替换为国内CDN

(顺便更新一下)

这里使用的是国内的BootCDN,速度蛮不错

方法:

在 \themes\Sakura\source\js\ 中找到 sakura-app.js

编辑搜索 cloudflare 找到第1114行如下内容:

$.getScript('//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML', function () {

替换为

$.getScript('//cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML', function () {

在 \themes\Sakura\layout_widget\ 中找到 common-article.ejs

将 第2行 如下内容:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">

替换为

<link rel="stylesheet" href="https://cdn.bootcss.com/tocbot/4.10.1/tocbot.css">

③ 字体资源替换

在 \themes\Sakura\layoout\_partial\ 中找到 head.ejs

这里存在拖慢加载速度的字体资源

将第28行以下内容

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">

替换为

<link rel="stylesheet" href="https://flymc.top/css/0font.css" media="all">


//这里引用的是我自己扒过来的字体库
//如果你想引用本地资源的话,也可以自己用上面的链接扒一扒,麻烦一点
//所以这里我提供了我自己的代码

④ 加入Fly-Engine预加载

在 \themes\Sakura\layout\ 中找到 layout.ejs

在 body 结束前一行,加入:

<script src="//cdn.jsdelivr.net/gh/Natsuki-Kaede/Fly-Engine@latest/fly-engine.js" type="module"></script>

⑤启用压缩

以下压缩方式自行选择,一种就够了!

GULP压缩

博客根目录下打开Git Bash,输入

npm install gulp -g

npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在博客根目录下创建文件 gulpfile.js

编辑内容为:

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

gulp.task('minify-html', function() {

    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});


gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});


gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});


gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});


gulp.task('default', [
    'minify-html','minify-css','minify-js','minify-images'
]);

neat插件压缩

博客根目录下打开Git Bash,输入

npm install hexo-neat --save

编辑_config.yml,在末尾加入

# hexo-neat
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'

exclude: 后内容为排除压缩的文件格式,支持通配符


Gzip/Brotli压缩

这个由你接入的CDN或域名解析服务商提供


以上压缩方式自行选择,一种就够了!


(2) 更换其他静态页面服务

对于未备案域名或无域名:推荐Netify和Coding

Netify的速度略快,实际体验与GitHub相似,快一点点啦。。

Coding就贼快了!但是已知的缺点是Coding Pages服务移动网络不能访问

对于已备案域名:CDN,服务器,COS/OSS,想怎么玩怎么玩,有人权就是好!


(3) 接入CDN

无论是否备案,这里强烈推荐本站合作商 开发云

速度快,安全稳定,服务到位,无需备案

(这不是一条广告,这里是真心推荐)


(4) 补充预留

这一栏为后续的补充方法预留空间


2 . 体验优化思路

(1) 压缩图片

在线压缩 TinyPNG 就很好用,建议将页面图片压缩为.webp格式,速度快,对视觉效果影响不大


(2) 减少特效,特别是第一屏!

花里胡哨的页面你觉得好看,但是 真!的!很!慢!

而且对中低配电脑相当不友好,会卡炸的!


(3) 去掉在页面上层的特效

之前我用过那个樱花飘落的特效,感觉还不错诶

时间长了之后发现,这TM很影响阅读体验啊


(4) 关闭aplayer的预加载和自动播放

自动播放不会很招人喜欢!

预加载让用户浪费不必要的流量

建议将aplayer部分设置改为以下:

autoplay: false
preload: none

(5) 速度决定一切

请今天参考上面给出的优化方法进行调整

麻烦是麻烦,速度第一位


(6) 建议使用pjax

这个在Sakura已经集成了,尽量不要关

出问题(比如我的pjax出现过评论区无法加载的问题)请尝试修复/重构

实在不行ajax也行。。。


(7) 体验方面的简单总结

这一栏为后续的补充方法预留空间

顺便扯两句

尽量做得简单大气

一堆你认为好看的特效会适得其反

博客以文章为主,你自己写不出东西再好看的特效也没什么人愿意看


Todo List

3.30存档,几乎啥也没改

  • [x] 404页面

  • [x] 加速优化,资源替换

  • [x] 页面体验建议

  • [ ] 2.一些细节部分的大量补充

  • [x] 前期教程的补充说明

  • [ ] 阅读与加载进度条的分离修改

  • [x] 代码高亮修复

  • [ ] 部分错误修复

  • [x] 字体库替换

  • [ ] 故障恢复

  • [ ] 列出所有的参考文档链接

  • [ ] 各种内容的补充啊啊啊啊(长期工作)

  • [x] QQ邮箱头像识别

  • [ ] 其他主流邮箱头像识别的补充

  • [ ] 参考抄袭来源

该补充的我忘了好多

邮箱的头像接口都没工夫找

这两天先重构图库吧。。


施工中...


Just Kaede!