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
主页
你的门户主页可以在以下位置定义
- 角色
- 门户设置(这将适用于已登录用户)
- 通过 Hook
get_website_user_home_page - 网站设置(这也将适用于未登录用户——即访客)