Hexo Netlify CMS 在线编辑博客

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

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

✨ 前言

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

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

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

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

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

🎈 图片预览

配置完的界面

image-20210420211303684

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

image-20210418222435713

image-20210418222455291

工作流

image-20210420212403763

对媒体资源的管理

image-20210420212801157

对其他页面的修改

image-20210420213123997

image-20210420213142628

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

image-20210420214308165

在线添加、编辑友链页面

image-20210418223337304

image-20210418223354013

🔗 在线演示

为了更加直观，做了一个已经配置完毕的博客，你可以在线体验上述功能 👉点我查看

📃 简单说明

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

🔧 具体配置

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

具体可以查看：

👟 准备工作

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

image-20210418225044656

进入设置中

image-20210418225125358

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

image-20210418225239607

下滑找到 Git Gateway 并开启。

image-20210418225726557

至此准备工作完成

🎨 修改博客配置

在博客根目录中找到_config.yml并修改，这一步是跳过文件夹渲染，不然后面会出错

1
skip_render: admin/*

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

image-20210418230338242

在 index.html 中添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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" />
    <script
      type="text/javascript"
      src="https://identity.netlify.com/v1/netlify-identity-widget.js"
    ></script>
    <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
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）中的相对应的字段及其内容一并注释掉才能使其生效，类似于这样

image-20210420221125705

image-20210419015951835

并且创建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/img@main/images/background.webp
  banner_img_height: 100
post:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/mmexport1602581319886.webp
  banner_img_height: 70
  default_index_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-g8wvm7.webp
archive:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-q6ov7d.webp
  banner_img_height: 80
category:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-zm93dj.webp
  banner_img_height: 80
tag:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-1kkm2g.webp
  banner_img_height: 80
about:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-pkkr2.webp
  banner_img_height: 80
links:
  banner_img: https://cdn.jsdelivr.net/gh/leicancun/img@main/banner_img/wallhaven-rddv31.webp
  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/ 即可访问你的博客后台。

🚀 一键部署

如果你感觉有点繁琐，或者怕配置出错可以直接使用我配置好的一键部署来快速搭建你的博客 👉点击前往

ps: 即使是一键部署也不要忘记准备工作里的步骤，这很重要

😕 改进计划

因为对 css 不太熟悉，并没有设置页面自适应，导致现在编辑页面的预览体验很差，在手机上显示也不甚理想，等我多熟悉熟悉 css 然后弄一下自适应。

目前对图片并没有自适应，在手机上显示的效果也不算好，因为能力有限折腾了很久没弄明白，官方文档在这里 👉点我查看
如果能有大佬能帮助我就更好了，十分欢迎各位大佬

😁 感谢

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

功能增强
#用户经验 #花里胡哨 #Hexo
Hexo Netlify CMS 在线编辑博客
https://retech-fe.github.io/blog/2021/04/20/hexo-netlify/
作者
千泷
发布于
2021年4月20日
许可协议