存储前置框架
网络软件包 基于 开发和建设工具 贾姆斯塔克 打开 巴布亚新几内亚 电子商务模板 E-Com + APIs
启动模板
storefront-framework 是联署材料工具 创建新模板
更快,有更好的发展经验,
但是如果你不想从头开始整个模板,
我们还提供
存储前端, (中文(简体) ),
以本框架构建的
并也是开源:wink :
存储前端 是一个完整的电子商务模板 少数的依附者, 您可能改变您需要自定义的内容 并设置自己的主题和脚本.
开始
首先, 将模块安装为 dev 依赖 :
npm i --save-dev @ecomplus/storefront-framework
注:当您可以安装和运行时
storefront-pack在全球, 我们建议在本地安装.
图标
storefront-pack serve数字 : 在端口启动 Webpack 开发服务器 9100个 (http://localhost:9100);storefront-pack build数字 : 汇编用于制作和上交电子商务网页的资产;
可选论点
--port=8080数字 : 更改 Dev 服务器端口号, 您可以替换 8080 (韩语) 以你们所要的盟誓;--verbose数字 : Webpack汇编过程的详细产出;--analyze数字 : 打开 Webpack 软件包分析器 dev 服务器;--sw数字 : Dev 服务器上的强制设置清单和服务工作员;--prerender=index,app/index数字 : 列出要预发的 URL( 默认为全部);--prerender-limit=50数字 : 限制要预先提交的随机URL的数量;--no-bundler数字 : 禁用 Webback 编译只运行视图渲染;
国家预防机制脚本
国家预防机制 package.json 脚本是运行的方便而有用的工具
本地安装的二进制不需考虑
关于他们的全道。 简单定义脚本:
{
"scripts": {
"serve": "storefront-pack serve",
"build": "storefront-pack build"
}
}
并在您的终端/控制台运行以下功能:
npm run serve
生产大楼:
npm run build
内容管理系统
你应该用CMS来做店页,
我们建议 将内容管理系统网化 和提供
启动器
config.yml
文档.
全体 内容必须是JSON,保存在 content 文件夹.
招标
我们用 EJS (英语) 预览 以下模板数据:
data = {
_: {
// Boolean development mode
devMode,
// Parsed object from `content/settings.json`
settings,
// Function to get CMS JSON content by filepath
cms,
// Function to get `content/dictionary/${lang}` object
dictionary,
// MarkdownIt instance to parse MD markup
md,
// Store ID number
storeId,
// Language code string
lang,
// Brand colors RGB
primaryColor,
secondaryColor,
// Preloaded data from E-Com Plus APIs
store,
categories,
grids,
items,
// Contextual route object
route,
// Async resolve current route and get context object
resolveRoute,
// Lodash utility library
// https://lodash.com/docs/
lodash,
// Utility functions for e-commerce
// https://developers.e-com.plus/ecomplus-utils/
ecomUtils,
// E-Com Plus APIs client
// https://developers.e-com.plus/ecomplus-client/
ecomClient,
// Search engine constructor
// https://developers.e-com.plus/search-engine/
EcomSearch,
// Detect local images dimensions
// https://github.com/image-size/image-size
tryImageSize,
imageSize
}
}
EJS 配置有支持
asyc/await 财务报告和审定财务报表 includes。 。 。 .
注意所有参数都在母体内
_(单位:千美元)全球, (中文(简体) ), 我们用它来方便通过原始模板参数 包括EJS在内.
实例
你可以把EJS的这些观点 编码到我们
storefront-template 复发.
正在装入 JSON 内容
您可以通过调用 CMS 来装入内容 cms 函数
文件名( 不含扩展名) 作为参数, 如:
<% const page = _.cms('pages/about-us') %>
<%= page.title %>
解析下标的内容
你的一些CMS内容可能会被保存为减值,
在 EJS 视图上,您可以通过使用 md.render 函数,
例如:
<%= _.md.render(pages.home.md_content) %>
处理弹壳和路线
模板参数将有一个 route 财产,
它会是一个对象 不同类型的视图:
- 储存资源(产品、类别、品牌、收藏):
route = { path, resource, _id }
你应该用 route._id 获得各自身体
资源文档与 ecomClient· ;
- CMS 文件夹收藏( 如: 博客 或者说 页次:
route = { path, collection, slug }
你应该用 route.slug 获取已解析的 CMS 内容
与 cms 函数;
- 在其他情况下,例如:
index.ejs数字 :
route = { path }
你可以用这个 route.path 了解当前背景
(a) 包括环境司法服务部分;
上下文对象
与 resolveRoute 函数可以获取上下文对象
有资源 body 或 CMS 收藏 content数字 :
<%
const context = _.resolveRoute()
if (_.route.resource) {
// store resource
// context = { resource, body }
} else if (_.route.collection) {
// cms folder collection
// context = { collection, slug, content }
} else {
// context = {}
}
%>
包含绝对路径
通过 绝对路径 (posix) 您可以导入 EJS 文件
直接从 @ecomplus/storefront-template
(或其他配置为 STOREFRONT_TEMPLATE 环境)
template/pages数字 :
<%- await include('/@/views/home', { _ }) %>
项目结构
为配合这一框架, 您的模板项目 必须 具有以下文件结构:
基本目录树
├── content
└── template
├── assets
├── js
├── pages
├── public
│ ├── admin
│ └── img
│ └── uploads
└── scss
/content
Netlify CMS(或任何其他无头的CMS)的根目录 收藏 JSON满足. 您可以在此创建和/或编辑内容以预设 一些用于示例或默认的内容.
settings.json
需要并且至少必须具备
属性预设为默认值.
/template
源模板文件. 所有JS,SCSS,图像和其他资产文件应放在这里.
/template/assets
预定义的模板资产( 如图像, 视频, 声音...)
应在内部导入 js 或者说 scss 文档.
/template/js
JS线人档案,
index.js
需要,
其他文件和模块应从索引中导入.
其他联署材料 /template/js 目录
还将被视为额外的
Webpack 输入点。 。 。 .
/template/public
任何固定资产 public
文件夹将被简单地复制而不通过 Webpack .
你需要使用绝对路径来参考它们.
/template/public/admin
设置 将内容管理系统网化, (中文(简体) ), 如果您不打算使用引用的 CMS , 则可以选择 .
config.yml
应该是
配置
遵循您的模板选项和特性.
设置收藏( 文件) content/settings.json(中文(简体) )
必须有至少预设的字段.
/template/public/img
在此放置默认的 favicon 和 app 图标 .
/template/public/img/uploads
将内容管理系统网化
媒体
打开 uploads 文件夹,商家可以在此
上传自定义标志、旗帜、图标和其他资产
CMS仪表板.
/template/scss
常设委员会
来编译 CSS 样式表,
styles.scss
需要其他文件和模块
应输入其中.
/template/pages
EJS (英语) 标记以编译 HTML 页面.
需要的文件 :
├── index.ejs
├── #brands.ejs
├── #categories.ejs
├── #collections.ejs
└── #products.ejs
上述文件必须在
根数 pages 目录.
要完成存储前端模板, 您还应当创建其它 EJS 视图. 你想用多少页都可以, 您可以选择任何文件名.
您可能想要添加一个 #cms 内部文件夹
页面目录,此文件夹应包含 EJS 视图
文件夹收藏, (中文(简体) ),
女巫会产生多颗子弹.
例如, 对于文件夹上的博客文件夹收藏 content/blog, (中文(简体) ),
你应该有一个视图 #cms/blog.ejs,它将为每个生成 HTML 页面
由 CMS 保存 .
产出
在制作时,文件将创建于 dist 文件夹,
template/js/index.js 将捆绑到 dist/storefront.js
财务报告和审定财务报表 template/scss/styles.scss 改为 dist/storefront.css。 。 。 .
附加切入点 template/js/ 或者说 template/scss/
root 将尊重原始文件名.
EJS开始 template/pages/ 将解析为 dist/[file].html
或者说 dist/[slug].html 在储存资源或CMS的情况下
文件夹收藏.
与 Web 软件包合作
Webpack 配置最简单的方式是提供一个对象,由导出
storefront.webpack.js 在您的工程根上的文件.
默认 Webpack 化名
我们准备好了 #template 当 Webpack 解析别名为
@ecomplus/storefront-template/template
(或如果配置为 STOREFRONT_TEMPLATE (原始内容存档于2018-10-21). env.
因此,你可以使用,例如:
import '#template/js/'
@import '#template/scss/main'
用网络部署
作为JAMstack的应用程序 你的模板可能很容易和Netlife一起部署,
要做到您应该添加一个简单的
网络化.toml
文件和 a
部署按钮 与 链接到您的
模板存储器 财务报告和审定财务报表
stack=cms param(考虑到您正在使用Netlify CMS).
样本
[](https://app.netlify.com/start/deploy?stack=cms&repository=https://github.com/ecomclub/storefront-framework)
