Frappe About Us Team Member 子表 DocType 实战指南About Us 页团队成员字段配置与页面渲染原理【免费下载链接】frappeLow code web framework for real world applications, in Python and Javascript项目地址: https://gitcode.com/GitHub_Trending/fr/frappe本篇指南以 Frappe 框架中About Us Team Member子表 DocType 为对象讲解如何在 About Us 页面中录入与展示团队成员信息。你将掌握其字段结构、子表Child Table机制、与About Us Settings的关联方式以及页面从数据到 HTML 的完整渲染链路。一、什么是 About Us Team MemberAbout Us Team Member是 Frappe 内置的一个子表 DocTypeChild Table定义在 frappe/website/doctype/about_us_team_member/ 目录下其 README 用一句话说明了它的用途Details of team member for About Us page.即用于记录 About Us关于我们页面展示的团队成员详情。它本身不能独立创建和访问必须作为父文档About Us Settings的表格字段Table 字段嵌入使用实际存储时挂在父文档行中。二、字段结构详解源自 about_us_team_member.json该 DocType 的完整定义位于 about_us_team_member.json共 3 个业务字段字段名字段类型是否必填是否列表展示宽度说明full_nameData是reqd1是150px成员全名image_linkAttach否是150px成员头像附件/图片链接bioSmall Text是reqd1是200px成员个人简介关键定义要点istable: 1—— 声明这是一个子表 DocType不会出现在全局文档列表中也不能单独设置权限JSON 中permissions: []为空editable_grid: 1—— 允许在父表单的表格网格内直接编辑子表行module: Website—— 归属 Website 模块sort_field: creation/sort_order: DESC—— 子表数据默认按创建时间倒序。2.1 类型化属性DF 注解在 about_us_team_member.py 中Frappe 通过自动生成的类型注解声明了字段的类型契约if TYPE_CHECKING: from frappe.types import DF bio: DF.SmallText full_name: DF.Data image_link: DF.Attach | None parent: DF.Data parentfield: DF.Data parenttype: DF.Data其中parent、parentfield、parenttype是子表文档的标准隐藏字段分别记录父文档名、父字段名与父 DocType 名用于把子表行回挂到父文档上。image_link声明为可空| None与 JSON 中未设reqd一致。2.2 控制器类class AboutUsTeamMember(Document): _DOCTYPE_NAME About Us Team Member ... pass控制器继承frappe.model.document.Document当前版本未实现任何自定义逻辑是一个纯数据载体——这也说明成员数据本身不需要业务规则展示逻辑完全由父文档与网页模板承担。三、父文档About Us Settings 如何承载团队成员团队成员子表由单例SingleDocType About Us Settings 通过 Table 字段承载{ fieldname: team_members, fieldtype: Table, label: Team Members, options: About Us Team Member }即team_members字段的options直接指向About Us Team Member。About Us Settings 中与团队展示相关的字段还包括字段类型作用page_titleData页面标题缺省时模板回退为 “About Us”company_introductionText Editor公司介绍页面 Hero 区副标题team_members_headingData团队成员区块标题缺省回退为 “Team Members”team_members_subtitleSmall Text团队成员区块副标题team_membersTable → About Us Team Member团队成员子表footerText Editor页面底部附加内容is_disabledCheck是否停用页面默认勾选即默认关闭父文档通过on_update钩子在每次保存时调用frappe.website.utils.clear_cache(about)清理页面缓存保证修改立即生效见 about_us_settings.py。3.1 权限配置About Us Settings 的permissions中仅授予Website Manager角色完整的创建/读取/写入/分享/邮件/打印权限见 about_us_settings.json 中role: Website Manager的权限条目。因此添加团队成员的实际操作路径是以 Website Manager 身份登录后在Website About Us Settings中编辑Team Members表格。四、About Us 页面的渲染原理4.1 路由与上下文注入访问/about时Frappe 路由到 frappe/www/about.pydef get_context(context): context.doc frappe.get_cached_doc(About Us Settings) if context.doc.is_disabled: frappe.local.flags.redirect_location /404 raise frappe.Redirect return context使用frappe.get_cached_doc读取缓存的 About Us Settings 单例若is_disabled被勾选直接 302 重定向到/404sitemap 1声明该页面可被纳入站点地图索引。4.2 模板渲染成员卡片页面模板 frappe/www/about.html 中遍历子表行生成成员卡片{% for d in doc.get({doctype:About Us Team Member}) %} div classcol-md-2 mt-4 itemscope itemtypehttp://schema.org/Person img classcard card-md w-100 src{{ d.image_link }} itempropimage h5 classmt-3 itempropname{{ d.full_name }}/h5 p classsmall mt-2 itempropdescription{{ d.bio }}/p /div {% endfor %}值得注意的实现细节通过doc.get({doctype:About Us Team Member})过滤子表行即使以后team_members字段被调整也不影响取值逻辑每个成员卡片带schema.org/Person结构化标记itempropimage / name / description利于搜索引擎理解页面内容头像使用card样式类包裹w-100保证整列宽度自适应。about_us_settings.js还提示About Us 页面的固定链接为/about。五、端到端数据流总结录入Website Manager 在About Us Settings的Team Members表格中新增行填写full_name、上传/粘贴image_link、填写bio存储行数据以parentAbout Us Settings、parentfieldteam_members写入子表保存时触发clear_cache(about)请求访问/aboutabout.py校验is_disabled后注入上下文渲染about.html过滤About Us Team Member子表行逐行输出带 Person 结构化数据的成员卡片测试test_about_us_settings.py 提供了集成测试入口当前为空实现可在此扩展对页面上下文的断言。六、扩展建议若需要额外信息如职位、邮箱、社交链接在about_us_team_member.json的fields中追加字段并同步更新about_us_team_member.py的类型注解再在about.html模板对应位置输出若希望成员子表支持更多自定义业务校验可在AboutUsTeamMember控制器中实现validate等方法由于image_link为 Attach 类型可在页面中使用{{ d.image_link }}直接输出文件 URL也可结合 Frappe 的文件接口做图片裁剪与懒加载优化。通过本指南你可以完整掌握 Frappe 中“子表 DocType Single 父文档 网页模板”这一经典组合并能在自己的项目中照此模式快速搭建团队介绍、合作伙伴、荣誉奖项等同类列表型展示页面。【免费下载链接】frappeLow code web framework for real world applications, in Python and Javascript项目地址: https://gitcode.com/GitHub_Trending/fr/frappe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Frappe About Us Team Member 子表 DocType 实战指南：About Us 页团队成员字段配置与页面渲染原理
Frappe About Us Team Member 子表 DocType 实战指南About Us 页团队成员字段配置与页面渲染原理【免费下载链接】frappeLow code web framework for real world applications, in Python and Javascript项目地址: https://gitcode.com/GitHub_Trending/fr/frappe本篇指南以 Frappe 框架中About Us Team Member子表 DocType 为对象讲解如何在 About Us 页面中录入与展示团队成员信息。你将掌握其字段结构、子表Child Table机制、与About Us Settings的关联方式以及页面从数据到 HTML 的完整渲染链路。一、什么是 About Us Team MemberAbout Us Team Member是 Frappe 内置的一个子表 DocTypeChild Table定义在 frappe/website/doctype/about_us_team_member/ 目录下其 README 用一句话说明了它的用途Details of team member for About Us page.即用于记录 About Us关于我们页面展示的团队成员详情。它本身不能独立创建和访问必须作为父文档About Us Settings的表格字段Table 字段嵌入使用实际存储时挂在父文档行中。二、字段结构详解源自 about_us_team_member.json该 DocType 的完整定义位于 about_us_team_member.json共 3 个业务字段字段名字段类型是否必填是否列表展示宽度说明full_nameData是reqd1是150px成员全名image_linkAttach否是150px成员头像附件/图片链接bioSmall Text是reqd1是200px成员个人简介关键定义要点istable: 1—— 声明这是一个子表 DocType不会出现在全局文档列表中也不能单独设置权限JSON 中permissions: []为空editable_grid: 1—— 允许在父表单的表格网格内直接编辑子表行module: Website—— 归属 Website 模块sort_field: creation/sort_order: DESC—— 子表数据默认按创建时间倒序。2.1 类型化属性DF 注解在 about_us_team_member.py 中Frappe 通过自动生成的类型注解声明了字段的类型契约if TYPE_CHECKING: from frappe.types import DF bio: DF.SmallText full_name: DF.Data image_link: DF.Attach | None parent: DF.Data parentfield: DF.Data parenttype: DF.Data其中parent、parentfield、parenttype是子表文档的标准隐藏字段分别记录父文档名、父字段名与父 DocType 名用于把子表行回挂到父文档上。image_link声明为可空| None与 JSON 中未设reqd一致。2.2 控制器类class AboutUsTeamMember(Document): _DOCTYPE_NAME About Us Team Member ... pass控制器继承frappe.model.document.Document当前版本未实现任何自定义逻辑是一个纯数据载体——这也说明成员数据本身不需要业务规则展示逻辑完全由父文档与网页模板承担。三、父文档About Us Settings 如何承载团队成员团队成员子表由单例SingleDocType About Us Settings 通过 Table 字段承载{ fieldname: team_members, fieldtype: Table, label: Team Members, options: About Us Team Member }即team_members字段的options直接指向About Us Team Member。About Us Settings 中与团队展示相关的字段还包括字段类型作用page_titleData页面标题缺省时模板回退为 “About Us”company_introductionText Editor公司介绍页面 Hero 区副标题team_members_headingData团队成员区块标题缺省回退为 “Team Members”team_members_subtitleSmall Text团队成员区块副标题team_membersTable → About Us Team Member团队成员子表footerText Editor页面底部附加内容is_disabledCheck是否停用页面默认勾选即默认关闭父文档通过on_update钩子在每次保存时调用frappe.website.utils.clear_cache(about)清理页面缓存保证修改立即生效见 about_us_settings.py。3.1 权限配置About Us Settings 的permissions中仅授予Website Manager角色完整的创建/读取/写入/分享/邮件/打印权限见 about_us_settings.json 中role: Website Manager的权限条目。因此添加团队成员的实际操作路径是以 Website Manager 身份登录后在Website About Us Settings中编辑Team Members表格。四、About Us 页面的渲染原理4.1 路由与上下文注入访问/about时Frappe 路由到 frappe/www/about.pydef get_context(context): context.doc frappe.get_cached_doc(About Us Settings) if context.doc.is_disabled: frappe.local.flags.redirect_location /404 raise frappe.Redirect return context使用frappe.get_cached_doc读取缓存的 About Us Settings 单例若is_disabled被勾选直接 302 重定向到/404sitemap 1声明该页面可被纳入站点地图索引。4.2 模板渲染成员卡片页面模板 frappe/www/about.html 中遍历子表行生成成员卡片{% for d in doc.get({doctype:About Us Team Member}) %} div classcol-md-2 mt-4 itemscope itemtypehttp://schema.org/Person img classcard card-md w-100 src{{ d.image_link }} itempropimage h5 classmt-3 itempropname{{ d.full_name }}/h5 p classsmall mt-2 itempropdescription{{ d.bio }}/p /div {% endfor %}值得注意的实现细节通过doc.get({doctype:About Us Team Member})过滤子表行即使以后team_members字段被调整也不影响取值逻辑每个成员卡片带schema.org/Person结构化标记itempropimage / name / description利于搜索引擎理解页面内容头像使用card样式类包裹w-100保证整列宽度自适应。about_us_settings.js还提示About Us 页面的固定链接为/about。五、端到端数据流总结录入Website Manager 在About Us Settings的Team Members表格中新增行填写full_name、上传/粘贴image_link、填写bio存储行数据以parentAbout Us Settings、parentfieldteam_members写入子表保存时触发clear_cache(about)请求访问/aboutabout.py校验is_disabled后注入上下文渲染about.html过滤About Us Team Member子表行逐行输出带 Person 结构化数据的成员卡片测试test_about_us_settings.py 提供了集成测试入口当前为空实现可在此扩展对页面上下文的断言。六、扩展建议若需要额外信息如职位、邮箱、社交链接在about_us_team_member.json的fields中追加字段并同步更新about_us_team_member.py的类型注解再在about.html模板对应位置输出若希望成员子表支持更多自定义业务校验可在AboutUsTeamMember控制器中实现validate等方法由于image_link为 Attach 类型可在页面中使用{{ d.image_link }}直接输出文件 URL也可结合 Frappe 的文件接口做图片裁剪与懒加载优化。通过本指南你可以完整掌握 Frappe 中“子表 DocType Single 父文档 网页模板”这一经典组合并能在自己的项目中照此模式快速搭建团队介绍、合作伙伴、荣誉奖项等同类列表型展示页面。【免费下载链接】frappeLow code web framework for real world applications, in Python and Javascript项目地址: https://gitcode.com/GitHub_Trending/fr/frappe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考