cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)

优采云 发布时间: 2022-04-05 20:26

  cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)

  为什么说这是最佳实践?如果你和我一样是追求终极目标的人,希望你的博客全面、在线编辑(这是最重要的)、主题丰富、支持高度定制、国内快速访问,那么我认为这是最好的做法。

  为什么要使用 Hexo?杰基尔

  jekyll 是一个简单的免费博客*敏*感*词*,类似于 WordPress。但它与 WordPress 有很大的不同,因为 jekyll 只是一个生成静态网页的工具,不需要数据库支持。但它可以与第三方服务合作,例如 discuz。最重要的是jekyll可以免费部署在Github上,可以绑定自己的域名。

  雨果

  Hugo 是一个用 Go 编写的静态 网站 *敏*感*词*,它快速、易于使用且可配置。Hugo 有一个内容和模板目录,并将它们呈现为完整的 HTML 网站。Hugo 依赖 Markdown 文件、元数据字体。用户可以从任意目录运行 Hugo,支持共享主机等系统

  海索

  Hexo 是来自台湾的 Tommy Chen 的基于 nodejs 的静态博客 网站 *敏*感*词*。

  特征:

  格地亚

  上手非常快,操作简单,适合小白,但是在新阶段,功能还不成熟。

  私人原因

  还是喜欢hexo的下一个主题。同时这个主题的高度定制化和丰富的插件让喜欢折腾的人很满意,所以我还是选择用hexo,不过现在大家好像都在迁移到hugo了。据说网站生成速度快,但是题材比较单一,所以暂时放弃。

  为什么要在 Github 上托管?

  因为大部分的博客渲染工具(hexo、hugo、gridea)都依赖于github,所以国内的编码页面在稳定性和易操作性、推送代码和广告等方面不如github稳定,全看你的水平氪金。所以推荐使用github托管。你可能会说编码页面在国内访问速度很快,但仅凭这个优势并不能称为最佳实践,下面的netlify会解决这一系列问题,先按未列出。

  最重要的是我们只使用github作为博客的托管仓库,不使用它的github页面进行部署

  为什么要使用 Netlify?

  先说一下它的作用:

  github页面:

  Netlify 和 Travis CI 的区别:

  所以使用 Netlify 就相当于替换了 GithubPage+ Travis CI。并且完美弥补了两者的不足。

  ps:在搜索相关资料的时候,发现有的博客把源码和渲染好的网页放在两个分支中(这也是hexo提倡的做法),但是只让netlify托管渲染的分支,这样的话, netlify 不能做自动部署。此时netlify只充当githubpage的角色

  为什么使用 Netlify cms?cms 是什么?内容管理系统(英文:content management system,缩写为cms)是指一套系统。该系统可应用于人工操作,也可应用于计算机或网络。内容管理系统作为一个中央存储库,可以集中存储相关内容,具有群组管理、版本控制等功能。版本控制是内容管理系统的主要优势。

  Netlify cms 的优点

  以下是编辑界面效果:

  

  部署Hexo相关操作

  由于关于hexo部署的文章已经有很多了,而且我也从网上看到了详细优质的hexo部署教程,这里就不解释如何部署hexo了。提供相关链接如下:

  Hexo 官方指南

  NextT 主题

  Git 页面用户指南

  Hexo + NexT + GitHub Pages 超深度优化打造个性化博客

  如何部署 Netlify

  首先要做的是注册。建议直接使用GitHub账号,然后按照提示授权选择仓库。部署参数如图:

  

  部署环境设置:

  

  第一次部署后会要求设置域名,直接输入自己的域名,然后默认即可。接下来,设置DNS,如下图:

  

  然后按照提示,进入你的域名服务商的管理界面,将域名服务器(DNS服务器)更改为Netlify提供的地址,如下图:

  

  接下来,设置 HTTPS。其实Netlify会自动为我们设置好,但是由于域名服务器的缓存(更改后的DNS无法及时生效),这个时间可能会比较长,所以可以去前面提到的谷歌文档。网站清除缓存以加快进程。

  

  其他设置压缩css、js、图片加速访问:

  

  至此,我们的netlify部署成功了,

  可以查看自动部署状态:

  

  ​​​

  Netlify cms操作记录添加依赖

  在hexo文件夹的左键菜单中打开git bash

  

  输入以下内容:

  yarn add hexo-netlify-cms

// or npm

npm i hexo-netlify-cms --save

  在hexo的config配置文件中添加如下内容(非next主题配置)

  netlify_cms:

config_file: netlify.yaml

  在hexo根目录下新建netlify.yaml文件,添加如下内容

  backend:

name: git-gateway

branch: master

media_folder: source/images

public_folder: /images

publish_mode: editorial_workflow

# pages auto generate

pages:

enabled: true

# over page collection config

# if fields not set, would use posts fields config

config:

label: "Page"

delete: false

editor:

preview: true

# fields:

# through hexo config over fields

over_format: true

scripts:

- js/cms/youtube.js

- js/cms/img.js

# A list of collections the CMS should be able to edit

collections:

# Used in routes, ie.: /admin/collections/:slug/edit

- name: "posts"

# Used in the UI, ie.: "New Post"

label: "Post"

folder: "source/_posts" # The path to the folder where the documents are stored

sort: "date:desc"

create: true # Allow users to create new documents in this collection

editor:

preview: true

fields: # The fields each document in this collection have

- {label: "Title", name: "title", widget: "string"}

- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", required: false}

- {label: "Updeted Date", name: "updated", widget: "datetime", 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}

  在 Netlify 中启动服务 启动服务:

  

  添加netlify-identity-widget.js,代码如下

  ​​​

  

  同时,为了防止你的文章被任意修改,设置为仅邀请模式:

  

  您可以发送具有权限的电子邮件邀请,最多 5 人。同时,您还可以添加使用您的 github 帐户登录的选项:

  

  完成后在你的网站添加后缀/admin,就会进入在线编辑界面(你也可以像我一样做个按钮放在博客侧边栏,方便操作)

  

  

  参考链接:

  部署 Hexo 静态博客到 Netlify

  Hexo Netlify cms

  不足之处

  git fetch --all && git reset --hard origin/master && git pull

  远程仓库拉取命令后,强制覆盖本地的,因为远程仓库被netlify自动部署后,远程仓库和本地仓库的内容会不一样

  待续

  个人主页:42one.xyz

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线