Elytre 是一个从目录文件构建带有搜索引擎的无服务器在线书店的工具。
Elytre 仍处于早期开发阶段,在该阶段将其用于生产是不明智的。在 1.0 发布之前(希望在 2021 年),预计会出现重大更改、奇怪的错误、损坏的测试和缺失的文档。
要求:
节点 v14.15+
纱
为您的项目创建一个空目录
初始化纱线: yarn init
添加鞘翅: yarn add --exact elytre
将start
和build
脚本添加到 package.json 中:
{ "scripts": {"start": "elytre start","build": "elytre build" } }
为了成功构建您的鞘翅站点,您的项目目录将至少需要三个文件:
指定站点信息和配置的site.yaml
文件(请参阅下面的站点配置文件规范)
描述您的图书目录的catalog.yaml
文件(请参阅下面的目录文件规范)。
用于自定义站点外观的styles.css
样式表(请参阅下面的样式表文件规范)。
或者,您可以添加到您的项目目录:
包含资源的public
目录,这些资源将被复制到构建目录,并且可以从您的styles.css
或site.yaml
文件中引用
包含封面图像的covers
目录。图像文件名必须符合以下模式: {ean}.jpg
(例如9781234567890.jpg
),并且图像文件名中的 ean 必须与目录中描述的产品的 ean 匹配。
包含使用 MDX 格式的自定义页面pages
目录。页面文件名必须符合以下模式: {slug}.mdx
,其中slug
将用于自定义页面 url。 about.mdx
文件将在/pages/about
中提供。 MDX 是 Markdown 格式的扩展,支持 JSX 并允许导入 React 组件。
通过在项目目录中添加site.yaml
文件来自定义站点的配置。
# 网站的标题,显示在网站的标头和浏览器的选项卡标题中:Les Éditions Paronymie# 网站的基本 URL,不带尾部斜杠baseUrl: https://paronymie.elytre.app# 网站的菜单菜单:# 菜单的插槽可以是标题、导航或页脚 页眉: 页脚: ... nav:# 菜单包含带有标签(文本)和链接(url)的条目列表 - 标签:关于链接:/pages/about- 标签:联系人链接:/contact/
通过在项目目录中添加catalog.yaml
文件来自定义产品目录。
global: # 全局属性应用于所有产品 buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # 一个产品 - ean: 9781234567890标题: Chaussons d'ours作者: Laetitia Manicon贡献者: - 姓名:Claude Monetrole:封面艺术家# 或“作者”或“翻译者”或“摄影师”发布日期:2021-01-04 页数:641originalLanguage:en # 或“fr”或“de”backCoverText:| # Markdown 格式 *« Lorem ipsum dolor sat amet, consectetur adipiscing elit。 »* Vivamus pharetra 位于 Tortor nec cursus。 Proin accumsan sagittis 骚扰。 Suspendisse euismod dolor quis egestas vulputate。 Maecenas et nisl nec dui ullamcorper aliquam nec aterat。存在于 nunc elit 中。 Nam metus ante, ultrices sat amet lacinia non, feugiat vitae ligula。 Mauris sollicitudin rutrum justo egestas dignissim。在我们的祖国、在希梅内奥斯的概念中,阶级是有默契的社会关系的。 Morbi euismod justo nec ipsum dapibus varius。 现在交流很顺利。菜豆 (Phasellus metus eros)、dignissim eu ex consectetur、aliquam rutrum Massa。 Ut pharetratellus totortor,eu dictum felis euismod ac。 Nullam ut Accumsan risus,请坐 amet consectetur leo。 Nunc tristique posuere eros,sit amet condimentum neque consequat eu。 Proin sollicitudin、lacus eleifend ullamcorper laoreet、turpis ante aliquet arcu、sit amet consectetur libero libero in dolor。 Quisque sodales ipsum eget lectus cursus pharetra。 Nam eu eleifend ipsum。 额外: - type: youtube # 将嵌入的 youtube 视频添加到产品的页面href: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews: - 文本:Un très grand Talent de la littérature poire.作者:Mélodie来源:Librairie L'Arbre à Nèfles – ParissourceUrl:https://www.arbreanefles.com # 另一种产品 - ean: 9781234567811标题: Sous-sol作者: Matt Yassenar
通过在项目目录中添加styles.css
文件来自定义网站的外观。
.ElytreSite { /* 这是您所有网站的全局包装。这里可以设置页面宽度、边距等*/} .Header { /* 站点标题如何显示 */} .Header .Menu { /* 标题菜单如何显示 */} .Header .Menu .MenuEntry { /* 单个条目如何在标题菜单中显示 */} .Product { /* 产品如何显示 */} .Product .Product-cover-image { /* 产品封面图片如何显示 */} .Product .Product-infos { /* 产品信息(标题、作者、ean)如何显示 */} .Product .Product-title { /* 产品标题的显示方式 */} .ProductList { /* 产品列表如何显示 */} .ProductList .Product { /* 产品在产品列表中的显示方式 */} .HomeView .ProductList .Product { /* 产品在主页列表中的显示方式 */} .ProductView .Product { /* 产品在单个产品页面上的显示方式 */} .Error404View .Error404View-title { /* 标题如何显示在 404 错误页面上 */} .Error404View .Error404View-reason { /* 如果在 404 错误页面上提供,原因如何显示 */} .Footer { /* 站点页脚如何显示 */} .Footer-powered-by { /* 页脚中的“Powered by Elytre”文本可以隐藏(请不要!)或在此处变得更加谨慎 */}
$ 纱线构建
这将在build
目录中构建您的生产网站,准备部署。您可以使用任何 Web 服务器或静态网站主机来提供此目录。
$ 纱线开始
这将启动本地网络服务器进行开发。打开 http://localhost:1854/ 在浏览器中查看。如果您编辑项目目录中的文件,该页面将自动重新加载。
此存储库中的 Lint 代码如下:
$ 纱线绒毛
使用以下命令在此存储库中运行测试:
$ 纱线测试
Elytre 由两个主要部分组成:
template/src
:模板 React 站点,与用户的自定义文件合并以构建最终的 elytre 站点
build/src
:一个节点工具,使用 React 模板和用户的自定义文件构建最终的鞘翅站点
两者都是用 Typescript 编写的,需要先进行转译才能使用。
$ 纱线构建
在将包发布到 npm 之前,文件会经过 linting、测试和转译。
在开发过程中,可以在模板文件发生更改时对其进行监视和转译:
$ 纱线开发