分类： 网站

在版本 13 中引入

页面构建器允许您通过预配置的网页模板快速创建网页。

1. 如何使用页面构建器创建页面

1. 按照创建网页的步骤进行操作。
2. 勾选“全宽”复选框以启用全宽布局。
3. 将内容类型选择为页面构建器。
4. 在页面构建块表中点击“添加行”。
5. 选择一个网页模板。
6. 点击编辑值按钮。
7. 在对话框中输入值，然后点击“提交”。
8. 点击“保存”。
9. 只有当勾选已发布时，网页才会被发布。

使用页面构建器创建的新网页

页面构建器编辑值对话框

通过点击侧边栏中的在网站上查看来查看您的网页。

使用页面构建器的网页

1.1 添加区块

您可以通过在页面构建块表中添加更多行来为页面添加更多区块。
框架附带了一组丰富的网页模板，供您创建
各种类型的页面。

带有另一个区块的网页

带有另一个区块的网页 – 预览

1.2 区块选项

如果您点击展开页面构建块表中的一行，您将看到
以下附加选项：

• 添加容器：如果勾选，网页模板将在居中的约束框中渲染。
• 添加上方间距：如果勾选，将在区块上方添加适当的间距。
• 添加下方间距：如果勾选，将在区块下方添加适当的间距。
• 添加灰色背景：如果勾选，将为区块添加灰色背景。
• 隐藏块：如果勾选，将隐藏该区块。
• CSS 类：添加任何 CSS 类，并在样式部分的 CSS 字段中为其设置样式。

区块选项

静态内容，如您的首页、关于我们、联系我们、条款页面，都可以使用网页功能来创建。

要访问网页功能，请前往：

首页 > 网站 > 站点 > 网页

1. 如何创建网页

---

1. 前往网页列表，点击“新建”。
2. 输入标题并在主体部分添加内容。路由会自动生成，但您可以修改它。
3. 点击“保存”。
4. 只有当已发布选项被勾选时，网页才会被发布。

新建网页

通过点击侧边栏中的在网站上查看来查看您的网页。

网页

1.1 制作优秀网页的技巧

标题

首先要设置的是您页面的标题。标题对搜索引擎来说权重最高，因此请选择一个能反映您目标受众关键词的标题。路由（URL）会根据标题自动生成，但您可以修改它。

内容

您可以使用富文本、Markdown 或 HTML 来编写内容。如果您想制作简单的内容页面，富文本和 Markdown 是很不错的选择。

在“掌握 Markdown”中，几分钟即可学会 Markdown。

图片

对于富文本内容，您可以直接使用编辑器嵌入图片。对于 Markdown 和 HTML，您需要先将图片附加到文档中。然后，右键单击您的附件并复制地址，即可获取图片的 URL。

现在，使用相应的语法将它们添加到您的 Markdown 或 HTML 中。

<!-- markdown -->
![Alt Text](/path/to/image-url.png)

<!-- html -->
<img alt="Alt Text" src="/path/to/image-url.png">

2. 功能特性

---

2.1 幻灯片

您还可以在网页中添加幻灯片。有关如何创建幻灯片，请参阅“首页幻灯片”。

2.2 定时发布

如果您为网页设置了开始日期和结束日期，则可以安排网页的发布时间。它们将在设定的日期范围内被发布，并在范围外自动取消发布。

未发布的页面在访问时会抛出 Error 404 错误。

2.3 JavaScript 和 CSS

您可以在脚本部分向网页添加 JS 脚本。请确保将您的脚本写在 frappe.ready 回调函数内。

frappe.ready(() => {
    // your script here
});

您可以在样式部分向网页添加 CSS 样式。检查元素以查看有哪些可用的样式类。如果您使用 HTML 内容，您可以在此处使用自定义类并为其设置样式。

2.4 侧边栏

您可以在网页上添加带有自定义链接的网站侧边栏。在侧边栏和评论部分启用显示侧边栏。选择现有的网站侧边栏或创建一个新的。

网页侧边栏

在侧边栏项目表中添加链接及其路由。 网站侧边栏

带侧边栏的网页

2.5 评论

您可以在网页上启用评论功能，访客可以留下包含其姓名和电子邮件的评论。在侧边栏和评论部分启用评论功能。

网页评论

2.6 页头

您可以为页面的页头部分添加自定义 HTML。这将覆盖网页的标题。

