nuxt netlify cms starter template下载 - nuxt netlify cms starter template源码下载

nuxt netlify cms starter template

其他类别

v2.0.0

下载

Nuxt.js + Netlify CMS 入门模板

使用 Vue.js 和 Netlify CMS 构建无服务器静态网站。

这是一个基于 Nuxt v1.x 的入门模板，用于使用 Vue.js 和 Netlify CMS 构建静态网站。它涵盖的内容：

通过 Vue CLI 设置？
轻松设置一个几乎空白的 Nuxt.js 项目。
目前尚未针对 Vue CLI v3.0 进行优化。
通过 Netlify CMS 进行内容编辑✏️
Netlify CMS 是一个客户端 CMS，直接连接到 git 存储库来编辑 Markdown 文件。
还支持其他文件格式，但此模板仅适用于默认的 frontmatter markdown 格式。
通过 Nuxtent/Nuxtdown 模块在 Vue.js 中显示内容？️
Nuxtdown 模块（Nuxtent 的固定分支）允许查询内容并在 UI 中显示。
通过 Nuxt.js 生成静态站点✅
Nuxt.js 是构建通用 Vue.js 应用程序的著名框架，它生成一个静态站点。

Nuxt.js + Netlify CMS 入门模板

配置
发展
生产
通过 FTP 手动部署
部署到 Netlify
与其他 CI 解决方案一起部署
先决条件
设置
用法
已知问题
贡献

先决条件

确保安装了node 8.0+和npm 5.0+
您知道 Netlify CMS 和 Nuxt.js 是什么。

设置

通过 vue-cli 安装：如果您使用较新版本的 Vue CLI，您可能需要安装额外的软件包才能使vue init工作，因为此模板尚未针对较新的 Vue CLI 进行优化。

 $ vue init renestalder/nuxt-netlify-cms-starter-template my-project
  $ cd 我的项目
                  # 安装依赖项$ npm install # 或者yarn install

将项目推送到 git 存储库：为了能够编辑内容，您需要将项目推送到 git 存储库。 CMS 始终直接连接到 git 存储库并编辑static/admin/config.yml中设置的分支上的内容。

很好，您已经完成了开始的重要步骤。现在，为您的基础架构正确配置所有组件。

用法

配置

CMS 身份验证和模型配置存储库的托管位置以及 CMS 用户如何登录以编辑内容。还可以为您的内容定义文件和字段。
文件： static/admin/config.yml
文档：Netlify CMS 官方文档 -> 配置
路由与查询
开箱即用的 UI 不知道内容存储在哪里以及哪些动态路由属于哪些内容。 Nuxt.js 默认只能映射静态页面。不会检测到动态路由，例如具有不同文件名的博客文章。此配置由 Nuxtdown 进行。
文件： nuxtdown.config.js
文档：Nuxtdown 自述文件
一般网站信息
HTML <head>标签和页面标题等一般信息是通过 Nuxt.js 设置的。不用担心 Nuxt.js 的路由配置，这个问题可以通过 Nuxtdown 解决。
文件： nuxt.config.js
文档：Nuxt.js 官方文档 -> 配置

发展

在开发过程中，运行应用程序的客户端 SPA 版本。使用dev或serve任务，无论哪种更适合您。他们也这样做。

 # 在 localhost:3000$ 进行热重载服务 npm run dev

转到 http://localhost:3000

生产

对于生产，生成静态站点。

 # 生成静态项目$ npm rungenerate

通过 FTP 手动部署

为了使其在生产服务器上运行，构建需要知道站点将运行的最终 url/域。为此，您可以编辑package.json中的npm generate:manual任务并设置生产 URL。当您手动部署网站时，这非常有用：

 # 生成一个静态项目，该项目将托管在 package.json 中给出的 URL 上$ npm rungenerate:manual

部署到 Netlify

生成的项目的文件夹将包含一个netlify-example.toml文件，您可以将其重命名为netlify.toml以开始 Netlify 部署。它会根据您的 Netlify 配置和部署类型（生产部署、分支部署、预览部署）自动设置BASE_URL 。因此无需在package.json中设置生产 URL 。