README

⚠ 这是 Thelia 默认前台模板的仓库。此仓库上的所有 pull request 都将被忽略。如果您想创建一个项目，请查看 thelia/thelia-project。如果您想为 Thelia 贡献，请查看 thelia/thelia

关于

这个 Thelia 模板基于 Symfony Encore，它使用 Smarty（Thelia 默认模板引擎）处理静态内容，并使用 React 管理动态组件（例如：购物车）。样式使用 Tailwind 和 PostCSS 制作，但可以被覆盖或切换，以使用任何其他 CSS 预处理器/ CSS 框架。

先决条件

NodeJS (^10)
Yarn

可用命令

$ yarn build

(编译和优化生产环境资源)

$ yarn start

(开发模式，实时重新加载)

手动安装

$ yarn install && yarn build

组件

此模板基于页面模板（位于此目录的 root 中）和一个组件系统（在 components 目录中）。

组件系统

组件应该是可重用的，并尽可能无歧义，以便可以自由组合。
组件的相对文件（html、css、js、图片等）都应该放在组件目录中，以保持它们组织良好且易于移动。

在页面中检索编译后的资源

Symfony Encore 使用条目来标识组成模板的不同 JS 包，这些条目可以在 webpack.config.js 文件中修改。这种模式允许您的 JS 代码根据需要分割并仅在相关页面上使用。

您可以这样声明它们

Encore.addEntry('app', './assets/js/app.js')
	.addEntry('home', './assets/js/routes/home')
	.addEntry('category', './assets/js/routes/category')
	.addEntry('product', './assets/js/routes/product')
	.addEntry('register', './assets/js/routes/register')
	.addEntry('address', './assets/js/routes/address')
	.addEntry('delivery', './assets/js/routes/delivery');

并且可以这样使用它们

⚠️ layout.tpl ⚠️（这是主 JS 包，用于网站的每个页面）

    {block name="css"}
      {encore_entry_link_tags entry="app"}
    {/block}
    {block name="javascript"}
      {encore_entry_script_tags entry="app"}
    {/block}

product.html（注意在 smarty 块中使用 append 关键字，允许我们保留主包而不是替换它）

{block name="css" append}
  {encore_entry_link_tags entry="product"}
{/block}

{block name="javascript" append}
  {encore_entry_script_tags entry="product"}
{/block}

图片与其他资源

您可以使用 smarty 函数 {encore_manifest_file file="key/of/your/asset/in/the/manifest"} 获取由 Symfony Encore 编译的任何资源，manifest.json 文件位于 dist 目录中

  <link rel="icon" type="image/png" sizes="32x32" href="{encore_manifest_file file="dist/favicons/favicon-32x32.png"}">

thelia / frontoffice-modern-template

维护者

详细信息