216 lines
4.9 KiB
Markdown
216 lines
4.9 KiB
Markdown
---
|
||
filename: add-cms-system
|
||
title: 为博客添加CMS系统
|
||
cover: 'https://pic.biss.click/i/2025/08/30/m9e5er.png'
|
||
tags: 网站
|
||
categories: 建站手札
|
||
abbrlink: 3a26a97a
|
||
summary: '为博客添加CMS系统'
|
||
toc: true
|
||
comments: true
|
||
date: 2025-08-25 22:03:00
|
||
updated: 2025-08-26 08:01:00
|
||
---
|
||
# 序言
|
||
|
||
因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms
|
||
|
||
|
||
{% link sveltia-cms,sveltia,https://github.com/sveltia/sveltia-cms %}
|
||
|
||
# 安装
|
||
|
||
## 安装包
|
||
|
||
在博客根目录下运行`npm i @sveltia/cms`
|
||
|
||
## 创建必要文件
|
||
|
||
然后在博客`source`目录下创建`admin`目录
|
||
并在其下新建`index.html`
|
||
|
||
```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`
|
||
|
||
```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系统、授权
|
||
|
||
{% link Sveltia CMS Authenticator,Sveltia CMS Authenticator,https://github.com/sveltia/sveltia-cms-auth %}
|
||
比较简单，直接Cloudflare一键部署就可以
|
||
然后要在github新建一个oauth应用，就不写了，可以自己查找。
|
||
然后在cloudflare新建环境变量：
|
||
`GITHUB_CLIENT_ID`:
|
||
`GITHUB_CLIENT_SECRET`:
|
||
然后在`config.yml`添加
|
||
|
||
```yml
|
||
backend:
|
||
name: github # or gitlab
|
||
repo: username/repo
|
||
branch: main
|
||
base_url: <YOUR_WORKER_URL>
|
||
```
|
||
|
||
# 大功告成
|
||
|
||
访问博客的admin就可以了
|
||
这是编辑页面
|
||
<center><img src="https://pic.biss.click/image/adb87c30-9af1-4723-9c41-16f4b5b8a1f3.webp" alt="效果图"></center>
|