作者： Next

网页构建器

在版本 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">
  1. 功能特性

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 自定义

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


主页产品表格

效果将类似于这样：

主页上的特色产品

4. 主页区块

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

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

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


新建主页区块

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

效果将类似于这样：

主页区块

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

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

5. 自定义主页

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

要设置自定义主页：

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

网站设置

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

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

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

1. 着陆页

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

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

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


网站设置 – 着陆页

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

2. 网站主题

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

3. 品牌

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


网站设置 – 横幅图片

3.2 网站图标

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


网站设置 – 网站图标

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


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

4. 顶部栏

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


网站设置 – 顶部栏


网站导航栏项目

5. 横幅

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


网站设置 – 横幅


网站横幅

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


网站设置 – 页脚地址


网站设置 – 页脚链接


网站页脚

配置“技术支持”部分

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

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 内置工具创建自定义设计。网站模块提供了直观的拖放功能，用于添加和排列文本、图片、视频、表单和交互组件等元素。

  • 网站主题
  • 首页

ERPNext电商集成

ERPNext 很容易与再 commerce 和电子商务平台集成，因为 ERPNext 中的业务数据可以通过 Frappe Framework REST API 获取。产品、客户、订单、发票、付款、发货、退货和库存变动都以 DocTypes 形式存储，而 DocTypes 可以通过标准 API 端点进行读取或更新。

这使得 ERPNext 成为处理翻新、二手、租赁、回购、转售或逆向物流流程的再 commerce 平台的实用后端。商店前端可以专注于客户体验，而 ERPNext 则负责管理库存、会计、履约、采购、退货和报表。

为什么集成很简单

  • 默认提供 REST API：外部系统无需直接访问数据库即可创建和更新 ERPNext 记录。
  • 商务记录已经存在：物料、客户、销售订单、销售发票、交货单、付款凭证、库存凭证和仓库都是 ERPNext 的标准记录。
  • 可以添加再 commerce 数据：诸如成色、等级、序列检查、翻新状态、保修、回购来源和转售渠道等字段可以通过自定义字段或 DocTypes 添加。
  • 同步可以自动化：Webhooks、计划任务和后台工作进程可以在系统之间同步订单、库存、付款状态、发货更新和退货信息。

常见的集成流程

  • 目录同步：将物料详情、价格、图片、成色和库存可用性从 ERPNext 发送到平台。
  • 订单同步：当订单下达时，在 ERPNext 中创建销售订单或销售发票。
  • 库存同步：当库存被预留、售出、退回、翻新或重新上架时，更新平台信息。
  • 履约同步：将发货和物流跟踪信息从 ERPNext 回传到平台。
  • 退货和回购：使用库存凭证、采购收货单、质量检验或自定义 DocTypes 跟踪入库商品。

现成的市场应用选项

在构建自定义连接器之前，请先检查现有的 Frappe Marketplace 应用是否已经覆盖了所需的工作流程：

  • 电子商务集成：适用于 ERPNext 的电商市场集成。
  • WooCommerce 连接器：与 WooCommerce 同步物料、库存、客户、地址、销售订单、销售发票和付款凭证。
  • ERPNext 物流：适用于 ERPNext 的物流集成，对履约和跟踪很有用。
  • Frappe Paystack：适用于 ERPNext 和 Frappe 的支付网关集成。

何时构建自定义连接器

当再 commerce 平台具有独特流程（如设备分级、序列化翻新、以旧换新定价、保修跟踪、特定市场的上架规则或逆向物流）时，应构建自定义连接器。在大多数情况下，连接器将平台事件映射到 ERPNext 文档，并通过 REST API 安全地调用。

最佳实践

  • 将 ERPNext 作为库存和会计数据的唯一真实来源。
  • 使用稳定的外部 ID 来匹配 ERPNext 记录与平台记录。
  • 记录每次同步尝试，以便重试失败的更新。
  • 使用权限受限的 API 密钥，并在上线前在测试环境中进行测试。
  • Frappe REST API
  • 销售订单
  • 物料
  • 库存凭证
  • Frappe Cloud 市场

