前言

博客框架都弄好了,接下来本篇内容就是一些美化方面的内容,以及MD书写的进阶操作。进阶美化这块,不需要添加新的pug文件,只需要添加js或css即可完成得修改。

第三篇 进阶+美化

20201116201408

进阶

使用阿里图标

学习参考:https://www.antmoe.com/posts/80c43671/index.html

效果图

20201119195841

注册登入:阿里巴巴矢量图标库
搜索你要使用的图标,点击加入购物车,加入自己新建的项目中,
20201028103214
20201028103320
20201028103406

20201028104125

然后复制显示的代码到浏览器的地址中,回车显示,然后右键另存为css文件(iconfont.css),保存到自己css文件夹,便于使用
20201028104259

注意:这个css需要修改,不改的话好像无法显示图标…
20201028105904

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'iconfont' !important;
font-size: 20px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

接下来把选的阿里图标引入自己的博客中

20201028105739

然后就可以在你需要的地方直接使用图标了
20201028110102

  • 图标旋转

1
2
display: inline-block;
transform: rotate(1440deg);

使用JsDeliver加速文件

参考:优雅使用JsDeliver加速文件

  • JsDeliver拓展学习

官网:JsDeliver

是一个免费、开放原始码的公有 CDN 服务,托管了许多大大小小的 JavaScript、CSS 等 libraries。

20201031222119

  • JsDeliver使用

    • 直接引用

格式为:
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>/<文件及路径>

这里不做过多的介绍,直接用。

  • 分支/版本号引用

优点在于:这个链接仅停留在发布版本号的时刻,无论仓库如何变化,这个版本号的文件都不会受到影响。同时可以避免JSD缓存问题。

默认你已经创建好GitHub仓库,仓库是公开。进入你的项目仓库中,选择右侧的[create a new release]

Snipaste_2020-10-31_21-41-18

填写好release的版本号
Snipaste_2020-10-31_21-42-38

这里可以看到发布的代码压缩包

做完以上工作后,就可以到code界面,选择一个文件打开进入

20201031215937

接下来正式食用格式:

1
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@[分支/版本号]/<文件及路径>  

如:

1
2
3
4
5
图中文件地址:  
https://github.com/Jayonli/Jayonli.github.io/blob/v1.0/css/index.css

用jsdelivr来访问:
https://cdn.jsdelivr.net/gh/Jayonli/@v1.0/css/index.css

合并多个文件: jsdelivr的组合端点允许您在一个请求中从npm和GitHub端点加载多个文件

1
https://cdn.jsdelivr.net/combine/url1,url2,url3

适用于单个文件的所有功能(版本范围,缩小等)也适用于此处。所有组合文件都带有源映射,可以在开发过程中轻松使用。

1
2
https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/twbs/bootstrap@3.3/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/combine/npm/bootstrap@3.3/dist/css/bootstrap.min.css,npm/bootstrap@3.3/dist/css/bootstrap-theme.min.css
  • 刷新Jsdelivr缓存

手动刷新:https://cdn.jsdelivr.net
事实刷新:https://purge.jsdelivr.net

文章永久链接

Hexo 默认的永久链接格式层度太深,也不利于搜索引擎蜘蛛的爬虫。
效果图
20201119200009

  • 安装插件

github说明使用

1
npm install hexo-abbrlink --save

在根目录的_config.yml 文件,添加 abbrlink 的配置:

1
2
3
4
#abbrlink配置
abbrlink:
alg: crc32 # suanfa:crc16(default) and crc32
rep: dec # jinzhi:dec(default) and hex

在根目录的_config.yml 文件里找到 permalinnk 并修改,比如我想要 xx.com/xx.html 的格式就修改如下

1
permalink: :abbrlink.html

注意:如果新的文章没有定义头部的 abbrlink 的话,文章永久链接就是 crc32 生成的字符串永久链接,之前的文章打开后会自动补充加上 abbrlink 的定义。

新建文章自动打开编辑器

Q:hexo 写新文章时,需要控制台执行 hexo new “文章名字”,这样就会在_posts 下生成一篇新文章,但需要手动打开.
S:在站点根目录下新建 scripts 目录,然后在新建 auto_open.js ,在文件填入内容:

1
2
3
4
var spawn = require('child_process').exec;
hexo.on('new', function (data) {
spawn('start "E: \Program Files\IDE\Microsoft VS Code\Code.exe" ' + data.path);
});

注意E: \Program Files\IDE\Microsoft VS Code\Code.exe是编辑器的路径,只需要改为你本地编辑器的路径即可,以后在发布文章就会自动打开编辑器。

文章计数

效果图
20201119200053

1
npm install hexo-wordcount --save

安装好计数插件,主题配置文件中,搜索:# wordcount (字數統計),开启计数功能即可。

标签外挂

个人感觉flat模式好看。

20201102173045

标签隐藏

使用Vercel来加速博客

vercel加速对电信友好,移动联通不行。

参考学习:https://akilar.top/posts/812734f8/

进入vercel官网点击sign up进行注册:https://vercel.com

20201116104606
使用github登入 :

20201116104635

20201116104902

导入项目:

20201116105022

Snipaste_2020-10-30_15-13-01

此时显示是否为自己的仓库:

Snipaste_2020-10-30_15-12-52

如果是就选yes,如果是别人的仓库,那就选No,Vercel会自动帮你fork这个仓库到你的Github账号里。

然后会自动跳转到你的GitHub页面,安装Vercel:
Snipaste_2020-10-30_15-56-42

此处建议选择All repositories,意为为所有仓库安装,当然,你也可以选择只为当前仓库安装,也就是Only select repositories。

20201116105846

点击continue:

20201116110418
以上都可以不用修改直接点击deploy即可。

20201116110628

到这就部署完成了。但是此时的域名是vercel提供的:
20201116110924

20201116111709

20201116111824
此时可以看到域名已经添加进来了:
20201116114237
点击这个域名进入添加记录:

20201116114957

卡片空白跳转

  • 替换代码
    1
    2
    3
          .recent-post-info(onclick=`window.open('` + (link) + `','_self')` class=no_cover)
    //或者
    .recent-post-info(onclick=`window.location.href='`+ url_for(link) + `'` class=no_cover)
  • 替换位置
    20201119200640

异步加载

参考学习:Hexo异步加载方案

一张图解释缩短的时间哪里去了:

20201119201713

Valine添加自定义表情

思维导图

hexo访客统计并改为热度

Hexo不渲染.md或者.html

访客地图

博客订阅文章通知功能

美化