Hexo Netlify CMS

Netlify cms

✨ 前言

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

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

我们可以通过将博客部署到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 主题的友链功能,达到在线编辑预览友链的目的,但此方法不仅仅只适用于fluid 主题的友链功能,其他各类主题也可以通过此方法达到在线修改配置的目的,只要你配置完成,几乎可以修改所有配置项。包括但不限于以下类型的文件ymlyamltomljsonmdmarkdownhtml具体请查看 👉Netlify cms文档。

🔧 具体配置

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

具体可以查看:

👟 准备工作

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

image-20210418225044656

进入设置中

image-20210418225125358

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

image-20210418225239607

下滑找到Git Gateway并开启。

image-20210418225726557

至此准备工作完成

🎨 修改博客配置

在博客source文件夹中,创建admin文件夹,并新建两个文件index.htmlconfig.yml

image-20210418230338242

index.html中添加以下内容

<!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 中添加

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_imgindex_img等项目,不能正常使用请删除,如果你不是fluid 主题请根据实际情况对source\admin\config.yml配置进行修改,如果你和我一样是fluid主题,还需要将主题配置文件(/_config.fluid.yml)中的相对应的字段及其内容一并注释掉才能使其生效,类似于这样

image-20210420221125705

image-20210419015951835

并且创建source\_data\fluid_config.yml,将相关配置复制粘贴到里面(请根据此配置去主题配置文件中注释掉相对应的字段)

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语法非常了解也可以自行修改 🤣

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/即可访问你的博客后台。

😕 改进计划

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

😁 感谢

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


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!