网页页头

带自定义页头的网页

2.7 面包屑导航

您可以在网页上添加面包屑导航列表。它们将显示在页头之前的上方。

网页面包屑导航

带面包屑导航的网页

2.8 元标签

您还可以向网页添加元标签。您必须在元标签表中添加属性键及其值，它将自动在您的网页上生成 HTML meta 标签。

网页元标签

ERPNext 提供了一系列多样化的网站组件，以满足各种需求，包括网页元素，如 Web 表单、侧边栏和幻灯片。

ERPNext 中的 Web 表单允许企业通过直接嵌入网页的可定制表单，高效地收集客户数据。侧边栏在网页上提供了一个便捷的区域，用于显示导航链接、社交媒体动态或促销内容，从而提升用户体验和参与度。幻灯片是动态组件，能以视觉上吸引人的方式展示图片或促销信息，吸引访客注意力并有效传达关键信息。

通过利用 ERPNext 中的这些网站组件，企业可以创建互动性强、用户友好的网络体验，从而推动用户参与并支持其数字营销策略。

• 网页
• 网页构建器
• Web 表单
• 网站路由元数据

主页是您网站的默认落地页。

ERPNext 的网站模块会为您的网站生成一个默认的落地页。您可以在“主页”中对其进行自定义。

要在 ERPNext 中访问“主页”页面，请前往：

首页 > 网站 > 门户 > 主页

1. 如何设置主页

1. 选择公司。
2. 设置标题。该标题将显示在浏览器标签页中。
3. 按照下一节的说明配置 Hero 区域。

主页

请确保您在“网站设置”中将默认的“主页”设置为 home，此功能才能生效。

2. Hero 区域

您可以通过以下三种方式自定义 Hero 区域的外观：

1. 标语和描述（默认）。
2. 主页幻灯片。
3. 自定义 Hero 区域。

2.1 标语和描述

设置好标语、描述和 Hero 图片后，您的前台页面就会看起来不错。您还可以在“所有产品”的 URL 下更改“探索”按钮的链接地址。

网站主页

2.2 主页幻灯片

将“Hero 区域基于”设置为“幻灯片”，“主页幻灯片”字段将会出现。

主页幻灯片设置

现在，选择一个现有的幻灯片，或者按照如下所示创建一个新的幻灯片：

网站幻灯片

为了获得最佳效果，请确保所有幻灯片图片具有相同的高度，并且其宽度大于高度。

2.3 自定义 Hero 区域

第三种 Hero 区域类型允许您编写自己的 HTML。

将“Hero 区域基于”设置为“Hero 区域”。

现在创建一个新的 Hero 区域。将“区域基于”设置为“自定义 HTML”。
在“区域 HTML”字段中编写您的自定义 HTML。

主页设置

您可以在此处编写任何有效的 Bootstrap 4 标记。

新建 Hero 区域

效果将类似于这样：

主页 Hero 自定义

3. 特色产品

您还可以通过将产品添加到“产品”表格中，在主页上展示特色产品。

主页产品表格

效果将类似于这样：

主页上的特色产品

4. 主页区块

您可以通过创建新的“主页区块”来在主页上添加自定义区块。

前往 网站 > 门户 > 主页区块

主页区块可以由卡片或自定义 HTML 组成。将“区块基于”设置为“卡片”。

新建主页区块

在“区块卡片”表格中为每张卡片添加详细信息，如标题、副标题、图片、内容和路由。

效果将类似于这样：

主页区块

您还可以通过设置“区块顺序”来控制这些区块的显示顺序。0 将首先显示，然后是 1，依此类推。

要添加包含自定义 HTML 的区块，请参阅“自定义 Hero 区域”。

5. 自定义主页

如果您不想使用上述默认主页，ERPNext 允许您使用一个完全不同的主页。

要设置自定义主页：

1. 创建一个网页。
2. 前往 网站 > 设置 > 网站设置。
3. 将“主页”设置为您的网页的 route。
   

与网站相关的设置，如着陆页和网站全局主题，都可以在这里配置。

要访问网站设置，请前往：

首页 > 网站 > 设置 > 网站设置

1. 着陆页

通过将主页字段设置为该页面的路由，来配置您网站的默认着陆页。您可以在此处放置任何路由，包括标准路由，如 home、about、contact、login、all-products 和 blog。

您也可以将一个网页设置为着陆页。

