序言

因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms

🪧引用站外地址，不保证站点的可用性和安全性

sveltia-cms

sveltia

安装

安装包

在博客根目录下运行npm i @sveltia/cms

创建必要文件

然后在博客source目录下创建admin目录
并在其下新建index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>博客管理</title>
</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

新建config.yml

# https://decapcms.org/docs/configuration-options/
backend:
  name: github
  repo:  #博客存储库
  branch: #分支
  auth_type: 
  app_id:  
media_folder: "folder"
public_folder: "folder"
site_url: ""
logo_url: ""
locale: "zh_Hans"
common_col_conf: &common_col_conf
  create: true
  slug: "{{fields.filename}}"
  sortable_fields:
    - "commit_date"
    - "title"
    - "date"
    - "updated"
  # https://decapcms.org/docs/widgets/
  fields:
    - label: "文件名"
      name: "filename"
      widget: "string"
    - label: "标题"
      name: "title"
      widget: "string"
    - label: "发表日期"
      name: "date"
      widget: "datetime"
      format: "YYYY-MM-DD HH:mm:ss"
      date_format: "YYYY-MM-DD"
      time_format: "HH:mm:ss"
    - label: "更新日期"
      name: "updated"
      widget: "datetime"
      format: "YYYY-MM-DD HH:mm:ss"
      date_format: "YYYY-MM-DD"
      time_format: "HH:mm:ss"
      required: false
    - label: "封面"
      name: "cover"
      widget: "image"
      required: false
    - label: "标签"
      name: "tags"
      widget: "select"
      multiple: true
      required: false
      options:
        - "amazon"
        - "android"
        - "angularjs"
        - "azure"
        - "cdn"
        - "chartjs"
        - "chrome"
        - "csharp"
        - "css"
        - "devops"
        - "diary"
        - "docker"
        - "edge"
        - "git"
        - "github"
        - "hexo"
        - "html"
        - "icarus"
        - "java"
        - "js"
        - "life"
        - "material"
        - "mysql"
        - "nodejs"
        - "onedrive"
        - "oneindex"
        - "php"
        - "restapi"
        - "security"
        - "serverless"
        - "shadowdefender"
        - "tool"
        - "twikoo"
        - "ubuntu"
        - "vagrant"
        - "vb"
        - "vite"
        - "vue"
        - "webpack"
        - "windows"
        - "xlsx"
        - "小程序"
    - label: "分类"
      name: "categories"
      widget: "select"
      multiple: true
      required: false
      options:
        - "Diary"
        - "Tool"
        - "Tech"
        - "FrontEnd"
        - "BackEnd"
        - "Windows"
        - "Android"
        - "Linux"
        - "Serverless"
    - label: "正文"
      name: "body"
      widget: "markdown"
    - label: "原创"
      name: "toc"
      widget: "boolean"
      default: true
    - label: "评论"
      name: "comments"
      widget: "boolean"
      default: true
collections:
  - name: "2023"
    label: "2023"
    folder: "source/_posts/2023"
    preview_path: "2023/{{filename}}/"
    <<: *common_col_conf
  - name: "pages"
    label: "Pages"
    files:
      - name: "friends"
        label: "友链"
        file: "source/friends/index.md"
        preview_path: "friends/"
        <<: *common_col_conf
      - name: "about"
        label: "关于"
        file: "source/about/index.md"
        preview_path: "about/"
        <<: *common_col_conf

需要自己修改一些配置；
一般到这一步就可以了，但是因为我使用自己的服务器，没办法用官方的auth系统，所以还要进一步配置。

创建auth系统、授权

🪧引用站外地址，不保证站点的可用性和安全性

Sveltia CMS Authenticator

比较简单，直接Cloudflare一键部署就可以
然后要在github新建一个oauth应用，就不写了，可以自己查找。
然后在cloudflare新建环境变量：
GITHUB_CLIENT_ID:
GITHUB_CLIENT_SECRET:
然后在config.yml添加

backend:
  name: github # or gitlab
  repo: username/repo
  branch: main
  base_url: <YOUR_WORKER_URL>

大功告成

访问博客的admin就可以了