【译】Eleventy Soft UI - 由Prismic CMS提供

方石剑
406 阅读2分钟

编码员你好。

本文介绍了一个在现代Bootstrap 5设计之上，用Eleventy和Prismic CMS构建的开源启动器。Soft UI Design。该产品可用于更快地编码演示网站或个人博客。对于新手来说，Eleventy是一个轻量级的静态网站生成器，Prismic CMS提供了一个无头的博客服务。

谢谢你的阅读!- 内容由**App Generator**提供。

Eleventy Soft UI - Open-source static site powered by 11ty, Prismic and AppSeed.

要使用该产品，应在工作站中安装一个像样的Nodejs版本，并（可选择）一个Prismic账户（可选择免费级别）。

启动器解决的问题

静态网站对于编写简单的页面和演示网站来说是非常好的，但是对于博客来说，开发人员应该使用Markdown到Html的翻译来编辑他们的内容。Prismic帮助我们解决了这一问题，使开发者能够直观地编辑和设置内容。

它是如何工作的

  • 第1步- 在Prismic CMS中添加你的内容

  • 第2步--配置启动器以消费Prismic内容

  • 第3步--安装依赖性并启动该项目

  • 第4步--为生产而建

一旦所有步骤完成，11ty软体用户界面应该在浏览器中启动和运行，将所有Prismic文章拉到本地。

11ty Soft UI - 团队部分

11ty Soft UI - User profile Page, provided by Eleventy, Prismic and AppSeed.

11ty Soft UI - 联系页脚

11ty Soft UI - Fancy footer, provided by Eleventy, Prismic and AppSeed.

让我们建立产品

关于完整的说明，请访问**产品页面**（文档部分）。

第1步- 克隆这个软件库

$ git clone https://github.com/app-generator/eleventy-soft-ui-design.git
$ cd eleventy-soft-ui-design

第2步- 通过NPM或Yarn安装模块

$ npm i
// OR
$ yarn

第3步- 配置PrismicAPI Node

将.env.sample 重命名为.env 并指定PRISMIC_REPOSITORY_NAME 。如果你不熟悉Prismic ，请随意使用AppSeed提供的DEMO API ：https://eleventy-soft-ui-design.prismic.io/api/v2

PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_API_URL

步骤#4- 在开发模式下启动项目

$ yarn start

一旦项目被编译并且内容从Prismic ，就可以在浏览器中访问该项目：http://localhost:8080 。

从这一点上说，启动器可以用来编码简单的网站和个人博客，使用现代堆栈和由Creative-Tim精心制作的像素完美的UI。

谢谢你的阅读!更多资源请访问。

avatar
文章
阅读
粉丝