From 6d3de05bdf9a0c4121ca2d3025de2eb61954c5cd Mon Sep 17 00:00:00 2001 From: bishsh Date: Tue, 26 Aug 2025 08:03:06 +0800 Subject: [PATCH] =?UTF-8?q?Update=202025=E5=B9=B48=E6=9C=88=20=E2=80=9Cadd?= =?UTF-8?q?-cms-system=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/2025.08/add-cms-system.md | 196 +++++++++++++++++++++++- 1 file changed, 191 insertions(+), 5 deletions(-) diff --git a/source/_posts/2025.08/add-cms-system.md b/source/_posts/2025.08/add-cms-system.md index c22e661..a40b8bf 100644 --- a/source/_posts/2025.08/add-cms-system.md +++ b/source/_posts/2025.08/add-cms-system.md @@ -1,14 +1,200 @@ --- filename: add-cms-system -title: 添加CMS系统 +title: 为博客添加CMS系统 date: 2025-08-25 22:03:00 -updated: '' -cover: '' -tags: '' +updated: 2025-08-26 08:01:00 +cover: https://pic.biss.click/i/2025/08/25/343482.webp +tags: 网站 categories: 建站手札 abbrlink: '' summary: '' toc: true comments: true --- -test +# 序言 + +因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms +{% sveltia-cms,sveltia,https://github.com/sveltia/sveltia-cms %} + +# 安装 +## 安装包 +在博客根目录下运行`npm i @sveltia/cms` +## 创建必要文件 +然后在博客`source`目录下创建`admin`目录 +并在其下新建`index.html` +```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系统、授权 +{% 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: +``` +# 大功告成 +访问博客的admin就可以了 +这是编辑页面 +
085014.webp