0%

我的hexo 博客高阶优化之路

1

hexo主题优化:增加标题hexo功能页

  我不太会Html5技术,所以这方面我都是借鉴其他的网站实现方式,拷贝其样式标签,复制到我的post page中。我这里提供一下我的hexo 友情链接样例,示范教程给大家。
  如下方的图,我在hexo主页的菜单上增加了友情链接页。

  首先需要在hexo中新建一个名为links的page,步骤如下:

  • 1、控制台cd到hexo博客路径下,输入 hexo new page “links”

  这时候hexo目录下会新建/links/index.md路径和文件。这时候,算是已经完成了第一步。让这个文件显示在你发布的静态博客网站中,还需要额外配置_config.yml信息和写入生成links的页面样式的规则。

  • 2、找到hexo主题文件_config.yml,在menu菜单项中增加links的页面链接和icon:在menu中合适位置增加 links: /links/ || address-book-o 。如下图:

  • 3、因为我的hexo使用默认语言为中文,需要在中文语言主题文件themes\next\languages\zh-CN.yml里找到menu,在其下方任意位置添加翻译links: 友情链接

    ps: 如果你使用的是英文版或者其他语言,请在其他语言配置文件里增加对应的翻译行。

  • 接下来开始写入,在\themes\next\layout新建一个links.swig,这个文件我们在里面写入links页面的具体内容。(当然,如果你有html语言基础的话,可以不用下面代码,自己写喜欢的页面风格。)

    展开查看代码
    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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152

    {% block content %}
    {######################}
    {### LINKS BLOCK ###}
    {######################}

    <div id="links">
    <style>

    #links{
    margin-top: 5rem;
    }

    .links-content{
    margin-top:1rem;
    }

    .link-navigation::after {
    content: " ";
    display: block;
    clear: both;
    }

    .card {
    width: 300px;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 4px;
    transition-duration: 0.15s;
    margin-bottom: 1rem;
    display:flex;
    }
    .card:nth-child(odd) {
    float: left;
    }
    .card:nth-child(even) {
    float: right;
    }
    .card:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    }
    .card a {
    border:none;
    }
    .card .ava {
    width: 3rem!important;
    height: 3rem!important;
    margin:0!important;
    margin-right: 1em!important;
    border-radius:4px;

    }
    .card .card-header {
    font-style: italic;
    overflow: hidden;
    width: 236px;
    }
    .card .card-header a {
    font-style: normal;
    color: #2bbc8a;
    font-weight: bold;
    text-decoration: none;
    }
    .card .card-header a:hover {
    color: #d480aa;
    text-decoration: none;
    }
    .card .card-header .info {
    font-style:normal;
    color:#a3a3a3;
    font-size:14px;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    }
    </style>
    <div class="links-content">

    <img src="https://cdn.jsdelivr.net/gh/ZhaoEli/static/img/2020/老人庆祝.gif" width="40%">


    {### my info ###}
    {{ page.content }}
    <div class="link-navigation">
    {% for link in theme.mylinks %}
    <div class="card">
    <img class="ava nofancybox" src="{{ link.avatar }}"/>
    <div class="card-header">
    <div>
    <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a>
    <a href="{{ link.site }}"></a>
    </div>
    <div class="info">{{ link.info }}</div>
    </div>
    </div>
    {% endfor %}
    </div>

    <div class="no-icon note warning"><div class="link-info">👨‍🎓 <font size="4" color="#f2e6ce">跟着大佬走,成为小大佬</font></div></div>
    <div class="link-navigation">
    {% for link in theme.defaultlinks %}

    <div class="card">
    <img class="ava nofancybox" src="{{ link.avatar }}"/>
    <div class="card-header">
    <div>
    <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a>
    <a href="{{ link.site }}">
    </a>
    </div>
    <div class="info">
    {{ link.info }}
    </div>
    </div>
    </div>

    {% endfor %}

    </div>

    <div class="no-icon note primary"> <div class="link-info">🍭 <font size="4" color="#f2e6ce">五湖四海的朋友们</font></div></div>

    <div class="link-navigation">
    {% for link in theme.friendslinks %}
    <div class="card">
    <img class="ava nofancybox" src="{{ link.avatar }}"/>
    <div class="card-header">
    <div>
    <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a>
    <a href="{{ link.site }}"></a>
    </div>
    <div class="info">{{ link.info }}</div>
    </div>
    </div>

    {% endfor %}
    </div>
    <br>
    <hr>

    <a class="btn default pistanos" ref="http://cherrycat.gitee.io" href="http://cherrycat.gitee.io"><font color=#e8b49a>很高兴在这里遇见你们</font></a>
    <img src="https://cdn.jsdelivr.net/gh/ZhaoEli/static/img/2020/love.jfif" width="10%"/>

    </div>
    </div>

    {##########################}
    {### END LINKS BLOCK ###}
    {##########################}
    {% endblock %}

在每次hexo g时,都会按照个文件生成links.html

最后,我在代码里写了三个标签:mylinksdefaultlinksfriendslinks
它们分别对应“友链声明 & 我的信息”,“跟着大佬走,成为小大佬”,“五湖四海的朋友们”三个板块,如果不需要可按需修改源代码标签内容。
友链声明 & 我的信息直接写在“/links/index.md”里面,可随时按需修改。

博客配置文件下,对应的板块增加友链信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 友情链接
# mylinks: 是我的个人网站链接
# defaultlinks:呼应的是link.swig文件中 👨‍🎓 跟着大佬走,成为小大佬段落,此处链接写大佬的博客;
# friendslinks:呼应的是link.swig文件中 🍭 五湖四海的朋友们段落,此处链接写朋友的博客。
mylinks:
- nickname: 个人网站:五月森林 # 昵称
avatar: https://cdn.jsdelivr.net/gh/ZhaoEli/static/img/sys/avatar.jpg # 头像地址
site: https://cherrycat.gitee.io #友链地址
info: 业余编剧,互联网产品经理,记录日常感悟及学习。 #一句话介绍

defaultlinks:
- nickname: Uncle_drew # 昵称
avatar: https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp # 头像地址
site: https://cndrew.cn #友链地址
info: Hand down,man down #一句话介绍

friendslinks:
- nickname: Geniucker # 昵称
avatar: https://cdn.jsdelivr.net/gh/geniucker/source/avatar.jpg # 头像地址
site: https://geniucker.cf/ #友链地址
info: None

另外在网页前端的内容可以在 ./links/index.md中自定义:

1
2
3
4
5
6
7
8
9
10

<div class="no-icon note warning"><div class="link-info"><font size="4" color="#f2e6ce">友链声明 & 我的信息</font></div></div>

<font size="2" color="#e6d2d5">🌵先将本站的友链添加到您的友链(相关信息如下)。按照下方我的友链格式在本站留言区留言,待博主为您添上友链。🤞</font>
<fieldset style="border-width: 1px; border-color:#ed9db2; width:95%; height:220">
<font size="3" color="#bdaead">
<font color="#951c48">nickname: </font>五月森林 志 # 昵称<br><font color="#951c48">avatar: </font> https://cdn.jsdelivr.net/gh/ZhaoEli/static/img/sys/avatar.jpg # 头像地址<br><font color="#951c48">site:</font> https://cherrycat.gitee.io #友链地址<br><font color="#951c48">info: </font> 业余编剧,互联网产品经理,记录日常感悟及学习。 #一句话介绍</font>
</fieldset>

<br>

是不是很棒,赶快查看一下线上效果:点击这里


2

hexo主题优化:增加hexo 看板娘小动画

  • 在博客目录下安装依赖和看板娘小组件

    1
    2
    npm install --save hexo-helper-live2d  #下载live2d依赖
    npm install live2d-widget-model-koharu #下载koharu的看板娘模型,这里也可以换成其他的模型,下文会叙述。
  • 安装好之后,在博客的配置文件_config.yml开启显示看板娘:

    展开查看代码
    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
    ## live2d 看板娘
    # 按照自己的喜好可自行设置里面的参数。
    live2d:
    enable: true
    # enable: false
    scriptFrom: local # 默认
    pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
    pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
    pluginModelPath: assets/ # 模型文件相对与插件根目录路径
    # scriptFrom: jsdelivr # jsdelivr CDN
    # scriptFrom: unpkg # unpkg CDN
    # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
    tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false # 调试, 是否在控制台输出日志
    model:
    # use: live2d-widget-model-hibiki # npm-module package name
    use: live2d-widget-model-koharu
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    display:
    position: left
    width: 150
    height: 320
    mobile:
    show: false # 手机中是否展示
    scale: 0.5
    react:
    opacityDefault: 0.7
    opacityOnHover: 0.2
  • 完成后别忘了重新hexo g生成页面一下。

  • 除了live2d-widget-model-koharu,还可以安装更多的看板娘,npm install live2d-widget-model-koharu中替换成你npm install "下方你需要的live2d看板娘"可点击这里查看模型预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    live2d-widget-model-chitose
    live2d-widget-model-epsilon2_1
    live2d-widget-model-gf
    live2d-widget-model-haru_01
    live2d-widget-model-haru_02
    live2d-widget-model-haruto
    live2d-widget-model-hibiki
    live2d-widget-model-hijiki
    live2d-widget-model-izumi
    live2d-widget-model-koharu
    live2d-widget-model-miku
    live2d-widget-model-nico
    live2d-widget-model-nietzsche
    live2d-widget-model-ni-j
    live2d-widget-model-nipsilon
    live2d-widget-model-nito
    live2d-widget-model-shizuku
    live2d-widget-model-tororo
    live2d-widget-model-tsumiki
    live2d-widget-model-unitychan
    live2d-widget-model-wanko
    live2d-widget-model-z16

3

hexo博客发布到gitee——解决国内速度过慢问题

一开始,我在github上发布我的hexo博客:https://ZhaoEli.github.io
github上发布hexo有一些缺点:

序号 缺点
1 github服务器在英国,因为在网站经常国内设备打开,打开网页时显得巨慢,甚至经常加载失败。
2 github屏蔽了百度,所以hexo发布后,无法被百度收录,影响hexo博客的访问流量。

刚开始发布时,很开心,没过几天被掉渣的访问速度给逼疯。
痛定思痛,决心解决这个问题。
我在网上调研了很久,基本可以得到两种解决方案。

  • ①通过自己搭建服务器,自己购买域名解决。
  • ②也有免费的白嫖的方法,例如用CDN加速,或者把hexo发布在国内的coding上。
    然而我穷,本来访问量就不多的小博客,也不确信能挂多少珍惜宝贝上去,要我每个月花几十块钱服务器费用,我是第一个抛弃的(其实就是因为穷);
    其次我本身不是专业的程序员,用coding维护方式仿佛需要不少工作量,目前我只会github傻瓜式部署,再看看别的吧……
    有一天我突然想起来,有着“国内github”美誉的山寨版的gitee(码云)
    既然我可以发布在github上,为什么不可以发布在gitee码云上!说干就干!
    果真和“马云”同名的产品就是给力,三下五除二就搞定了,发布流程几乎和github一模一样。

    1、在gitee新建一个仓库,gitee支持把github的代码原原本本的复制过来。太给力了,奥里给!!

在这里粘贴hexo的仓库链接

2、以后想每次通过hexo d上传到码云仓库,只需要将码云仓库的链接复制一下,粘贴到hexo的配置文件_config.yml中。将原先的github仓库地址给替换掉。
找到_config.yml中deploy,在repository中将github的仓库地址给替换掉,如果你一开始就没使用github发布,直接添加就好。

替换码云的仓库链接

试一下hexo d吧!成功的话会提示你输入gitee的登录名及密码。首次验证成功后,以后就不用输入了。

因gitee不支持自动发布,需要手动部署hexo服务。点击服务,进入”gitee pages”服务,拉到最下,点击更新。记得每次上传新的代码后,都来部署一下,要不然hexo不会更新,当然你要是自动更新的话也行,gitee冲个会员……(马化腾滑稽笑了笑,这套路似曾相识。)


附上我总结github和gitee发布hexo博客的一些优缺点:

项目 github gitee
访问速度
自动部署 支持 免费版不支持,需要手动部署
谷歌 SEO 支持 支持
百度 SEO 不支持 支持
360 SEO 支持 支持

4

第三方的资源调用被拒绝,返回403

我在写博客时遇到一件怪事,我在博客《Vlog 01 About the Elapsed Time》调用了第三方视频资源(说的直白点就是白嫖了别人的服务器资源)。
当我本地调试,http://localhost:4000时,视频可以正常播放,一旦发布到我的博客网站,视频就“和谐了”。

我把视频资源地址复制到浏览器中,发现视频仍然可以播放。
为啥一到我的网站就不行了?
网站上调试查看代码,发现xxx.mp4的资源被七牛云给屏蔽了,返回了403代码。

1、资源可直接访问,本地调试也OK。
2、发布到我的网站就会被屏蔽,http返回403。

病因:

  1. 第三方设置了防盗链。
  2. 我的网站不在他服务器的白名单中,引用资源当然被拒绝。
  3. 第三方可以通过不返回引用链接形式访问资源。
    官方输出资源的时候,判断了来源 Referer ,就是从哪个网站访问这个资源,如果是你的网站去加载这个资源,那么 Referer 就是:你的网站地址;
    如果我们的网站地址不在官方的白名单内,所以就看不到资源了。
    我们做这个跳板的关键:不发送 Referer,也就是没有来源。那么官方那边,就认为是从浏览器直接访问的,所以就能加载正常的资源了。

    那么我在引用的 index.html 文件头都加入了
    1
    <meta name="referrer" content="no-referrer"/>
    这行代码告诉服务器,调(盗)用(链)别人的服务器不要返回我的地址链接(不留下脚印)。
    重新发布后,发现ok。
    现在可以正常播放了
    那么我不想在以后每次hexo clean & g后都来过修改 index.html 的代码,我需要每次生成时,在每一个index都加这么一。宁可错杀一千,不留一个页面。
    分析了hexo next主题的源码,找到生成index的文件。
    在主题文件\layout\_partials\head\head.swig中添加:
<meta name="referrer" content="no-referrer"/>

如图:

简简单单一句代码,搞定所有烦恼。
参考文献

  1. html referrer 访问图片资源403问题
  2. http://www.fly63.com/article/detial/3625



5

设置hexo字体大小

我的hexo博客正文字体默认16px,在人人都是高分辨率显示屏的时代里,显得很“土”。
我决定将以正文为标准,其他字体相应缩小。
打开.\next\source\css\_variables\base.styl文件,找到font的样式。
$font-size-medium = 1em;
font-size-medium的数值 为hexo正文字体大小。
1em为16px,设置为14px,则将1em设置为14/16em(即 .875em),其他字体大小依照比例增大或者增小。

展开我的设置

1
2
3
4
5
6
7
8
9
// Font size
$font-size-base = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest = .75em;
$font-size-smaller = .8125em;
$font-size-small = .825em;
$font-size-medium = .875em;
$font-size-large = 1em;
$font-size-larger = 1.125em;
$font-size-largest = 1.25em;

6

设置hexo数学表达式

这其实不算啥高端设置,就是将hexo配置文件中的mathjaxs设为true:

1
2
3
4
5
# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

如果编译显示不了数学公示,那可能hexo没有依赖,控制台输入安装代码:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

数学公式不需要记语法,这里有参考,用到点击进来,开袋即食。点击查看…


7

hexo 发布后样式丢失

hexo d之后,总算有自己的小博客网站,可是这时候正常情况下,你的hexo应该无任何样式才是。如下图:

打开页面查看css文件,发现全部404,服务器找不到。
这时候是因为hexo配置文件里没有配置正确的URL路径,像我一样配置一下正确路径即可。

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://cherrycat.gitee.io/life
root: /life/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

需要注意的是,如果URL非root根目录,则需要在root里配置root之后的子路径。
例如:

1
2
## url配置的路径为 https://cherrycat.gitee.io/life,则root配置如下
root: /life/

配置完记得重新hexo g & d发布一下试试。


8

hexo文章增加音乐&视频

哎……这么添加视频不应该明写上的,大家百度一下,有的技术可查,没必要让我写在这篇文章里,因为这其实就是添加一下插件就能解决的事。
鉴于其他文章有好几位哥们来问我的文章是怎么弄视频的,那我就简单分享一下自己的经验吧,给刚接触hexo的同学提供一个优(猥)雅(琐)的解决方案。
视频添加效果如下:

音频和视频插件 hexo-tag-aplayer 和 hexo-tag-dplayer

具体怎么安装,怎么使用,我就不说了,点击这里开袋即食。本博客所有实现技术,都在《hello 独立博客》文末的的参考文献里,本章添加音、视频也不例外。

此外,奉上如何猥琐白嫖链接高质量视频的经验。
我原先想通过七牛云、腾讯云、阿里云进行存储视频,但因为收费且太贵,就放弃了。
我穷,而且博客也是带着发发东西,没必要花钱,毕竟我连服务器都白嫖了别人的。
后来我转念一下,反正都是上传视频,为啥不去视频网站上传好,然后拿到视频地址,最终为我hexo博客所用?

于是就变成了你刚点开视频的那一幕,具体哪些视频网站,我不太写的明,万一人家发现了,把你封了多尴尬(疯狂暗示:除了某酷、某奇艺、还有某博、某片场、某鱼号)。(千万不要右键分析我的视频地址哦,你不会发现什么😈)
随意找到自己的心意网站后,登录并上传好自己的视频,右键获取链接,就可以放在hexo-tag-dplayer的url里。
这就算成功链接了一个稳定高效的视频。
同理,音乐也是这么嫖来的。