Hexo Netlify CMS 在线编辑博客

本文最后更新于：2021年9月1日 晚上

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：千泷
原文地址：https://www.myql.xyz/post/8f487fbb/

✨前言

我们都知道，Hexo 是一个静态部署博客的框架，优点在于速度快，成本低（无需服务器），缺点在于繁琐，你每次更新文章都需要去改代码，再部署推送，修改配置也是如此，你不能像 WordPress 一样直接在后台修改配置并使它生效。

不过有很多教程可以让你无需繁琐的部署，只管推送代码，通过 GitHub Actions，travis-ci，vercel，Netlify 等都可以便捷的进行博客的部署，只管写代码然后推送就好，类似的教程有非常多，在此就不再重复介绍。那么，我们是否可以在此基础上，更加便捷的进行静态博客的写作和管理？答案是可以的。

我们可以通过将博客部署到 Netlify，并使用 Netlify CMS 来做到这一点。

首先，我们来了解一下配置完之后可以做到哪些事情？

  • 在线新建，编辑，预览，删除博客文章
  • 支持文章草稿，工作流
  • 支持对博客图片的管理
  • 支持在线修改博客配置，例如对首页顶部图的修改，友链的修改

🎈图片预览

配置完的界面

在线对文章进行编辑，修改

工作流

对媒体资源的管理

对其他页面的修改

在线修改博客首页、文章页、归档页等页面的顶部图

在线添加、编辑友链页面

📃简单说明

下面我将会以 Hexo + 做演示，并配置 Fluid 主题的友链功能，达到在线编辑预览友链的目的，但此方法不仅仅只适用于 Fluid 主题的友链功能，其他各类主题也可以通过此方法达到在线修改配置的目的，只要你配置完成，几乎可以修改所有配置项。包括但不限于以下类型的文件yml、yaml、toml、json、md、markdown、html具体请查看 👉Netlify CMS 文档。

🔧具体配置

Netlify CMS 使用的前提条件是你必须将博客部署到 Netlify 上。因为网上有很多部署教程，这里不再重复。

具体可以查看：

👟准备工作

在部署完成后，你需要开启 Identity

进入设置中

将 Registration preferences 修改为 Invite only 此项为是否开启注册，默认是开启注册。修改为 Invite only 后表示仅受邀请的用户可以注册，当然此项你可以在自己注册完毕之后再行修改。

下滑找到 Git Gateway 并开启。

至此准备工作完成

🎨修改博客配置

在博客 source 文件夹中，创建 admin 文件夹，并新建两个文件 index.html 和 config.yml

在 index.html 中添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="x-UA-Compatible" content="IE=Edge">
        <meta name="apple-mobile-web-app-status-bar-style" content="white" />
        <title>魔王の领地</title>
    </head>
    
    <body>
        <script defer="true" src="https://cdn.jsdelivr.net/npm/netlify-cms@2/dist/netlify-cms.js"></script>
    </body>

</html>

在 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
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
backend:
  name: git-gateway # https://github.com/netlify/netlify-cms
  branch: main # 要更新的分支(可选；默认为主分支)

# This line should *not* be indented
publish_mode: editorial_workflow

# This line should *not* be indented
media_folder: "source/images/uploads" # 媒体文件将存储在图片/上载下的Repo中。
public_folder: "/images/uploads" # 上传的媒体的src属性将以/images/uploads开头。

site_url: https://www.myql.xyz # 网站网址
display_url: https://www.myql.xyz # 显示网址

locale: "zh_Hans" # 语言环境 https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-locales/src

