给hexo的博文添加图床、博文加密

hexo , 评论

关于博客的图片#

  • 1.少量图片可以丢到根文件的source/images文件夹下，算是可以解决，但不便于管理，并不推荐。

  • 2.多一点的图片可以丢到当前文件的同目录同名文件夹下。在_config.yml打开这个注释post_asset_folder: true 就会在hero new xxx的时候自动创建xxx目录放静态资源。（但是费劲，url变化后有问题）

    • hexo新版不支持![img](image_url)的正确渲染了，无法保证路径可以渲染成功。官方推荐用他的标签:

      1
      2
      3
      {% asset_path slug %}
      {% asset_img slug [title] %}
      {% asset_link slug [title] %}

    • 更多见 https://hexo.io/zh-cn/docs/asset-folders.html

    • 但是这种方式不是标准markdown语法，无法在我们的markdown编辑器里面正确显示，真是太low了，也不推荐。

  • 3.所以建议使用图床神器：ipic、和picgo 戳这里：https://github.com/Molunerfinn/PicGo

    • 大体原理就是可以一键自动上传图片到github或者gitee图床，妈妈再也不用担心我们的图片了。下面是picgo和typora编辑器配合的配置，爽到爆.

Linux 下 typora+picgo图床#

picgo是node写的一个图片上传工具,分为app和命令行(picgo-core),下面会介绍picgo安装使用

PicGo App:#

  • 下载app: https://github.com/Molunerfinn/PicGo/releases
  • app只是为了测试和生成配置文件,后续使用的时候我们还是会用命令行模式
  • 下载后根据想用的图床安装对应的插件,下面有gitee/gitlab/兰空自建图床/amazon s3协议OSS

picgo插件

oss上传更推荐s3-lls插件，更稳定：

更推荐s3-lls插件，更稳定

基于Gitlab图床#

因为gitee图床已经废了,官方加了防外链(真是太辣鸡了),github国内访问速度太慢,下面试试gitlab:

  • 首先在PicGo里面安装gitlab-files 插件:
  • 然后去gitlab注册账号,创建项目
  • 在项目管理页面复制项目id,和可以访问此项目的token
  • 划分路径,比如我们上传到gitlab此项目的/new/年份/ 下面
  • 然后在上传区测试可以上传成功.

gitlab配置

基于Backblaze的图床:#

Backblaze 提供的云存储服务价格低廉，而 Cloudflare 则可以提供稳定且快速的 CDN 服务，两者之间的数据传输也是免费的，使用 Picgo 结合 s3插件 则可以轻松解决图片上传到 Backblaze 的问题。

Backblaze+CF+域名就行了,具体实践参见这里

https://www.cnblogs.com/hopeblaze/articles/18599214

https://blog.csdn.net/qq_45890533/article/details/130211510

这里说一下大概流程：

CF操作#

  • DNS解析自定义域名到bz2的文件预览域名
  • CF开启文件缓存，减少对bz2的读取流量。
  • CF规则，开启url重写隐藏bucket名字。
  • CF增加response header转换规则，remove掉bz2的特征header

picgo中安装典型配置

s3服务设置

picgoApp与picgo命令行配置文件交互#

重点来了!

在picgoApp的插件设置里面找到打开配置,就能看到生成的配置文件~/.config/picgo/data.json:

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
{
  "uploaded": [],
  "picBed": {
    "current": "gitlab-files-uploader",
    "list": [
      {
        "type": "tcyun",
        "name": "腾讯云COS",
        "visible": false
      },
      {
        "type": "aliyun",
        "name": "阿里云OSS",
        "visible": false
      },
      {
        "type": "smms",
        "name": "SM.MS",
        "visible": false
      },
      {
        "type": "github",
        "name": "GitHub",
        "visible": false
      },
      {
        "type": "qiniu",
        "name": "七牛云",
        "visible": false
      },
      {
        "type": "imgur",
        "name": "Imgur",
        "visible": false
      },
      {
        "type": "upyun",
        "name": "又拍云",
        "visible": false
      },
      {
        "type": "gitee",
        "name": "gitee",
        "visible": true
      },
      {
        "type": "gitlab-files-uploader",
        "name": "gitlab files 图片上传",
        "visible": true
      },
      {
        "type": "lankong",
        "name": "lankong",
        "visible": false
      }
    ],
    "gitee": {
      "branch": "master",
      "customPath": "",
      "customUrl": "",
      "path": "img/",
      "repo": "XXX/XXX",
      "token": "XXXXXXXXXXX"
    },
    "uploader": "gitlab-files-uploader",
    "gitlab-files-uploader": {
      "gitUrl": "https://gitlab.com",
      "projectId": "XXXXX",
      "branch": "XXX",
      "gitToken": "XXXXXXXXXXX",
      "gitVersionUnderThirteen": false,
      "fileName": "/new/{year}/{year}{month}{day}{hour}{minute}{second}_{fileName}",
      "commitMessage": "Upload {fileName} at {year}-{month}-{day}",
      "deleteRemote": false,
      "deleteMessage": "Delete {fileName} at {year}-{month}-{day}",
      "deleteInform": false,
      "authorMail": "[email protected]",
      "authorName": "picgo"
    },
    "smms": {
      "token": "123"
    }
  },
  "settings": {
    "shortKey": {
      "picgo:upload": {
        "enable": true,
        "key": "CommandOrControl+Shift+P",
        "name": "upload",
        "label": "快捷上传"
      }
    },
    "server": {
      "port": 36677,
      "host": "127.0.0.1",
      "enable": true
    },
    "showUpdateTip": false,
    "rename": false,
    "autoStart": true,
    "autoRename": false,
    "uploadNotification": true,
    "pasteStyle": "markdown",
    "privacyEnsure": true
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true,
    "picgo-plugin-gitlab-files": true,
    "picgo-plugin-lankong": true,
    "picgo-plugin-s3": true
  },
  "debug": true,
  "PICGO_ENV": "GUI",
  "needReload": false,
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2022-09-12 02:15:31"
  }
}

