4.9 KiB
4.9 KiB
filename, title, cover, tags, categories, abbrlink, summary, toc, comments, date, updated
| filename | title | cover | tags | categories | abbrlink | summary | toc | comments | date | updated |
|---|---|---|---|---|---|---|---|---|---|---|
| add-cms-system | 为博客添加CMS系统 | https://pic.biss.click/i/2025/08/25/343482.webp | 网站 | 建站手札 | 3a26a97a | 为博客添加CMS系统 | true | true | 2025-08-25 22:03:00 | 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
<!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系统、授权
{% 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添加
backend:
name: github # or gitlab
repo: username/repo
branch: main
base_url: <YOUR_WORKER_URL>
大功告成
访问博客的admin就可以了 这是编辑页面
