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 }}
目录
相关文章
|
4月前
|
自然语言处理 JavaScript 网络协议
简单使用vitepress快速搭建一个文档网站
VitePress 是一个静态站点生成器 (SSG),类似的项目有docsify、VuePress、hexo。用 Markdown 编写的内容生成可以轻松部署到任何地方的静态 HTML 页。
92 9
|
5月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
174 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
4月前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
6月前
|
JavaScript
js 【实用技巧】给全文代码添加一键复制按钮
js 【实用技巧】给全文代码添加一键复制按钮
97 1
文本,vitepress的使用,vitepress的参考文档,自定义主页,从创建package之后的资料,底部命令的创建
文本,vitepress的使用,vitepress的参考文档,自定义主页,从创建package之后的资料,底部命令的创建
|
8月前
|
Shell 开发工具 git
[oeasy]python019_ 如何在github仓库中进入目录_找到程序代码_找到代码
本文档介绍了如何在终端环境下使用Git克隆仓库后,通过`cd`、`pwd`和`ls`命令导航并找到下载的文件。首先,使用`ls`查看当前目录,然后通过`cd`逐层进入目标文件夹,最后到达包含游戏文件game.py的位置。文章还提到了如果`git clone`失败,可以直接进行下一节实验。
58 0
|
8月前
|
JavaScript 前端开发
Node.js新手必备:超实用命令行入门教程
Node.js新手必备:超实用命令行入门教程
70 0
|
JavaScript Go Cloud Native
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 |Go主题月
经过前面两弹的介绍,相信大家对图床都不陌生了吧,但是小魔童觉得这样做法还是不方便,使用 github的仓库来存放图片,如果不能上外网的话是不能展示图片的,自己可以上外网还不行,需要别人上外网才可以看到我文章中的图片,这也太难了
144 0
|
JavaScript
js基础笔记学习229元素得修改2
js基础笔记学习229元素得修改2
83 0
js基础笔记学习229元素得修改2
|
JavaScript
js基础笔记学习228元素得修改1
js基础笔记学习228元素得修改1
75 0
js基础笔记学习228元素得修改1