应用页面

应用页面提供了一个快速导航界面,方便你访问站点上安装的所有应用。默认情况下,你站点上安装的所有 Frappe 应用都会显示在此页面上。

如何才能在应用页面上显示我们的自定义应用?

你可以在应用的 hooks.py 中添加以下配置来包含它。下面是 Frappe CRM 应用的示例。

这里的 has_permission 选项用于根据应用自身的业务逻辑来显示/隐藏应用图标。例如,如果用户是网站用户,则隐藏图标。

# Each item in the list will be shown as an app in the apps page
add_to_apps_screen = [{
    "name": "crm",
    "logo": "/assets/crm/logo.png",
    "title": "CRM",
    "route": "/crm",
    "has_permission": "crm.api.check_app_permission"
}]

此功能在 v15 及以上版本中受支持

设置默认应用

你可以配置一个默认应用,这意味着用户登录站点后会直接进入该应用。如果未设置默认应用,用户将默认看到应用页面。

默认应用配置可以在两个层级进行:

  1. 用户层级:允许单个用户设置自己偏好的默认应用。

  2. 系统层级:为所有用户设置一个全局默认应用。

博客文章

博客文章是你网站上的一篇文章。

博客是分享你对业务想法的绝佳方式。
它可以帮助你的客户和读者了解与你业务相关的新闻。

在互联网时代,写作显得尤为重要,因为当
人们来到你的网站时,他们想了解你和你的产品。

要访问博客文章,请前往:

首页 > 网站 > 博客 > 博客文章

1. 如何创建博客文章

  1. 前往博客文章列表,点击“新建”。
  2. 输入标题、博客分类、博主和内容。
  3. 启用“已发布”,然后点击“保存”。

博客简介是你博客的简短描述,显示在标题之后、内容之前。

你可以用富文本、Markdown 或 HTML 来写博客。如果你想写简单的内容页面,富文本和 Markdown 是很好的选择。

在“掌握 Markdown”中几分钟就能学会 Markdown。


用 Markdown 编写的博客文章

点击侧边栏中的在网站上查看即可查看你的博客文章。

博客文章

读者可以对博客文章发表评论。访客用户需要输入姓名和邮箱才能评论。


如果你想禁止读者对当前博客文章发表评论,请勾选禁用评论选项。


已禁用添加评论

读者可以对他们喜欢的博客文章点赞。


点赞

如果你想禁止读者对当前博客文章点赞,请勾选禁用点赞选项。

当读者对博客文章发表评论或点赞时,系统会向博主发送一封邮件,其中包含该博客文章评论/点赞的链接。
如果博主不想收到任何邮件,可以取消勾选启用邮件通知复选框。

2. 功能

2.1 博主

博主是可以发布博客的用户。要创建博主,请前往:

首页 > 网站 > 博客 > 博主

你可以在这里填写博主的简短简介,还可以设置头像。


博主

预览将显示在博客文章的末尾。

博主预览

2.2 博客分类

你可以将博客分组到不同分类中。要创建新的博客分类,请前往:

首页 > 网站 > 博客 > 博客分类。


博客分类

如果你点击侧边栏中的在网站上查看,你将被重定向到该分类下的博客列表。


博客分类 – 通用

2.3 元标签

元标签是 HTML 标签,用于向搜索引擎或社交媒体平台描述页面及其内容。元描述提供网页的简要说明。

在 HTML 中,元描述标签的写法如下:


在 SEO 部分,你可以为博客文章添加元描述和图片。当博客文章作为搜索结果被 Google 列出时,ERPNext 会生成博客的预览。

如果你将此部分留空,博客简介或博客的前 140 个字符将显示为元描述。同样,如果你将元图片留空,博客中的第一张图片将被选中。


博客文章 Google 搜索预览

提交博客后,你还可以预览博客在 Facebook 或 Twitter 等社交媒体平台上分享时的外观。要检查这一点,请使用这些平台提供的调试工具:

  • Facebook:分享调试器

  • Twitter:卡片验证器

  • LinkedIn:帖子检查器

要检查帖子预览,只需在工具中输入网页/博客链接:


使用 Facebook 的分享调试器工具

使用这些工具,你可以优化博客文章以便分享。

门户页面

Frappe 框架不仅通过 Desk 提供了一个功能丰富的管理界面(这是一个单页应用),还提供了静态的服务器渲染网页。这些页面通常是为您的网站访客构建的。它们可以是公开的,也可以需要登录才能访问。

添加页面

每个 frappe 应用(包括 frappe 本身)都带有一个 www 文件夹,它直接映射到网站 URL。以下是目录结构的样子:

frappe/www
├── about.html
├── about.py
├── contact.html
├── contact.py
├── desk.html
├── desk.py
├── login.html
├── login.py
├── me.html
└── me.py

这个结构启用了以下路由:/about、/contact、/desk、/login 和 /me。

要添加您自己的页面,只需在您应用的 www 文件夹中添加一个 HTML 文件。有多种方式可以组织这些门户页面。例如,

custom_app/www
├── custom_page.html
└── custom_page.py

将在路由 /custom_page 上渲染。

要添加子页面,您可以将主页面转换为文件夹,并将其内容添加到 index 文件中。例如,

custom_app/www
└── custom_page
 ├── index.html
 ├── index.py
 ├── subpage.html
 └── subpage.py

仍将在路由 /custom_page 上渲染,同时 /custom_page/subpage 也将可用。

