html - 当您有多个设计但您的 CMS 只能上传一个包含所有样式和模板的文件时，如何构建您的模板？

Question

我正在为我的电子商务商店创建模板。我有多个品牌，每个品牌都有自己的领域和特定设计。除了那些，我还将创建类似主域的内容，其中将包含每个品牌的所有产品。我元素的基础是一个定制的 CMS，我可以在其中上传捆绑在一个 .rar 文件中的所有模板。对于模板编码，我使用 SASS、grunt/gulp + compass、JS、Freemarker 和 html。

我从来没有编写过如此广泛的元素，也不知道如何构建我的模板，以便在将来修改的情况下很容易修改这些模板。我说的是当您有 14 个品牌并且只想在所有 14 个域中的 6 个域上添加特定操作按钮时的问题。显然，我不想进入这 6 个品牌的文件夹中的每一个，并且每次(6 次)都为该按钮添加 HTML 代码和 SASS 样式。另一方面，我也不想将所有 14 个品牌的 SASS 样式编译并捆绑到一个 CSS 文件中，因为那样的话我将在我的每个域中包含这个 CSS 文件。

你有没有遇到过类似的问题？ - 您有多个域，但您的 CMS 只允许您上传一个包含所有样式和模板的文件。

问题是如何构造这些模板 - 例如，我应该在一个名为 _typography.scss 的文件中为每个域设置排版样式，还是应该我的每个品牌的 _typography.scss 文件？

Answer 1

您正在使用 Gulp，因此请充分利用您的工作流程。

1. 为每个品牌创建 1 个根 SCSS 文件:

assets/css/common/_variables.scss
assets/css/common/_typography.scss
assets/css/main.brand1.scss
assets/css/main.brand2.scss
assets/css/main.brand3.scss

1. 在文件中定义变量的默认值:

// assets/css/comon/_variables.scss
$font-main: Arial !default;

1. 覆盖品牌相关根文件中的这些值:

// assets/css/main.brand1.scss
$font-main: 'Comic Sans';

@include 'common/variables';
@include 'common/typography';

1. 在所有其他文件中使用这些变量:

// assets/css/common/_typography.scss
.h1 {
  font-family: $font-main;
}

1. 使用 Gulp 生成所有 CSS 文件:

public/css/main.brand1.css
public/css/main.brand2.css
public/css/main.brand3.css