collections:      # https://www.netlifycms.org/docs/configuration-options/#collections
  - name: "posts" # 在路由中使用，例如：/admin/collections/blog。
    label: "Post" # 在用户界面中使用
    folder: "source/_posts" # 存储文件的文件夹的路径。
    create: true # 允许用户在这个集合中创建新的文件。
    fields: # 每份文件的字段，通常是前面的内容。
      - {label: "顶部图", name: "banner_img", widget: "image", required: false} 
      - {label: "文章封面", name: "index_img", widget: "image", required: false} 
      - {label: "文章排序", name: "sticky", widget: "number", required: false}
      - {label: "标题", name: "title", widget: "string"}
      - {label: "发布日期", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", required: false}
      - {label: "更新日期", name: "updated", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", required: false}
      - {label: "标签", name: "tags", widget: "list", required: false}
      - {label: "分类", name: "categories", widget: "list", required: false}
      - {label: "关键词", name: "keywords", widget: "list", required: false}
      - {label: "摘要", name: "excerpt", widget: "list", required: false}
      - {label: "内容", name: "body", widget: "markdown", required: false}
      - {label: "永久链接", name: "permalink", widget: "string", required: false}
      - {label: "评论", name: "comments", widget: "boolean", default: true, required: false}

  - name: "pages"
    label: "Pages"
    files:
      - file: "source/about/index.md"
        name: "about"
        label: "关于"
        fields:
          - {label: "标题", name: "title", widget: "string"}
          - {label: "内容", name: "body", widget: "markdown", required: false}
          - {label: "评论", name: "comments", widget: "boolean", default: true, required: false}

# 如果你不是Fluid 主题，请删除以下配置，或者对文件路径及字段进行修改
  - name: "settings"
    label: "settings"
    files:      
      - file: "source/_data/fluid_config.yml"
        name: "fluid"
        label: "Fluid 主题配置"
        editor:
          preview: true      # 是否开启编辑预览
        fields:
          - label: "首页"
            name: "index"
            widget: "object"
            collapsed: true   # 是否折叠显示
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
          - label: "文章页"
            name: "post"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图(默认)"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number" 
              - label: "文章封面图(默认)"
                name: "default_index_img"
                widget: "image"
          - label: "归档页"
            name: "archive"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
          - label: "分类页"
            name: "category"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
          - label: "标签页"
            name: "tag"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
          - label: "关于页"
            name: "about"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
          - label: "友链页面"
            name: "links"
            widget: "object"
            collapsed: true
            fields:
              - label: "顶部图"
                name: "banner_img"
                widget: "image"
              - label: "高度"
                name: "banner_img_height"
                widget: "number"
              - label: "项目"
                name: "items"
                widget: "list"
                fields:
                  - {label: "网站名称", name: "title", widget: "string", required: false}
                  - {label: "网址描述", name: "intro", widget: "string", required: false}
                  - {label: "网站地址", name: "link", widget: "string", required: false}
                  - {label: "网站图片", name: "avatar", widget: "image", required: false}

请注意，这里我对 Fluid 主题进行了配置，例如banner_img、index_img等项目，不能正常使用请删除，如果你不是 Fluid 主题请根据实际情况对source\admin\config.yml配置进行修改，如果你和我一样是 Fluid 主题，还需要将主题配置文件（/_config.fluid.yml）中的相对应的字段及其内容一并注释掉才能使其生效，类似于这样

并且创建source\_data\fluid_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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
index:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@master/images/background.webp
  banner_img_height: 100
post:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@master/images/mmexport1602581319886.webp
  banner_img_height: 70
  default_index_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/wallhaven-g8wvm7.webp
archive:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/1616421595370-wallhaven-q6ov7d.jpg
  banner_img_height: 80
category:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/1616421818281-wallhaven-zm93dj.jpg
  banner_img_height: 80
tag:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/1616421669417-wallhaven-1kkm2g.jpg
  banner_img_height: 80
about:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/wallhaven-pkkr2.webp
  banner_img_height: 80
links:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/JSCDN@main/images/1616421416500-wallhaven-rddv31.jpg
  banner_img_height: 80
  items:
    - title: 小丁的个人博客
      intro: 世间所有的相遇，都是久别重逢
      link: https://tding.top
      avatar: https://tding.top/images/avatar.webp
    - title: 米奇妙妙屋
      intro: 逐风揽月登九天 踏浪擒龙游四海
      link: https://ifibe.com/
      avatar: https://cdn.jsdelivr.net/gh/useblue/ucdn/imgs/avatar.webp
    - title: 荷戟独彷徨
      intro: 爱光学，爱生活，爱创造
      link: https://guanqr.com/
      avatar: https://cdn.jsdelivr.net/gh/guanqr/blog/static/icons/android-chrome-512x512.png
    - title: iMaeGoo’s Blog
      intro: 虹墨空间站
      link: https://www.imaegoo.com
      avatar: https://www.imaegoo.com/images/avatar.jpg
    - title: 琉仙の后花园
      intro: 一起来种花家呀
      link: https://blog.lx101.cn/
      avatar: https://z3.ax1x.com/2021/03/28/cS2LNV.jpg
    - title: LOGI
      intro: 会点代码的强迫症
      link: https://logi.im
      avatar: https://code.bdstatic.com/npm/logicdn@1.0.0/logi.im/usr/images/global/logo.webp

请保持这样的格式，当然如果你对yml语法非常了解也可以自行修改🤣

1
2
3
4
5
6
links:
  items:
    - title: 			# 博客名称
      intro: 			# 博客描述
      link: 			# 博客链接
      avatar: 			# 博客logo

🤣结语

说一下为什么不推荐直接修改根目录下的 _config.fluid.yml 因为通过 Netlify CMS 在线修改配置文件后，仅会保留你已经在 source\admin\config.yml 中配置的选项，没有配置的选项会默认清空，按主题默认配置进行，你当然可以将所有选项进行配置，但是没必要，所以推荐通过 source\_data\fluid_config.yml 仅复制粘贴需要的选项进行修改配置。

至此 Netlify CMS 配置就算完成了，只要推送代码，等待片刻，通过你部署在 Netlify 上的域名，加 /admin/ 即可访问你的博客后台。

😁感谢

十分感谢 zkqiang 大佬对我的耐心帮助🎉🎉🎉