MENU

利用 Netlify CMS 为静态站点搭建后台管理界面 | Blog 折腾小记(7)

December 27, 2018 • Read: 124 • 笔记•记录

本文若有失效或者错误内容请留言或者通过其他方式联系我,尽可能及时更新。

欢迎关注不怎么更新的 TG 频道


前言

  • 把博客托管在 Netlify 一段时间了,感觉很不错,今天又了解到 Netlify CMS 服务,决定给博客弄一个,按照官方文档顺利搭建成功,以下是过程记录。
  • 如果没有站点的话可以按照官方模版快速搭建一个带有 CMS 的站点;我的内容记录主要是在已有 Netlify 站点基础上添加 Netlify CMS,英文文档见Add To Your Site

搭建过程

创建 admin 文件夹

该部分是最关键的内容,认真做完这一步基本就完成了 Netlify CMS 的搭建了。

admin 文件夹用来存储 Netlify CMS 文件,这些文件在站点部署后应该位于根目录下。不同的静态站点生成器存放 admin 文件夹位置可能不同,我是用的Hugo,所以在/static下创建 admin 文件夹,且创建index.htmlconfig.yml两个文件:

admin
 ├ index.html
 └ config.yml

编辑index.html

index.html即为访问your-domain-name/admin时展示的页面,内容可以如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

编辑config.yml

config.yml用于编辑 Netlify CMS 的配置,我的项目仓库在 Bitbucket,和 GitHub/GitLab 在一些配置上有点区别,GitHub/GitLab 仓库的配置可见官方文档

  • Backend

对于 Bitbucket 仓库,Bitbucket backend可以直接使用 Bitbucket 账号登录 CMS,注意所有人需要仓库内容的读写权限才能登录后台界面。

backend:
  name: bitbucket
  repo: owner-name/repo-name # 仓库路径

除了编写以上内容外,需要在 Bitbucket 注册一个OAuth application,以下以 Bitbucket 为例介绍注册过程,其他平台类似:

  1. 进入账户设置界面,点击OAuth,找到OAuth consumers
  2. 点击Add consumer
  3. 除了Callback URL需填写https://api.netlify.com/auth/done,其他可以自定义。
    OAuth

完成注册后可以得到如下的KeySecret,然后把这些内容添加到 Netlify 项目。
Netlify-CMS-OAuth.png

添加步骤如下:

  1. 打开Netlify 主页进入网站项目;
  2. 找到Settings -> Access control -> OAuth
  3. OAuth下添加KeySecret,如图。
    netlify-install-provider.png
  • Media and public folder
media_folder: "static/img/post" # 存放图片的文件夹
public_folder: "/img/post" # 上传图片的src属性会以该路径开头
  • Collections
# 以下是我的Collections内容,如需要请根据自己的头文件内容自定义
collections:
  - name: "post" # 定义该collection的路径
    label: "Blog" # 后台显示的名字
    folder: "content/blog/2018" # 文章存放文件夹
    create: true # 允许创建新文件
    slug: "{{slug}}" # 文件名字模版,{{slug}} 取自title
    fields: # 定义front matter的显示与数据类型
      - { label: "Title", name: "title", widget: "string" }
      - {
          label: "Author",
          name: "author",
          widget: "string",
          default: "WithdewHua",
        }
      - { label: "Type", name: "type", widget: "string", default: "post" }
      - { label: "Categories", name: "categories", widget: "list" }
      - { label: "Tags", name: "tags", widget: "list" }
      - { label: "Series", name: "series", widget: "list", required: false }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - {
          label: "Lastmod",
          name: "lastmod",
          widget: "date",
          default: "",
          required: false,
          format: "YYYY-MM-DD",
        }
      - {
          label: "Description",
          name: "description",
          widget: "text",
          required: false,
        }
      - {
          label: "Featured Image",
          name: "featured",
          widget: "image",
          required: false,
        }
      - {
          label: "Featured Alt",
          name: "featuredalt",
          widget: "string",
          required: false,
        }
      - {
          label: "Featured Path",
          name: "featuredpath",
          widget: "string",
          default: "img/post",
          required: false,
        }
      - { label: "Slug", name: "slug", widget: "string", required: false }
      - {
          label: "Draft",
          name: "draft",
          widget: "boolean",
          default: false,
          required: false,
        }
      - {
          label: "Show TOC",
          name: "showtoc",
          widget: "boolean",
          default: true,
          required: false,
        }
      - { label: "Post Content", name: "body", widget: "markdown" }

更多的WidgetsCollections内容可参考Widget DocCollection Reference Doc

Netlify 设置

允许 Identity 服务

  1. 进入 Netlify Settings -> Identity, 选择Enable Identity service;
  2. 剩余选项内容可根据自己需要调整。

添加 Netlify Identity 挂件

  • admin/index.html和自己网站页面的<head>元素间(如我的网站中的layouts/partials/header.html)添加以下代码;
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  • 在自己网站页面的</body>元素前(如我的网站中的layouts/partials/footer.html)加入以下代码,用于验证后跳转回自己网站。
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

以上完成之后,将文件上传至 Bitbucket 仓库就全部完成了,可以进入your-domain-name/admin登录查看搭建好的后台界面了,以下是我的:
admin-1.png


本文链接:https://10101.io/2018/12/27/manage-content-using-netlify-cms
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可,转载请注明出处。

Last Modified: October 30, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

6 Comments
  1. Anonymous Anonymous

    你这博客复制真恶心,我还是去 Hugo 官网吧。

    1. @Anonymous兄dei太直接了,哈哈😄

  2. 我觉得有点简陋,不好用。

    1. @juby应急用下,做点小修改之类的

  3. nice,之前还在想怎么给Hexo加后台。

  4. Anonymous Anonymous

    虽然我也看不太懂,但应该是在做你自己喜欢的事情,加油呐!祝好~