对于像文档这样的简单静态页面,您可以编写 .md 文件来代替 .html。您正在阅读的这份文档就是以 markdown 文件的形式编写的。

覆盖标准页面

Frappe 还允许您通过自定义应用覆盖标准页面。例如,要覆盖 frappe 提供的标准 /about,只需在您应用的 www 文件夹中添加一个名为 about.html 的文件,它就会优先生效。

模板

您可以使用 Jinja 模板为门户页面添加动态内容。所有门户页面都继承自基础模板 frappe/templates/web.html,而该模板本身又继承自 frappe/templates/base.html。

以下是一个示例页面的样子:


{% extends "templates/web.html" %}

{% block title %}{{ _("About Us") }}{% endblock %}

{% block page_content %}
{{ _("About Us") }}
====================

 We believe that great companies are driven by excellence,
 and add value to both its customers and society.
 You will find our team embibes these values.

{% endblock %}

如果您想使用默认的基础模板,也可以省略 extend 和 block。


{{ _("About Us") }}
====================

 We believe that great companies are driven by excellence,
 and add value to both its customers and society.
 You will find our team embibes these values.

上下文

每个门户页面都可以有一个 Python 控制器,用于为该页面构建 context。控制器应与 .html 或 .md 文件同名,但扩展名为 .py。

custom_app/www
├── custom_page.html
└── custom_page.py

控制器应有一个 get_context 方法,它接收一个 context 字典,向其中添加数据,然后返回它。以下是一个示例页面控制器的样子:

# about.py
import frappe

def get_context(context):
 context.about_us_settings = frappe.get_doc('About Us Settings')
 return context

在模板中的用法


{{ _("About Us") }}
====================

 We believe that great companies are driven by excellence,
 and add value to both its customers and society.
 You will find our team embibes these values.

 {% if about_us_settings.show_contact_us %}
 [Contact Us](/contact)
 {% endif %}

由于门户页面是使用 Jinja 构建的,frappe 提供了一个标准 API 供在 Jinja 模板中使用。

标准上下文键列表

以下是可以设置在 context 中的所有标准键及其功能的列表。

上下文键 功能
add_breadcrumbs 向页面添加面包屑导航
no_breadcrumbs 从页面移除面包屑导航
show_sidebar 显示网页侧边栏
safe_render 切换 safe_render
no_header 隐藏页头
no_cache 禁用此页面的缓存
sitemap 在站点地图中包含/排除页面
add_next_prev_links 添加下一页和上一页导航按钮
title 设置页面标题
safe_render

frappe.render_template 不会渲染包含字符串 .__ 的模板,以防止运行任何非法的 Python 表达式。如果您确信内容是安全的,可以禁用此行为。为此,您需要在上下文中将 safe_render 键的值设置为 False 来关闭安全渲染。

通过 frontmatter 设置上下文

您还可以使用 frontmatter 块在上下文中设置值。Frontmatter 块可用于设置特定于页面的静态值,例如元标签。

请看以下示例:

---
title: Introduction
metatags:
 description: This is description for the introduction page
---

# Introduction
This is an introduction page

上述 frontmatter 块将使用以下值更新 context 字典:

{
 'title': 'Introduction',
 'metatags': {
 'description': 'This is description for the introduction page'
 }
}

通过注释设置上下文

您还可以通过在页面中添加 HTML 注释来在上下文中设置一些值。

例如,在您的 .html 或 .md 文件中添加 “,context.add_breadcrumbs 将被设置为 True,并且它将根据文件夹结构自动生成面包屑导航。


{{ _("About Us") }}
====================

 We believe that great companies are driven by excellence,
 and add value to both its customers and society.
 You will find our team embibes these values.

 {% if about_us_settings.show_contact_us %}
 [Contact Us](/contact)
 {% endif %}

以下是您可以设置的键及其上下文值的列表:

注释 上下文值
“ | add_breadcrumbs = 1
“ | no_breadcrumbs = 1
“ | show_sidebar = 1
“ | no_header = 1
“ | no_cache = 1
“ | sitemap = 0
“ | sitemap = 1
“ | add_next_prev_links = 1
“ | title = 'Custom Title'
“ | base_template = 'custom_app/path/to/custom_base.html'

自定义 CSS 和 JS

你可以通过放置一个同名的 .css 或 .js 文件
来为你的页面添加自定义 CSS 和 JS。

custom_app/www
├── custom_page.html
├── custom_page.css
├── custom_page.js
└── custom_page.py

主页

你的门户主页可以在以下位置定义

  1. 角色
  2. 门户设置(这将适用于已登录用户)
  3. 通过 Hook get_website_user_home_page
  4. 网站设置(这也将适用于未登录用户——即访客)

讨论

现在,您可以在门户的任何网页上添加讨论组件。讨论组件允许已登录的用户输入消息并与其他用户分享。该组件可用于讨论,或用于搭建一个用户互相帮助解答问题的门户。

设置讨论组件的步骤

  1. 打开您想要添加讨论组件的网页文档,或者新建一个网页并保存。
  2. 滚动到“页面构建块”表格。
  3. 在“网页模板”下选择“讨论”。
  4. 点击“编辑值”。
  5. 输入标题、CTA 标题,并将“网页”选择为当前网页名称。
  6. 如果您希望讨论为单线程模式,可以勾选“单线程”。
  7. 保存页面。