Hugo教程#5遍历页面

简介: 前面几期视频学习了一些布局和模板语法,其实`Hugo`的最终用法就是来写个人博客,需要遍历出所有的博客来呈现在网站的主页,Markdown文件都会创建一个页面,所以只需要把每个页面的地址遍历出来就行了

首发于Enaium的个人博客


引言

前面几期视频学习了一些布局和模板语法,其实Hugo的最终用法就是来写个人博客,需要遍历出所有的博客来呈现在网站的主页,Markdown文件都会创建一个页面,所以只需要把每个页面的地址遍历出来就行了

创建页面

首先在content/post创建多个页面,以此类推创建4个页面

# Post1

布局

因为要使用模板语法来遍历出这些页面,所以这里选择修改主页布局,使用with将当前目录改为/post,接着使用range来遍历.Pages,Title就是每个页面的标题,Permalink就是路径

{
  { with .Site.GetPage "/post" }}
    {
  { range .Pages }}
        <p><a href="{
    { .Permalink }}">{
  { .Title }}</a></p>
    {
  { end }}
{
  { end }}
目录
相关文章
|
2月前
|
自然语言处理 JavaScript 网络协议
简单使用vitepress快速搭建一个文档网站
VitePress 是一个静态站点生成器 (SSG),类似的项目有docsify、VuePress、hexo。用 Markdown 编写的内容生成可以轻松部署到任何地方的静态 HTML 页。
46 9
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
6月前
|
Shell 开发工具 git
[oeasy]python019_ 如何在github仓库中进入目录_找到程序代码_找到代码
本文档介绍了如何在终端环境下使用Git克隆仓库后,通过`cd`、`pwd`和`ls`命令导航并找到下载的文件。首先,使用`ls`查看当前目录,然后通过`cd`逐层进入目标文件夹,最后到达包含游戏文件game.py的位置。文章还提到了如果`git clone`失败,可以直接进行下一节实验。
49 0
|
6月前
|
JavaScript 前端开发 Windows
blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器
对比多个博客引擎如 Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress 和 Nuxt.js,文章提供了安装和入门指南。VuePress 是专为 Vue.js 爱好者设计的静态网站生成器,强调 Vue 集成、Markdown 编写、美观默认主题及插件系统。安装涉及 Node.js,通过全局安装 VuePress,然后创建、预览、构建和部署静态文件。适合技术文档和简单博客,但对非 Vue.js 用户有一定学习曲线。
|
JavaScript Go Cloud Native
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 |Go主题月
经过前面两弹的介绍,相信大家对图床都不陌生了吧,但是小魔童觉得这样做法还是不方便,使用 github的仓库来存放图片,如果不能上外网的话是不能展示图片的,自己可以上外网还不行,需要别人上外网才可以看到我文章中的图片,这也太难了
131 0
|
前端开发
#yyds干货盘点# react笔记之学习之空列表提示
#yyds干货盘点# react笔记之学习之空列表提示
67 0
#yyds干货盘点# react笔记之学习之空列表提示
|
前端开发
#yyds干货盘点 react笔记之学习之空列表提示
#yyds干货盘点 react笔记之学习之空列表提示
85 0
|
自然语言处理 数据安全/隐私保护 开发者
插件安装演示Ⅰ | 学习笔记
快速学习插件安装演示Ⅰ
插件安装演示Ⅰ | 学习笔记
|
JSON 自然语言处理 数据格式
插件安装演示Ⅱ | 学习笔记
快速学习插件安装演示Ⅱ
插件安装演示Ⅱ | 学习笔记