网站主题

ERPNext 提供了高级主题定制功能,让您可以自定义网站的外观和风格,
使其与您的品牌形象相匹配。

首页 > 网站 > 设置 > 网站主题

1. 如何创建网站主题

  1. 前往网站主题列表,点击“新建”。
  2. 输入主题名称。
  3. 自定义您的主题。
  4. 点击“保存”。

注意: 请确保在“网站设置”中设置了网站主题,
否则主题不会生效。

2. 功能特性

2.1 主题配置

“主题配置”部分用于快速搭建基础主题。在这里,
您可以选择配色方案、字体和按钮样式。

2.2 样式表

如果您熟悉 SCSS 和 Bootstrap 4 主题开发,
您可以手动编写自定义 SCSS。

在“自定义覆盖”字段中,您可以覆盖任何
应用主题文件定义的变量。此字段的内容将在导入
任何其他 SCSS 之前被包含。例如,变量 $spacer 默认设置为 1rem
只需将其重新定义为 $spacer: 2rem;,即可让所有间距扩大一倍。

在“自定义 SCSS”字段中,您可以添加自己的样式。这些样式将在
导入应用主题之后被包含。您也可以覆盖任何特定的样式。
例如,如果您不喜欢我们的按钮样式,只需添加以下代码:

.btn-primary {
 background-color: $teal;
 color: $orange;
}

2.3 包含的主题文件

如果您查看配置对话框生成的默认主题,它会
导入 frappe/public/scss/websiteerpnext/public/scss/website。这些
frappeerpnext 应用的默认主题文件。如果您安装了其他
应用,它们也可能提供自己的 website.scss 文件。

“包含的主题文件”部分列出了所有已安装的应用。每个应用都可以
携带自己的主题文件([app]/public/scss/website.scss)。一个主题可能是完整的,
为整个网站提供样式,也可能只是一个附加组件。例如,它可能
只为其引入的元素设置样式。通过勾选复选框,您可以选择
您的网站应包含哪些主题。

2.4 自定义 JavaScript

您还可以编写自定义 JavaScript,这些脚本将在您的主题应用时运行。
使用它来添加/移除元素的类,或运行任何有助于改变
元素外观的脚本。