尧图网站建设 
al-folio 项目展示页实战Bootstrap Grid 图片网格布局与 redirect 重定向配置【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio本篇技术指南以 al-folio 学术主题仓库中的示例项目页面_projects/3_project.md为骨架系统讲解如何为个人项目创建带背景图、可跳转外部站点的展示页并深入剖析其背后的 front matter 字段语义、Jekyll collection 渲染链路以及基于 Bootstrap Grid 的1/3、2/3、全宽多尺寸图片网格排版方法。读完本文你将掌握在 al-folio 中新建项目页、配置图片网格与跳转重定向的完整实战方案并能直接复用文中代码搭建自己的作品集页面。一、示例项目页的整体结构_projects/3_project.md是 al-folio 自带的九个示例项目之一它演示的是一个会重定向到外部网站的项目卡片。文件头部 front matter 如下--- layout: page title: project 3 with very long name description: a project that redirects to another website img: assets/img/7.jpg redirect: https://www.wikipedia.org/ importance: 3 category: work ---这七个字段分别决定了该项目卡片在作品集页面与详情页中的表现layout: page复用 al-folio 的普通页面布局保证项目详情页有统一的页头、导航与页脚title卡片与页面标题。示例特意使用很长的标题验证卡片在网格中的换行与省略处理description显示在卡片上的简介文字img项目卡片的背景封面图这里指向仓库中的 assets/img/7.jpgredirect核心字段。当存在该字段时点击项目卡片不会进入详情页而是直接跳转到指定地址此处为https://www.wikipedia.org/importance整数值用于控制卡片在作品集页中的排序数值越小越靠前category项目所属分类。al-folio 默认按work工作与fun兴趣两类展示与 _pages/projects.md 中的display_categories: [work, fun]对应。正文部分则是完整的图片网格展示示例这也是所有_projects/*.md文件共用的功能展示页feature showcase page模板先用三列网格并排展示三张图片再用全宽单图、2/3 1/3非对称网格逐层铺开中间穿插正文文字与图片说明。二、redirect 字段卡片级跳转的实现与变体2.1 跳转的触发链路从源码结构看项目卡片的跳转由_pages/projects.md中引用的projects.liquidinclude 处理渲染每个项目卡片时若检测到project.redirect非空卡片链接便指向该地址而非项目详情页。这种卡片即入口的设计非常适合对接外部作品、论文仓库或个人主页。以 _posts/2022-02-01-redirect.md 为旁证同样的redirect字段也适用于博客文章——该文章将跳转目标指向站内资产--- layout: post title: a post with redirect date: 2022-02-01 17:39:00 description: you can also redirect to assets like pdf redirect: /assets/pdf/example_pdf.pdf ---可见redirect的目标地址有两种写法写法示例语义绝对 URL含://redirect: https://www.wikipedia.org/跳转到外部网站站内相对路径redirect: /assets/pdf/example_pdf.pdf跳转到仓库内资产文件2.2 内外部链接的区分逻辑在 _pages/blog.md 的博文列表中可以看到 al-folio 对这两种写法做了显式区分{% if post.redirect blank %} ... {% elsif post.redirect contains :// %} a classpost-title href{{ post.redirect }} target_blank{{ post.title }}/a ...即redirect为空则链接到详情页包含://则视为外部链接、新窗口打开target_blank否则作为站内相对路径用relative_url解析。这一约定同样适用于项目卡片配置时建议遵循外部网站写完整 URL站内文件写以/开头的相对路径。2.3 页面级重定向的另一个应用redirect机制还被用于 _pages/404.md--- layout: page permalink: /404.html title: Page not found description: Looks like there has been a mistake. Nothing exists here. redirect: true ---当redirect为布尔值true时404 页面会在数秒内自动跳转回主页。由此可以推断al-folio 将redirect字段设计为一套统一的卡片/页面跳转协议既支持字符串形式的精确地址也支持布尔值形式的默认跳转是项目展示页中最实用的轻量配置之一。三、卡片如何在作品集页中渲染要理解img、importance、category三个字段的实际作用需要看项目列表页 _pages/projects.md 的渲染逻辑{% if site.enable_project_categories and page.display_categories %} {% for category in page.display_categories %} a id{{ category }} href.#{{ category }} h2 classcategory{{ category }}/h2 /a {% assign categorized_projects site.projects | where: category, category %} {% assign sorted_projects categorized_projects | sort: importance %} ... div classrow row-cols-1 row-cols-md-3 {% for project in sorted_projects %} {% include projects.liquid %} {% endfor %} /div {% endfor %}关键行为如下按分类分组通过site.projects | where: category, category把_projects/下的所有项目按 front matter 的category字段过滤work与fun各自形成一节并在页面内提供锚点导航按 importance 排序sort: importance按数值升序排列importance: 3的示例项目会排在importance: 1、2的项目之后网格布局row-cols-1 row-cols-md-3让卡片在小屏单列、中等以上屏幕三列排布每张卡片由projects.liquidinclude 输出封面即 front matter 中的img字段description渲染为卡片简介开关控制enable_project_categories: true与enable_masonry: true两个开关在 _config.yml 中集中管理——前者决定是否启用分类展示后者决定是否用瀑布流自动排列卡片。若page.display_categories未定义则所有项目合并为一组按importance统一排序。四、用 Bootstrap Grid 搭建灵活图片网格项目详情页的核心是灵活的 3 列网格图片展示。al-folio 基于 Bootstrap 4 的 Grid 系统实现全部通过div classrow行与div classcol-sm列两个类组合而成。4.1 三列等宽网格各占 1/3div classrow div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/1.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/3.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/5.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div三个col-sm列在桌面端等分行宽每列各占约 1/3mt-3 mt-md-0控制垂直间距小屏上边距 3 个单位中等以上归零。每张图片上方都配有说明文字div classcaption Caption photos easily. On the left, a road goes through a tunnel. ... /divcaption容器是 al-folio 提供的说明文字样式紧跟图片网格放置即可。4.2 全宽单图div classrow div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/5.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div单个col-sm独占整行适合作为项目的大图展示如架构图、效果截图。4.3 非对称 2/3 1/3 网格div classrow justify-content-sm-center div classcol-sm-8 mt-3 mt-md-0 {% include figure.liquid pathassets/img/6.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm-4 mt-3 mt-md-0 {% include figure.liquid pathassets/img/11.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /divcol-sm-8与col-sm-4是 Bootstrap 的显式列宽类组合成8 4 12列的总宽度justify-content-sm-center让这一行在容器内水平居中视觉上形成大图 侧边小图的艺术化排版。这也是文档最后给出的完整可复制代码块原文档使用{% raw %}包裹避免 Liquid 引擎提前解析 include 语法div classrow justify-content-sm-center div classcol-sm-8 mt-3 mt-md-0 {% include figure.liquid pathassets/img/6.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm-4 mt-3 mt-md-0 {% include figure.liquid pathassets/img/11.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div4.4 栅格尺寸速查布局列类组合效果三列等宽三个col-sm每列约 1/3 宽全宽单个col-sm图片独占整行2/3 1/3col-sm-8col-sm-4大图配侧栏小图整行居中更多组合任意col-sm-N和为 12自定义比例五、figure.liquid 与图片样式类详解每个网格单元都调用主题内置的figure.liquidinclude 来输出图片其常用参数如下参数作用path图片路径如assets/img/6.jpg仓库根目录相对路径title图片的 alt 文本与标题属性用于无障碍与 SEOclass追加 CSS 类控制图片外观loadingeager让首屏图片立即加载三列网格示例使用非首屏可省略以启用懒加载class中三个类的职责明确与原文档描述一致img-fluid必须添加使图片宽度自适应父容器、随屏幕缩放这是响应式的关键rounded为图片添加圆角z-depth-1来自 Materialize 风格的阴影层级为图片添加柔和投影增强卡片质感。图片行之间可以自由插入普通 Markdown 正文_projects/1_project.md 甚至在其中使用{% cite einstein1950meaning %}插入文献引用形成文字介绍 图片展示交替的叙事节奏——先写项目背景再用下一行网格揭晓成果。六、实战新建一个带图片网格的项目页结合 docs/CUSTOMIZE.md 的官方指南新建项目展示页的完整步骤如下复制模板在 _projects/ 目录复制任一现有文件如3_project.md重命名为你的项目名这是官方推荐的最快方式修改 front matter设置title、description、img封面图、importance排序权重、categorywork或fun若项目需要跳转外部网站加上redirect字段并填入完整 URL准备封面图将封面图放入 assets/img/ 目录并在img中写入对应相对路径编排正文网格按第四节的三列/全宽/非对称模板组合rowcol-sm与figure.liquid每段网格后可加caption说明构建验证本地运行 Jekyll 构建站点检查卡片在项目列表页的分类、排序与封面图是否正确以及详情页网格在手机/桌面宽度下的表现。无需修改任何模板文件——_projects/作为 Jekyll collection 已在 _config.yml 中声明collections: projects: output: true新增 Markdown 文件会被自动收集并渲染这正是 al-folio内容与模板分离设计带来的低门槛。七、小结_projects/3_project.md虽是一个示例文件却浓缩了 al-folio 项目展示模块的三层核心能力front matter 元数据协议img/importance/category/redirect驱动作品集页的分类、排序与跳转Bootstrap Grid 网格体系rowcol-sm系列 figure.liquid 样式类提供从等宽三列到非对称混排的完整图文排版能力内容即配置的 collection 机制让新增项目页只靠复制文件、改字段即可完成无需触碰模板源码。若需进一步自定义项目页的展示样式如卡片圆角、间距、瀑布流开关可查阅 _config.yml 中的enable_project_categories、enable_masonry配置项以及 docs/CUSTOMIZE.md 中关于项目与集合collections的完整章节。【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 al-folio 项目展示页实战：Bootstrap Grid 图片网格布局与 redirect 重定向配置
al-folio 项目展示页实战Bootstrap Grid 图片网格布局与 redirect 重定向配置【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio本篇技术指南以 al-folio 学术主题仓库中的示例项目页面_projects/3_project.md为骨架系统讲解如何为个人项目创建带背景图、可跳转外部站点的展示页并深入剖析其背后的 front matter 字段语义、Jekyll collection 渲染链路以及基于 Bootstrap Grid 的1/3、2/3、全宽多尺寸图片网格排版方法。读完本文你将掌握在 al-folio 中新建项目页、配置图片网格与跳转重定向的完整实战方案并能直接复用文中代码搭建自己的作品集页面。一、示例项目页的整体结构_projects/3_project.md是 al-folio 自带的九个示例项目之一它演示的是一个会重定向到外部网站的项目卡片。文件头部 front matter 如下--- layout: page title: project 3 with very long name description: a project that redirects to another website img: assets/img/7.jpg redirect: https://www.wikipedia.org/ importance: 3 category: work ---这七个字段分别决定了该项目卡片在作品集页面与详情页中的表现layout: page复用 al-folio 的普通页面布局保证项目详情页有统一的页头、导航与页脚title卡片与页面标题。示例特意使用很长的标题验证卡片在网格中的换行与省略处理description显示在卡片上的简介文字img项目卡片的背景封面图这里指向仓库中的 assets/img/7.jpgredirect核心字段。当存在该字段时点击项目卡片不会进入详情页而是直接跳转到指定地址此处为https://www.wikipedia.org/importance整数值用于控制卡片在作品集页中的排序数值越小越靠前category项目所属分类。al-folio 默认按work工作与fun兴趣两类展示与 _pages/projects.md 中的display_categories: [work, fun]对应。正文部分则是完整的图片网格展示示例这也是所有_projects/*.md文件共用的功能展示页feature showcase page模板先用三列网格并排展示三张图片再用全宽单图、2/3 1/3非对称网格逐层铺开中间穿插正文文字与图片说明。二、redirect 字段卡片级跳转的实现与变体2.1 跳转的触发链路从源码结构看项目卡片的跳转由_pages/projects.md中引用的projects.liquidinclude 处理渲染每个项目卡片时若检测到project.redirect非空卡片链接便指向该地址而非项目详情页。这种卡片即入口的设计非常适合对接外部作品、论文仓库或个人主页。以 _posts/2022-02-01-redirect.md 为旁证同样的redirect字段也适用于博客文章——该文章将跳转目标指向站内资产--- layout: post title: a post with redirect date: 2022-02-01 17:39:00 description: you can also redirect to assets like pdf redirect: /assets/pdf/example_pdf.pdf ---可见redirect的目标地址有两种写法写法示例语义绝对 URL含://redirect: https://www.wikipedia.org/跳转到外部网站站内相对路径redirect: /assets/pdf/example_pdf.pdf跳转到仓库内资产文件2.2 内外部链接的区分逻辑在 _pages/blog.md 的博文列表中可以看到 al-folio 对这两种写法做了显式区分{% if post.redirect blank %} ... {% elsif post.redirect contains :// %} a classpost-title href{{ post.redirect }} target_blank{{ post.title }}/a ...即redirect为空则链接到详情页包含://则视为外部链接、新窗口打开target_blank否则作为站内相对路径用relative_url解析。这一约定同样适用于项目卡片配置时建议遵循外部网站写完整 URL站内文件写以/开头的相对路径。2.3 页面级重定向的另一个应用redirect机制还被用于 _pages/404.md--- layout: page permalink: /404.html title: Page not found description: Looks like there has been a mistake. Nothing exists here. redirect: true ---当redirect为布尔值true时404 页面会在数秒内自动跳转回主页。由此可以推断al-folio 将redirect字段设计为一套统一的卡片/页面跳转协议既支持字符串形式的精确地址也支持布尔值形式的默认跳转是项目展示页中最实用的轻量配置之一。三、卡片如何在作品集页中渲染要理解img、importance、category三个字段的实际作用需要看项目列表页 _pages/projects.md 的渲染逻辑{% if site.enable_project_categories and page.display_categories %} {% for category in page.display_categories %} a id{{ category }} href.#{{ category }} h2 classcategory{{ category }}/h2 /a {% assign categorized_projects site.projects | where: category, category %} {% assign sorted_projects categorized_projects | sort: importance %} ... div classrow row-cols-1 row-cols-md-3 {% for project in sorted_projects %} {% include projects.liquid %} {% endfor %} /div {% endfor %}关键行为如下按分类分组通过site.projects | where: category, category把_projects/下的所有项目按 front matter 的category字段过滤work与fun各自形成一节并在页面内提供锚点导航按 importance 排序sort: importance按数值升序排列importance: 3的示例项目会排在importance: 1、2的项目之后网格布局row-cols-1 row-cols-md-3让卡片在小屏单列、中等以上屏幕三列排布每张卡片由projects.liquidinclude 输出封面即 front matter 中的img字段description渲染为卡片简介开关控制enable_project_categories: true与enable_masonry: true两个开关在 _config.yml 中集中管理——前者决定是否启用分类展示后者决定是否用瀑布流自动排列卡片。若page.display_categories未定义则所有项目合并为一组按importance统一排序。四、用 Bootstrap Grid 搭建灵活图片网格项目详情页的核心是灵活的 3 列网格图片展示。al-folio 基于 Bootstrap 4 的 Grid 系统实现全部通过div classrow行与div classcol-sm列两个类组合而成。4.1 三列等宽网格各占 1/3div classrow div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/1.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/3.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/5.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div三个col-sm列在桌面端等分行宽每列各占约 1/3mt-3 mt-md-0控制垂直间距小屏上边距 3 个单位中等以上归零。每张图片上方都配有说明文字div classcaption Caption photos easily. On the left, a road goes through a tunnel. ... /divcaption容器是 al-folio 提供的说明文字样式紧跟图片网格放置即可。4.2 全宽单图div classrow div classcol-sm mt-3 mt-md-0 {% include figure.liquid loadingeager pathassets/img/5.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div单个col-sm独占整行适合作为项目的大图展示如架构图、效果截图。4.3 非对称 2/3 1/3 网格div classrow justify-content-sm-center div classcol-sm-8 mt-3 mt-md-0 {% include figure.liquid pathassets/img/6.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm-4 mt-3 mt-md-0 {% include figure.liquid pathassets/img/11.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /divcol-sm-8与col-sm-4是 Bootstrap 的显式列宽类组合成8 4 12列的总宽度justify-content-sm-center让这一行在容器内水平居中视觉上形成大图 侧边小图的艺术化排版。这也是文档最后给出的完整可复制代码块原文档使用{% raw %}包裹避免 Liquid 引擎提前解析 include 语法div classrow justify-content-sm-center div classcol-sm-8 mt-3 mt-md-0 {% include figure.liquid pathassets/img/6.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div div classcol-sm-4 mt-3 mt-md-0 {% include figure.liquid pathassets/img/11.jpg titleexample image classimg-fluid rounded z-depth-1 %} /div /div4.4 栅格尺寸速查布局列类组合效果三列等宽三个col-sm每列约 1/3 宽全宽单个col-sm图片独占整行2/3 1/3col-sm-8col-sm-4大图配侧栏小图整行居中更多组合任意col-sm-N和为 12自定义比例五、figure.liquid 与图片样式类详解每个网格单元都调用主题内置的figure.liquidinclude 来输出图片其常用参数如下参数作用path图片路径如assets/img/6.jpg仓库根目录相对路径title图片的 alt 文本与标题属性用于无障碍与 SEOclass追加 CSS 类控制图片外观loadingeager让首屏图片立即加载三列网格示例使用非首屏可省略以启用懒加载class中三个类的职责明确与原文档描述一致img-fluid必须添加使图片宽度自适应父容器、随屏幕缩放这是响应式的关键rounded为图片添加圆角z-depth-1来自 Materialize 风格的阴影层级为图片添加柔和投影增强卡片质感。图片行之间可以自由插入普通 Markdown 正文_projects/1_project.md 甚至在其中使用{% cite einstein1950meaning %}插入文献引用形成文字介绍 图片展示交替的叙事节奏——先写项目背景再用下一行网格揭晓成果。六、实战新建一个带图片网格的项目页结合 docs/CUSTOMIZE.md 的官方指南新建项目展示页的完整步骤如下复制模板在 _projects/ 目录复制任一现有文件如3_project.md重命名为你的项目名这是官方推荐的最快方式修改 front matter设置title、description、img封面图、importance排序权重、categorywork或fun若项目需要跳转外部网站加上redirect字段并填入完整 URL准备封面图将封面图放入 assets/img/ 目录并在img中写入对应相对路径编排正文网格按第四节的三列/全宽/非对称模板组合rowcol-sm与figure.liquid每段网格后可加caption说明构建验证本地运行 Jekyll 构建站点检查卡片在项目列表页的分类、排序与封面图是否正确以及详情页网格在手机/桌面宽度下的表现。无需修改任何模板文件——_projects/作为 Jekyll collection 已在 _config.yml 中声明collections: projects: output: true新增 Markdown 文件会被自动收集并渲染这正是 al-folio内容与模板分离设计带来的低门槛。七、小结_projects/3_project.md虽是一个示例文件却浓缩了 al-folio 项目展示模块的三层核心能力front matter 元数据协议img/importance/category/redirect驱动作品集页的分类、排序与跳转Bootstrap Grid 网格体系rowcol-sm系列 figure.liquid 样式类提供从等宽三列到非对称混排的完整图文排版能力内容即配置的 collection 机制让新增项目页只靠复制文件、改字段即可完成无需触碰模板源码。若需进一步自定义项目页的展示样式如卡片圆角、间距、瀑布流开关可查阅 _config.yml 中的enable_project_categories、enable_masonry配置项以及 docs/CUSTOMIZE.md 中关于项目与集合collections的完整章节。【免费下载链接】al-folioA beautiful, simple, clean, and responsive Jekyll theme for academics项目地址: https://gitcode.com/GitHub_Trending/al/al-folio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考