门店落地页

为您的应用启用购物车后，您可以使用网页构建器为您的
商店创建一个自定义着陆页。


自定义商店着陆页

1. 如何创建自定义商店着陆页

  1. 按照此处提到的步骤创建一个网页。
  2. 为您的页面设置一个路由（例如：/store）。
  3. 将内容类型选择为 页面构建器。
  4. 在页面构建块表格中点击“添加行”。
  5. 选择一个网页模板。

ERPNext 附带了一套强大的标准网页模板，可用于创建您的网页。

上图中页面的配置如下所示：


商店页面构建块

  1. 添加值。

点击每个块右侧的“编辑值”按钮，并在对话框中输入值，以
设置每个部分的内容。

对构建您的商店着陆页有用的网页模板包括：

  • 主横幅轮播：
    最多可创建 5 张幻灯片。每张幻灯片的图片、标题、主要操作、对齐方式和主题
    均可配置。

    主横幅轮播配置

  • 产品分类卡片：
    最多可配置 8 张产品分类卡片。每个产品分类将链接到一个
    项目组。
    请确保在项目组表单中勾选了 在网站上显示 选项，以便
    生成产品分类的路由。


产品分类配置

  • 项目卡片组：
    此部分可用于展示您的精选项目。最多可配置 12 张卡片。
    每张卡片将链接到一个项目。如果勾选了 精选，
    该项目将占据 2 列的空间。


项目卡片配置

  1. 发布您的网页。

只有在勾选了“已发布”选项时，网页才会被发布。
页面发布后，点击侧边栏上的 在网站上查看 或访问配置的路由
来查看页面效果！


发布您的网页

  1. 将其设置为您的主页。

按照此处的步骤将此页面
设置为您的网站主页。

安装RediSearch以启用快速电商搜索

实验性功能

ERPNext 的电子商务模块可选使用 RediSearch 来实现搜索功能，该功能可通过 电子商务设置 进行配置。

一旦安装并配置完成，RediSearch 将用于增强电子商务网站的搜索功能。这包括模糊搜索、自动补全、结果排序以及可自定义的字段索引等功能。

前提条件

  1. Frappe 框架 + ERPNext 环境
  2. Redis 6+

安装说明

$ git clone --recursive https://github.com/RediSearch/RediSearch.git
$ cd RediSearch
$ sudo make setup # Remove `sudo` on macOS
$ make build

请注意：最新版本的 RediSearch 需要 Redis 7.1+，而截至 2023 年 8 月 1 日，snap 仓库中可用的稳定版 Redis 为 7.0。因此，需要从源码编译 Redis 才能使 RediSearch 与 Redis 兼容。

另外请注意，ERPNext 需要 Redis 6+，因此使用 Redis 7.1+ 可能会导致问题。请谨慎使用 Redis 7.1+。

成功完成上述步骤后，将在 redisearch.so 目录中生成一个名为 RediSearch/build 的二进制文件。

将此二进制文件移动到 /etc 目录，然后重启您的 Frappe 服务器：

sudo mv build/redisearch.so /etc/

现在，打开位于 config 目录（在 bench 目录内）中的 redis_cache.conf 文件。在 save "" 行之前添加以下行，然后重启 bench 服务器：

loadmodule /etc/redisearch.so

这将在启动时加载 redisearch 模块。您可以通过在 redis-cli -p 13000 中运行以下命令来检查模块是否成功加载（假设端口为 13000，这是 frappe 配置中 redis 的默认端口）：

> MODULE LIST

并且 search 应该是模块之一。

您也可以在正在运行的 redis 实例上加载该模块，方法是在 redis-cli 中运行以下命令：

> MODULE LOAD /etc/redisearch.so

我们将 redisearch.so 模块放置在 /etc 目录中，但它可以放在文件系统的任何位置。我们使用此目录是因为将来 loadmodule 行会自动填充到配置文件中，并且它会假定二进制文件位于 /etc 目录中。

更详细的说明可以在这里找到。