主题配置
关于主题这方面可以直接查阅 butterfly 官网,这里不进一步重复
官网链接:Butterfly - A Simple and Card UI Design theme for Hexo
这里主要是补充一些额外的主题配置
搜索 Algolia
网站的搜索基于 algolia 的 api
Hexo Butterfly Algolia 搜索的使用 | CC 的部落格 (ccknbc.cc)
需要每次都更新索引
也可以直接修改package.json 中的 "deploy": "hexo deploy,hexo algolia"
直接一步到位
底部标签栏
使用的是 shields 进行生成底部的标签栏
具体可以看该网站
icp 链接 可以添加
1
| <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>
|
目前我的网站的 ICP
1
2
3
4
5
6
7
8
9
10
11
12
| You give me a drop of tears, I saw your heart all the oceans.
<p>
<a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a>
<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a>
<a target="_blank" href="https://icp.gov.moe/?keyword=20232775"><img src="https://img.shields.io/badge/萌ICP备案-20232775-pink?style=flat&logo=adafruit" title="萌ICP备20232775号"></a>
<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>
<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a>
</p>
|
值为 “_blank” 的 target 属性在一个新的窗口或标签中打开链接的文件
图片处理
图床
图床的使用这里是使用的是 sm.ms 对图片进行存放，这个网站需要梯子才能上,但是图片不需要梯子也可以获得
可以通过以下链接查看总的图片上传 Pictures - SM.MS | Dashboard
图片压缩
可以将图片转化为 .webp 格式，在上传到图床中
WebP 是一种新型的图片格式，可以为网站上的图片提供卓越的无损和有损压缩。使用 WebP，网站站长和 Web 开发者可以制作更小、更丰富的图片，从而提升网页加载速度
字数统计
这个需要安装一个插件
1
| npm install hexo-wordcount --save
|
之后修改其中的配置项即可
评论系统
来源：Twikoo 私有化部署 | 花猪の Blog (cnhuazhu.top)
在服务器中使用 docker 安装
1
2
| sudo docker pull imaegoo/twikoo
sudo docker run -p 8099:8080 -v /home/resince/twikoo/data:/app/data -d imaegoo/twikoo
|
运行完以上步骤就相当于完成了后端部署
之后就是部署前端
envid 就是域名加上映射的端口号
1
2
3
4
5
| twikoo:
envId: https://resince.fun:8099
region:
visitor: false
option:
|
因为网站用到了 https ,但是Twikoo 不支持 https ,所以需要反向代理
在 sites-avaiable 添加 twikoo.conf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| upstream twi {
server resince.fun:8099;
}
server {
listen 443 ssl;
server_name twikoo.resince.fun;
ssl_certificate /etc/nginx/cert/server.crt;
ssl_certificate_key /etc/nginx/cert/server.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://twi;
}
}
|
修改后需要向site-enabled 添加软连接
1
| ln -s /etc/nginx/sites-avaiable/twikoo.conf /etc/nginx/sites-enabled/twikoo.conf
|
如果通过 https://twikoo.resince.fun 能够访问的话，就说明配置好了
之后就是修改前端代码
1
2
3
4
5
6
7
|
twikoo:
envId: https://twikoo.resince.fun
region:
visitor: false
option:
|
CDN 加速
从网上的各种教程中了解到了 CDN 就是将部分数据分发到各地的服务器上，从而达到加速
这里我们选择 jsDelivr - A free, fast, and reliable CDN for JS and open source 进行加速的尝试
这里我们使用的是 jsDelivr 的 GitHub 进行加速，因为我们的博客同时部署在服务器端和 Github 端，这样所有的资源在 Github 上也有备份，当需要资源的时候，可以简单的使用 GitHub 上的资源
首先需要将 blog 部署在 GitHub 上
这里可以参考之前的教程
最主要的是将资源文件修改资源地址
举例：加速图片
图片服务器地址：
图片图床地址：
使用 jsDelivr 加速的地址：
本来我们的资源地址是来自服务器端，所有的资源文件都需要从服务器端发送和接收，所以地址也都是 https://域名/资源地址
但是修改之后，资源地址的来源变成了从加速器来的资源
修改方法
https://cdn.jsdelivr.net/gh/ + GitHub仓库地址 + 资源地址
这样就可以实现对资源的简单加速
对 js 文件的加速
将原本的文件 /coutom.js 改为 /coutom.min.js
加速器会自动压缩 js 代码，但是压缩之后可能反而会变慢
图片存放
我们一般写的笔记或者文章会放在本地文件夹中,这里作者使用的是 Typora 作为md 文件编辑器
并设置了图片存放的位置为本地的一个同名文件夹,
本地图片配置
博客图片配置
- 图片的地址为
static/images/同名文件夹/图片名
这样就需要将两个地址进行转换,并将本地的图片转移到 hexo 的支援文件夹下
这里的解决办法是写一个 python 脚本自动化其发布的过程
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
| """
todo
1. hexo中新建一个post,并将文章的内容追加到post后
2. 将文章中的图片转移到hexo文件夹下，选择图片是否需要进行cdn加速
3. 打包成exe，可供方便使用，移动后打开新建的文件进行编写
"""
import getopt
import sys
import os
import shutil
localArticle_path = ''
article_name = ''
hexoArticle_path = r"D:\Resince\project\Hexo\source\_posts"
localPic_path = 'D:\\Resince\\summary\\img'
hexoPic_path = 'D:\\Resince\\project\\Hexo\\source\\static\\images'
def get_args(argv):
localArticle_path = ''
try:
opts, args = getopt.getopt(argv, "-h-p:", ['help', 'path='])
except getopt.GetoptError:
print("type -h for help")
sys.exit(2)
for opt, arg in opts:
if opt in ['-h', '--help']:
print("hexo中新建一个post,将文章的内容追加到post后,将文章中的图片转移到hexo文件夹")
exit()
elif opt in ['-p', '--path']:
localArticle_path = arg
if args != [] and localArticle_path == '':
localArticle_path = args[0]
article_name = os.path.basename(localArticle_path)
return localArticle_path, article_name
def new_post():
os.system("hexo.cmd new post " + article_name.split('.')[0])
with open(os.path.join(hexoArticle_path, article_name), 'a', encoding='utf-8') as inputFile, open(localArticle_path, 'r', encoding='utf-8') as outputFile:
content = outputFile.read()
inputFile.write(move_pic(content))
def move_pic(content):
if content.find(localPic_path) != -1:
content.replace(localPic_path, hexoPic_path)
shutil.copytree(os.path.join(localPic_path, article_name.split('.')[0]),
os.path.join(hexoPic_path, article_name.split('.')[0]))
return content
if __name__ == "__main__":
os.chdir(r"D:\Resince\project\Hexo")
localArticle_path, article_name = get_args(sys.argv[1:])
if os.path.exists(os.path.join(hexoArticle_path, article_name)):
print(os.path.join(hexoArticle_path, article_name)+"文件已存在")
else:
new_post()
os.system(r"D:\Programs\Typora\Typora\Typora.exe " +
os.path.join(hexoArticle_path, article_name))
|
WeChat
AliPay
