Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
104 lines (85 sloc) 3.64 KB

Hexo Netlify CMS

npm npm

这是一个Netlify CMS的Hexo插件,你可以使用它,简单的开启Netlify CMS服务.

Live Demo | English Docs

快速开始

Step1: 添加依赖

yarn add hexo-netlify-cms

hexo s --debug添加--debug选项,打开http://localhost:400/admin/可进行预览

Step2: 在Netlify中开启服务

  1. 需要将你的源码push至GitHub仓库,并使用该源码项目启用netlify服务

  2. 开启netlify git-gateway服务

  3. 添加netlify-identity-widget.js, 代码如下
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

注意: 建议将身份认证设为仅邀请模式

等待部署完成, 访问${your-site}/admin/查看与使用

其他配置

设置自定义配置文件,覆盖默认的,自定义配置文件的定义变量与hexo配置文件的netlify_cms变量中定义的等效

netlify_cms:
  config_file: netlify-cms.yaml

设置post与page自动生成器

auto_generator:
  post: 
    # 如果你有多个Post文件夹,在这里定义多个,见https://github.com/jiangtj/blog/blob/master/netlify-cms.yaml
    all_posts:
      # 设置为false,关闭默认的Post
      #enabled: true
      label: "Post"
      folder: "source/_posts"
      create: true
      editor:
        preview: true
  # Page生成配置
  page: 
    enabled: true
    config:
      label: "Page"
      # 默认禁止删除Page文件
      delete: false
      editor:
        preview: true

设置全局的fields

global_fields:
  # 通过hexo配置覆盖时间格式
  over_format: true
  # 默认的fields
  default:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Publish Date", name: "date", widget: "datetime", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", format: "YYYY-MM-DD HH:mm:ss", required: false}
    - {label: "Tags", name: "tags", widget: "list", required: false}
    - {label: "Categories", name: "categories", widget: "list", required: false}
    - {label: "Body", name: "body", widget: "markdown", required: false}
    - {label: "Permalink", name: "permalink", widget: "string", required: false}
    - {label: "Comments", name: "comments", widget: "boolean", default: true, required: false}
  # 默认的post fields,如果设置,posts的fields将从这里取
  #post:
  # 默认的page fields,同理
  #page:

添加脚本, 用于自定义组件和预览样式
例如:
添加youtube.js至你的博客下
或者添加img.js至你的博客下

netlify_cms:
  scripts:
    - js/cms/youtube.js
    #- js/cms/img.js
    #或者使用 jsdelivr cdn
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/youtube.js
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/img.js

另外,其他的netlify_cms配置变量可以在Netlify CMS中找到

提示

  1. 建议开启Netlify Large Media,可以使媒体载入更快。Large Media Docs
You can’t perform that action at this time.