Hugo教程#3单页面布局

简介: 上集我们学习了如何创建一个index的布局,那么是不是所有的页面都要创建一个布局,那肯定不是的,那样的话实在太麻烦,因为只显对应页面的markdown里面的内容,所以创建一个single.html布局就可以了,所有的页面都可以使用这个布局

首发于Enaium的个人博客


引言

上集我们学习了如何创建一个index的布局,那么是不是所有的页面都要创建一个布局,那肯定不是的,那样的话实在太麻烦,因为只显对应页面的markdown里面的内容,所以创建一个single.html布局就可以了,所有的页面都可以使用这个布局

布局

layouts/_default里有一个single.html的布局,默认是空的,我们只需要读取到markdown的内容,之后呈现在页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{
  { .Title }}</title>
</head>
<body>
    {
  { .Content }}
</body>
</html>

测试

home.md里面写一些内容

# Home

## Single

好了现在所有的页面都可以使用single.html这个布局了

目录
相关文章
|
9天前
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
29 0
|
5月前
|
JSON 小程序 前端开发
五分钟上手Vant,快速搭建小程序界面样式
五分钟上手Vant,快速搭建小程序界面样式
115 0
|
9月前
Hugo教程#2布局
如何知道布局的模板是什么呢,其实hugo内置了一个功能,可以创建一个空白主题
77 0
|
9月前
|
前端开发
Hugo教程#4基础布局
前几期学习了布局,本期学习一下布局更多的用法,比如partial和block,其中partial可以吧每个布局引用,block可作为布局的扩展
79 0
|
数据可视化 C# 文件存储
VSTO | 零基础开发个人专属PPT导航插件教程
零基础开发个人专属PPT导航插件教程
611 0
|
前端开发 JavaScript
【推荐】10个既绚又实用的JQuery特效教程
导读:作者Aamir Baig在designersdare.com分享了一篇文章《10 Must See jQuery Latest Tutorials-Beginners and Advance Level》,文中对初学者和资深学者分别提供了不同级别的教程,使用JQuery做出的既炫丽又实用的效果,现将本文摘译,以下是文章内容: 此篇文章是JQuery高级教程,但对初学者学习JQuery也有一定的帮助。
958 0
|
JavaScript 定位技术 前端开发
leaflet教程
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82415601 leaflet简介 本教程使用leaflet进行基本的地图开发,功能介绍,代码演示。
2309 0