如果您想使用 ERPNext 主页，则必须将其设置为 home。

网站设置 – 着陆页

您也可以在此处设置标题前缀。它会被附加到每个页面的浏览器标题上。您可以在此处填写您的公司名称。

2. 网站主题

为您的网站创建个性化主题并在此处进行设置。点击此处了解更多关于配置网站主题的信息。

3. 品牌

3.1 品牌标志

您可以在此部分设置您网站的品牌标志。首先上传品牌图片，然后点击“从图片设置横幅”按钮。它将使用您上传的标志生成一个横幅 HTML。

网站设置 – 横幅图片

3.2 网站图标

您也可以在此部分设置您网站的网站图标。它显示在浏览器标签页的左侧。

网站设置 – 网站图标

通过点击右上角操作栏中的查看网站来查看您的网站。

带有品牌和网站图标的网站

4. 顶部栏

您可以在顶部栏部分自定义您网站导航栏中的菜单项。

网站设置 – 顶部栏

网站导航栏项目

5. 横幅

您可以向您的网站添加一个持久横幅，它将显示在所有网页的导航栏上方。您可以在此处编写任何有效的 Bootstrap 4 标记。

网站设置 – 横幅

网站横幅

6. 页脚

您可以在页脚部分向页脚添加地址信息和分类链接。

网站设置 – 页脚地址

网站设置 – 页脚链接

网站页脚

配置“技术支持”部分

您可以通过编辑“页脚技术支持”来配置技术支持部分。

7. Google 集成

7.1 Google 索引

如何设置自动 Google 索引

为了允许 ERPNext 请求 Google 爬虫索引网页，您需要授权 ERPNext 在用户请求数据时发送请求。Google Drive 集成通过以下步骤进行设置：

• 通过 Google 设置创建 OAuth 2.0 凭据

• 在网站设置中启用索引

• 现在点击授权 API 索引访问以授权 ERPNext 发送发布请求。

• 授权后，当用户创建/更新/删除任何新的博客文章或网页时，会自动发送索引请求。

Google 集成

7.2 Google Analytics

您可以在您的网站上启用 Google Analytics。只需从您的 Google 控制台获取您的 Google Analytics ID 并在此处设置即可。

默认情况下，Google Analytics 会收集您网站访客的完整 IP 地址。通过勾选“Google Analytics IP 匿名化”，ERPNext 将指示 Google Analytics 在将 IP 地址发送到 Google 服务器之前对其进行匿名化处理。您可以在 Google 的文档中了解有关此设置影响的更多信息。

8. HTML 头部

您可以使用此部分在所有网页上设置元标签。一个常见的用例是添加 Google 网站验证标签。

网站设置 – 头部

9. Robots

您可以在此部分定义 robots.txt 规则。网络爬虫使用此信息来决定索引哪些页面以及跳过哪些页面。

网站设置 – Robots

在 Moz – Robots.txt 上了解更多关于 robots.txt 的信息

10. 重定向

您可以在此处定义路由重定向的映射。以下截图中的映射确保如果用户访问 https://apple.erpnext.com/iphone，他们将被重定向到 https://apple.erpnext.com/products/iphone。

对于这些路由，ERPNext 将返回 301 Permanent Redirect 响应。

网站设置 – 路由重定向

如果您正在将现有网站迁移到基于 ERPNext 的网站，您可以在此处将旧路由映射到新路由，这些重定向将被 Google 识别，并有助于您保持 SEO 排名。

11. 聊天

您可以在聊天部分启用网站访客聊天功能。聊天小部件将显示在从时间到至时间之间。您还可以 设置聊天客服（用户），当访客发送消息时，他们将收到通知。
消息。

聊天是一项实验性功能。

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/website 和 erpnext/public/scss/website。这些
是 frappe 和 erpnext 应用的默认主题文件。如果您安装了其他
应用，它们也可能提供自己的 website.scss 文件。

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

2.4 自定义 JavaScript

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

在 ERPNext 中设置网站是一个顺畅的过程，旨在为您的企业建立在线形象。系统提供了一个用户友好的网站模块，使用户能够轻松创建、自定义和管理他们的网站。

用户可以从一系列预设计模板中选择主题开始，或者使用 ERPNext 内置工具创建自定义设计。网站模块提供了直观的拖放功能，用于添加和排列文本、图片、视频、表单和交互组件等元素。

• 网站主题
• 首页