注意看配置文件里面我们UI安装的

“picgoPlugins”: {
“picgo-plugin-gitee-uploader”: true,
“picgo-plugin-gitlab-files”: true,
“picgo-plugin-lankong”: true,
“picgo-plugin-s3”: true
}

这几个视需求,一会儿需要在命令行也安装

Typora图像上传配置，及PicGo 命令行#

  • windows可以直接在typora选exe文件，即可忽略下方picgo命令行部分

    图像上传配置

    linux需要使用命令行：#

  • typora需要使用命令上传,所以需要安装命令行.先安装node,再npm install picgo-core -g

  • 因为我们用gitlab图床,所以执行npm install picgo-plugin-gitlab-files -g安装对应插件

需要把上面picgo App UI生成的配置文件片段复制到picgo command的配置文件’~/.picgo/config.json’里

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
{
  "picBed": {
    "current": "gitlab-files-uploader",
    "list": [
      {
        "name": "SM.MS图床",
        "type": "smms",
        "visible": false
      },
      {
        "name": "腾讯云COS",
        "type": "tcyun",
        "visible": false
      },
      {
        "name": "GitHub图床",
        "type": "github",
        "visible": false
      },
      {
        "name": "gitee",
        "type": "gitee",
        "visible": true
      },
      {
        "type": "gitlab-files-uploader",
        "name": "gitlab files 图片上传",
        "visible": true
      },
      {
        "type": "lankong",
        "name": "lankong",
        "visible": false
      }
    ],
    "gitlab-files-uploader": {
      "gitUrl": "https://gitlab.com",
      "projectId": "666666",
      "branch": "XXXX",
      "gitToken": "XXXXXXXXXXXXXXX",
      "gitVersionUnderThirteen": false,
      "fileName": "/new/{year}/{year}{month}{day}{hour}{minute}{second}_{fileName}",
      "commitMessage": "Upload {fileName} at {year}-{month}-{day}",
      "deleteRemote": false,
      "deleteMessage": "Delete {fileName} at {year}-{month}-{day}",
      "deleteInform": false,
      "authorMail": "[email protected]",
      "authorName": "picgo"
    },
    "gitee": {
      "branch": "master",
      "customPath": "",
      "customUrl": "",
      "path": "img/",
      "repo": "XXX/XX",
      "token": "XXXXXXXXX"
    }
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true,
    "picgo-plugin-gitlab-files": true,
    "picgo-plugin-lankong": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2021-10-19 10:57:05"
  }
}

  • 配置了之后可以测试一下/path/to/node /path/to/picgo upload /path/to/some_image.jpeg,如果成功并返回图片url就ok了.

  • 然后找到picgo可执行文件,在typora配置“上传服务”:

    • 用户自定义命令,/path/to/bin/node /path/to/node_modules/picgo/bin/picgo upload

    上传命令配置

关于博文加密#

个别私有博文不方便暴露，需要给博文添加密码，因为我们没有动态服务器去存储密码，只能是在渲染的时候加密，浏览的时候前台js解密。

经过搜寻找到一个工具叫做hexo-blog-encrypt，在Github这里。它会使用对称加密把博文的内容真正加密成密文，只有用户输入密码正确后才会解密成功。

中文介绍在这里，使用起来也很简单，在hexo的主目录安装加密插件：

1
cnpm install --save hexo-blog-encrypt

安装完插件后，在hexo的主目录配置一下这个插件_config.yml，添加加密的安全配置：

1
2
3
4
5
6
7
# Security
encrypt: # hexo-blog-encrypt
  abstract: 本文为加密的内容, 请输入密码后查看。
  message: Password Here：
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: wrong password, try again!
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

然后编辑一下博文的模板文件，把密码字段加到头上：

1
vim scaffolds/post.md

就像下面这样，password框里如果是空的就不会加密，否则就会加密：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }}
date: {{ date }}
tags:
- tag1
- tag2
categories:
- xx
urlname: 修改我xxxx.html
password:
---
<!--此处生成目录-->
<!-- toc -->
<!--下面是latex渲染框架katex样式所需的css，不使用latex的话可以删掉-->
<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

这样在列表的时候摘要会显示上面的abstract中的内容，输入框提示message消息。

猫哥Risk Control Engineer

一个金融风控软件工程师。