al-folio 成员展示页People 页面配置实战_pages/profiles.md全字段解析与多人扩展指南【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio本文以 al-folio 主题仓库中的 成员展示页模板 为蓝本系统讲解如何通过一份 YAML front matter 驱动出一个面向实验室Lab或课题组Group成员的/people/页面从 permalink 路由、导航排序到profiles列表中每个成员的align、image、content、image_circular、more_info字段再到复制块扩展多成员、配套内容文件与图片资源的准备。读完本文你将能够完全脱离模板独立配置出一个与 al-folio 首页风格一致、可无限扩充成员的团队展示页。al-folio 主题 /people/ 成员页面预览截图一、profiles 页是什么面向实验室 / 课题组的成员页面al-folio 是一个面向学者的 Jekyll 主题。除了首页、博客、出版物、CV 等常规页面之外它还内置了一个专门用于展示「实验室或课题组成员」的页面对应的数据文件就是本文的主角 _pages/profiles.md。这份文件的 front matter 定义了页面的全部元信息与成员数据--- layout: profiles permalink: /people/ title: people description: members of the lab or group nav: true nav_order: 7 profiles: # if you want to include more than one profile, just replicate the following block # and create one content file for each profile inside _pages/ - align: right image: prof_pic.jpg content: about_einstein.md image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p - align: left image: prof_pic.jpg content: about_einstein.md image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p ---README 对这类页面的总体定位是内容驱动content-drivenREADME.md 中明确写道 Publications are generated from your BibTeX bibliography, the CV from a singlecv.ymlorresume.json, and the people page from_data. Everything is content-driven — you edit data files, not templates. 即成员页同样遵循「改数据、不动模板」的哲学——你只需要维护 YAML 数据与对应的 Markdown 内容文件主题会自动完成渲染。从仓库内的截图脚本 bin/capture_screenshots.js 可以看到该页面的路由被正式捕获验证{ name: people, url: /people/, theme: light, height: 950 }也就是说构建后访问站点根目录下的/people/即可看到这一页。页面的layout: profiles布局模板由主题核心组件提供本仓库中的布局文件来自 Gemfile 中固定的al_folio_core依赖参见 docs/ARCHITECTURE.md它会遍历 front matter 中profiles列表为每一位成员渲染头像、信息区与简介。二、front matter 字段逐项解析profiles.md的 front matter 分为两大部分页面级元信息与成员数据。下面逐一说明每个字段的作用。页面级元信息字段取值示例作用layoutprofiles指定渲染该页使用的布局由主题的 profiles 布局组件提供permalink/people/页面的最终 URL访问你的域名/people/即到达此页titlepeople页面标题同时用于导航栏显示文本descriptionmembers of the lab or group页面描述用于 SEO 与元信息navtrue是否在顶部导航栏显示该页面nav_order7导航栏中的排序序号关于nav_order可以对照仓库中其他页面的取值来理解导航顺序_pages/blog.md 为 1、_pages/publications.md 为 2、_pages/projects.md 为 3、_pages/repositories.md 为 4、_pages/cv.md 为 5、_pages/teaching.md 为 6而本页为 7。也就是说成员页默认排在「教学teaching」之后。若不想让它在导航中出现将nav改为false即可可参考 _pages/books.md 与 _pages/plugins.md 中nav: false的用法这类页面仍然通过 permalink 可访问只是不进导航。成员数据profiles 列表profiles是一个 YAML 列表每个-开头、以两个空格缩进的块代表一位成员。列表中可以放置任意多个块主题渲染时会依次生成每位成员的展示区域。三、单个成员块的核心字段详解每个成员块支持五个关键字段它们共同决定这位成员在页面上如何呈现。3.1align: right/align: left—— 图文排版方向align控制成员头像与文本的左右排布right表示头像靠右、文字靠左left表示头像靠左、文字靠右。在profiles.md的示例中第一位成员使用right第二位使用left这样可以形成交替排布的视觉效果避免页面单调。3.2image: prof_pic.jpg—— 成员头像image指定成员的图片文件名。al-folio 约定图片放在assets/img/目录下模板默认提供的示例头像为 assets/img/prof_pic.jpg同时仓库还备有同源彩色版本 assets/img/prof_pic_color.png。替换方法在 docs/QUICKSTART.md 中有明确指引将你自己的照片覆盖到assets/img/prof_pic.jpg即可。如果你为不同成员准备了不同图片只需把各自的文件名如member_a.jpg、member_b.jpg填入对应块的image字段。3.3content: about_einstein.md—— 成员简介内容文件content指向该成员的详细简介文件。注意这个文件需要放在_pages/目录下与profiles.md同层。仓库中的示例 _pages/about_einstein.md 就是一个典型的内容文件它包含三段 Markdown 正文第一段自我介绍可以放文字、链接甚至图片第二段说明如何把地址 / P.O. Box 等联系方式放在头像下方并提示可通过编辑_pages/about.md的profile属性开关这些元素第三段介绍如何接入社交链接主题默认支持 Font Awesome 与 Academicons 图标。也就是说content字段让你的成员简介完全自由——它就是一整篇普通 Markdown可以写研究方向、代表成果、个人链接等任何内容。3.4image_circular: false—— 圆形裁剪开关image_circular控制头像是否被裁剪为圆形。示例中给出的注释是 crops the image to make it circular设为true时头像以圆形呈现适合证件照风格设为false时保留原始矩形示例默认值。这一开关在 _pages/about.md 的首页 profile 块中同样存在语义完全一致。3.5more_info—— 办公信息 / 联系方式区块more_info用于在头像旁展示办公信息如办公室号、街道地址、城市邮编等。它是一个 YAML 折叠标量符号表示将后续多行文本折叠为一段内容直接是 HTMLmore_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p每一行一个p段落最终会被原样注入页面。你可以自由替换为真实的办公室号、邮箱、电话或实验室地址。需要更多信息行时继续以同样缩进追加p.../p即可不需要时可将more_info整个键移除或留空页面不会因此报错。四、多成员扩展复制块 独立内容文件profiles.md的注释明确给出了扩展方法if you want to include more than one profile, just replicate the following block and create one content file for each profile inside_pages/即复制一个成员块 新建一个内容文件。标准操作流程如下复制块在profiles列表下复制一份以-开头的成员块修改align建议与上一成员交替、image换成该成员的头像文件、content指向新建的内容文件、more_info换成该成员的办公信息。创建内容文件在_pages/目录下新建一个 Markdown 文件例如_pages/member_alice.md在里面撰写该成员的简介正文可参照 about_einstein.md 的写法。准备头像将头像文件放入assets/img/并确保image字段中的文件名与之一致。以第二位成员为例扩展后的效果与模板中两个块的结构一致第一位align: right、第二位align: left头像交替出现每块下方是各自的more_info办公信息与content简介。即使增加到十几位成员也只需不断复制块、新建文件无需改动任何模板代码——这正是 al-folio content-driven 设计在成员页上的体现。五、与首页单成员 profile 的对比_pages/about.md理解了profiles页后不妨与首页的成员块做个对照。_pages/about.md 的 front matter 中同样存在一个profile块注意是单数字段几乎一致profile: align: right image: prof_pic.jpg image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p两者的核心区别有两点profiles复数是一个列表可以容纳多位成员而首页的profile单数只有一个对象通常只展示站主本人。首页profile块没有content字段——因为首页正文本身就是简介直接写在 _pages/about.md 的 Markdown 正文部分而成员页每个成员都需要独立的content文件来承载各自的简介。此外首页profile块还拥有额外的页面级控制项selected_papers是否在首页展示标记为selected{true}的论文、social是否在底部显示社交图标、announcements新闻列表的enabled/scrollable/limit以及latest_posts最新博文展示。这些是首页专属能力成员页不需要也不应照搬。对于想快速理解「单成员 vs 多成员」两种形态差异的读者同时阅读这两份文件是最直接的途径。六、图片与资源准备成员页使用的头像图片统一放置在assets/img/目录下。仓库当前提供assets/img/prof_pic.jpg模板默认示例头像3250×4333assets/img/prof_pic_color.png同源彩色版本。按照 docs/QUICKSTART.md 的指引定制时用你自己的照片替换assets/img/prof_pic.jpg即可。建议图片使用较为方正的构图方便image_circular: true时裁剪成圆形图片文件名避免中文与空格保持小写字母 下划线的命名习惯如果实验室有统一 Logo 或成员集体照也可以放在assets/img/下通过content文件中的 Markdown 图片语法嵌入简介区。七、本地预览与验证完成配置后在仓库根目录启动 Jekyll 即可在本地验证# 使用 Docker推荐无需在宿主机安装 Ruby 环境 docker compose up # 或原生方式 bundle exec jekyll serve构建完成后访问http://localhost:4000/people/取决于_config.yml中的 baseurl 配置若 baseurl 非空则需拼接对应前缀应能看到导航栏中出现在「教学teaching」之后、序号为 7 的 people 入口页面自上而下依次渲染每一位成员的图文块头像与more_info按align指定的方向排布每个成员块下方是content文件渲染出的 Markdown 简介。仓库中的截图脚本 bin/capture_screenshots.js 已把/people/作为官方验证页面之一url: /people/、height: 950说明该页面是主题的核心展示面之一值得重点打磨。八、常见问题与注意事项YAML 缩进敏感profiles列表中的每个块必须严格以-开头块内字段缩进保持一致示例统一为 4 空格。缩进错乱会导致 Jekyll 构建报错或字段被忽略。修改后建议先bundle exec jekyll build验证无语法错误。content文件的位置content指向的 Markdown 必须放在_pages/目录下与profiles.md同级且文件名要与字段值完全一致如about_einstein.md。more_info的 HTML 写法该字段直接输出 HTMLp标签需闭合内容过长时注意换行缩进仍要满足 YAML 折叠标量的要求。image路径的约定image字段填文件名主题会从assets/img/目录解析。不要填成assets/img/prof_pic.jpg这类带目录前缀的相对路径。nav: false隐藏入口若不想让成员页出现在导航栏将nav改为false页面仍可通过/people/直接访问参考 _pages/books.md 的做法。多成员时保持一致性每位成员建议都提供align、image、content、image_circular、more_info五个字段避免部分成员缺失头像或简介导致页面排版参差。通过本文的字段解析与扩展步骤你可以基于 _pages/profiles.md 快速搭建出结构清晰、可无限扩展的实验室成员页面如需了解更底层的布局实现机制可继续阅读 docs/ARCHITECTURE.md 与 Gemfile了解主题插件al_folio_core是如何承载profiles布局的。【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 al-folio 成员展示页（People 页面）配置实战：`_pages/profiles.md` 全字段解析与多人扩展指南
al-folio 成员展示页People 页面配置实战_pages/profiles.md全字段解析与多人扩展指南【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio本文以 al-folio 主题仓库中的 成员展示页模板 为蓝本系统讲解如何通过一份 YAML front matter 驱动出一个面向实验室Lab或课题组Group成员的/people/页面从 permalink 路由、导航排序到profiles列表中每个成员的align、image、content、image_circular、more_info字段再到复制块扩展多成员、配套内容文件与图片资源的准备。读完本文你将能够完全脱离模板独立配置出一个与 al-folio 首页风格一致、可无限扩充成员的团队展示页。al-folio 主题 /people/ 成员页面预览截图一、profiles 页是什么面向实验室 / 课题组的成员页面al-folio 是一个面向学者的 Jekyll 主题。除了首页、博客、出版物、CV 等常规页面之外它还内置了一个专门用于展示「实验室或课题组成员」的页面对应的数据文件就是本文的主角 _pages/profiles.md。这份文件的 front matter 定义了页面的全部元信息与成员数据--- layout: profiles permalink: /people/ title: people description: members of the lab or group nav: true nav_order: 7 profiles: # if you want to include more than one profile, just replicate the following block # and create one content file for each profile inside _pages/ - align: right image: prof_pic.jpg content: about_einstein.md image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p - align: left image: prof_pic.jpg content: about_einstein.md image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p ---README 对这类页面的总体定位是内容驱动content-drivenREADME.md 中明确写道 Publications are generated from your BibTeX bibliography, the CV from a singlecv.ymlorresume.json, and the people page from_data. Everything is content-driven — you edit data files, not templates. 即成员页同样遵循「改数据、不动模板」的哲学——你只需要维护 YAML 数据与对应的 Markdown 内容文件主题会自动完成渲染。从仓库内的截图脚本 bin/capture_screenshots.js 可以看到该页面的路由被正式捕获验证{ name: people, url: /people/, theme: light, height: 950 }也就是说构建后访问站点根目录下的/people/即可看到这一页。页面的layout: profiles布局模板由主题核心组件提供本仓库中的布局文件来自 Gemfile 中固定的al_folio_core依赖参见 docs/ARCHITECTURE.md它会遍历 front matter 中profiles列表为每一位成员渲染头像、信息区与简介。二、front matter 字段逐项解析profiles.md的 front matter 分为两大部分页面级元信息与成员数据。下面逐一说明每个字段的作用。页面级元信息字段取值示例作用layoutprofiles指定渲染该页使用的布局由主题的 profiles 布局组件提供permalink/people/页面的最终 URL访问你的域名/people/即到达此页titlepeople页面标题同时用于导航栏显示文本descriptionmembers of the lab or group页面描述用于 SEO 与元信息navtrue是否在顶部导航栏显示该页面nav_order7导航栏中的排序序号关于nav_order可以对照仓库中其他页面的取值来理解导航顺序_pages/blog.md 为 1、_pages/publications.md 为 2、_pages/projects.md 为 3、_pages/repositories.md 为 4、_pages/cv.md 为 5、_pages/teaching.md 为 6而本页为 7。也就是说成员页默认排在「教学teaching」之后。若不想让它在导航中出现将nav改为false即可可参考 _pages/books.md 与 _pages/plugins.md 中nav: false的用法这类页面仍然通过 permalink 可访问只是不进导航。成员数据profiles 列表profiles是一个 YAML 列表每个-开头、以两个空格缩进的块代表一位成员。列表中可以放置任意多个块主题渲染时会依次生成每位成员的展示区域。三、单个成员块的核心字段详解每个成员块支持五个关键字段它们共同决定这位成员在页面上如何呈现。3.1align: right/align: left—— 图文排版方向align控制成员头像与文本的左右排布right表示头像靠右、文字靠左left表示头像靠左、文字靠右。在profiles.md的示例中第一位成员使用right第二位使用left这样可以形成交替排布的视觉效果避免页面单调。3.2image: prof_pic.jpg—— 成员头像image指定成员的图片文件名。al-folio 约定图片放在assets/img/目录下模板默认提供的示例头像为 assets/img/prof_pic.jpg同时仓库还备有同源彩色版本 assets/img/prof_pic_color.png。替换方法在 docs/QUICKSTART.md 中有明确指引将你自己的照片覆盖到assets/img/prof_pic.jpg即可。如果你为不同成员准备了不同图片只需把各自的文件名如member_a.jpg、member_b.jpg填入对应块的image字段。3.3content: about_einstein.md—— 成员简介内容文件content指向该成员的详细简介文件。注意这个文件需要放在_pages/目录下与profiles.md同层。仓库中的示例 _pages/about_einstein.md 就是一个典型的内容文件它包含三段 Markdown 正文第一段自我介绍可以放文字、链接甚至图片第二段说明如何把地址 / P.O. Box 等联系方式放在头像下方并提示可通过编辑_pages/about.md的profile属性开关这些元素第三段介绍如何接入社交链接主题默认支持 Font Awesome 与 Academicons 图标。也就是说content字段让你的成员简介完全自由——它就是一整篇普通 Markdown可以写研究方向、代表成果、个人链接等任何内容。3.4image_circular: false—— 圆形裁剪开关image_circular控制头像是否被裁剪为圆形。示例中给出的注释是 crops the image to make it circular设为true时头像以圆形呈现适合证件照风格设为false时保留原始矩形示例默认值。这一开关在 _pages/about.md 的首页 profile 块中同样存在语义完全一致。3.5more_info—— 办公信息 / 联系方式区块more_info用于在头像旁展示办公信息如办公室号、街道地址、城市邮编等。它是一个 YAML 折叠标量符号表示将后续多行文本折叠为一段内容直接是 HTMLmore_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p每一行一个p段落最终会被原样注入页面。你可以自由替换为真实的办公室号、邮箱、电话或实验室地址。需要更多信息行时继续以同样缩进追加p.../p即可不需要时可将more_info整个键移除或留空页面不会因此报错。四、多成员扩展复制块 独立内容文件profiles.md的注释明确给出了扩展方法if you want to include more than one profile, just replicate the following block and create one content file for each profile inside_pages/即复制一个成员块 新建一个内容文件。标准操作流程如下复制块在profiles列表下复制一份以-开头的成员块修改align建议与上一成员交替、image换成该成员的头像文件、content指向新建的内容文件、more_info换成该成员的办公信息。创建内容文件在_pages/目录下新建一个 Markdown 文件例如_pages/member_alice.md在里面撰写该成员的简介正文可参照 about_einstein.md 的写法。准备头像将头像文件放入assets/img/并确保image字段中的文件名与之一致。以第二位成员为例扩展后的效果与模板中两个块的结构一致第一位align: right、第二位align: left头像交替出现每块下方是各自的more_info办公信息与content简介。即使增加到十几位成员也只需不断复制块、新建文件无需改动任何模板代码——这正是 al-folio content-driven 设计在成员页上的体现。五、与首页单成员 profile 的对比_pages/about.md理解了profiles页后不妨与首页的成员块做个对照。_pages/about.md 的 front matter 中同样存在一个profile块注意是单数字段几乎一致profile: align: right image: prof_pic.jpg image_circular: false # crops the image to make it circular more_info: p555 your office number/p p123 your address street/p pYour City, State 12345/p两者的核心区别有两点profiles复数是一个列表可以容纳多位成员而首页的profile单数只有一个对象通常只展示站主本人。首页profile块没有content字段——因为首页正文本身就是简介直接写在 _pages/about.md 的 Markdown 正文部分而成员页每个成员都需要独立的content文件来承载各自的简介。此外首页profile块还拥有额外的页面级控制项selected_papers是否在首页展示标记为selected{true}的论文、social是否在底部显示社交图标、announcements新闻列表的enabled/scrollable/limit以及latest_posts最新博文展示。这些是首页专属能力成员页不需要也不应照搬。对于想快速理解「单成员 vs 多成员」两种形态差异的读者同时阅读这两份文件是最直接的途径。六、图片与资源准备成员页使用的头像图片统一放置在assets/img/目录下。仓库当前提供assets/img/prof_pic.jpg模板默认示例头像3250×4333assets/img/prof_pic_color.png同源彩色版本。按照 docs/QUICKSTART.md 的指引定制时用你自己的照片替换assets/img/prof_pic.jpg即可。建议图片使用较为方正的构图方便image_circular: true时裁剪成圆形图片文件名避免中文与空格保持小写字母 下划线的命名习惯如果实验室有统一 Logo 或成员集体照也可以放在assets/img/下通过content文件中的 Markdown 图片语法嵌入简介区。七、本地预览与验证完成配置后在仓库根目录启动 Jekyll 即可在本地验证# 使用 Docker推荐无需在宿主机安装 Ruby 环境 docker compose up # 或原生方式 bundle exec jekyll serve构建完成后访问http://localhost:4000/people/取决于_config.yml中的 baseurl 配置若 baseurl 非空则需拼接对应前缀应能看到导航栏中出现在「教学teaching」之后、序号为 7 的 people 入口页面自上而下依次渲染每一位成员的图文块头像与more_info按align指定的方向排布每个成员块下方是content文件渲染出的 Markdown 简介。仓库中的截图脚本 bin/capture_screenshots.js 已把/people/作为官方验证页面之一url: /people/、height: 950说明该页面是主题的核心展示面之一值得重点打磨。八、常见问题与注意事项YAML 缩进敏感profiles列表中的每个块必须严格以-开头块内字段缩进保持一致示例统一为 4 空格。缩进错乱会导致 Jekyll 构建报错或字段被忽略。修改后建议先bundle exec jekyll build验证无语法错误。content文件的位置content指向的 Markdown 必须放在_pages/目录下与profiles.md同级且文件名要与字段值完全一致如about_einstein.md。more_info的 HTML 写法该字段直接输出 HTMLp标签需闭合内容过长时注意换行缩进仍要满足 YAML 折叠标量的要求。image路径的约定image字段填文件名主题会从assets/img/目录解析。不要填成assets/img/prof_pic.jpg这类带目录前缀的相对路径。nav: false隐藏入口若不想让成员页出现在导航栏将nav改为false页面仍可通过/people/直接访问参考 _pages/books.md 的做法。多成员时保持一致性每位成员建议都提供align、image、content、image_circular、more_info五个字段避免部分成员缺失头像或简介导致页面排版参差。通过本文的字段解析与扩展步骤你可以基于 _pages/profiles.md 快速搭建出结构清晰、可无限扩展的实验室成员页面如需了解更底层的布局实现机制可继续阅读 docs/ARCHITECTURE.md 与 Gemfile了解主题插件al_folio_core是如何承载profiles布局的。【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考