optimize images and move posts to subfolders
This commit is contained in:
215
source/_posts/2025/2025.08/add-cms-system.md
Normal file
215
source/_posts/2025/2025.08/add-cms-system.md
Normal file
@@ -0,0 +1,215 @@
|
||||
---
|
||||
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/i/2025/08/30/kq7mnh.png" alt="效果图"></center>
|
||||
Reference in New Issue
Block a user