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这个布局了

目录
相关文章
|
8月前
|
前端开发 容器
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
59 2
SublimeText配置Markdown编辑及预览
本文详细介绍了如何配置Sublime Text及相关插件,使之成为Markdown编辑器并且能够在浏览器中实现预览功能。
|
JSON 小程序 前端开发
五分钟上手Vant,快速搭建小程序界面样式
五分钟上手Vant,快速搭建小程序界面样式
172 0
|
8月前
|
前端开发 UED C++
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
《HTML 简易速速上手小册》第5章:HTML 高级布局技巧(2024 最新版)
65 0
|
8月前
|
算法 Java
vscode插件webgl editor阅读,入门antlr
vscode插件webgl editor阅读,入门antlr
174 0
Hugo教程#2布局
如何知道布局的模板是什么呢,其实hugo内置了一个功能,可以创建一个空白主题
148 0
|
前端开发
Hugo教程#4基础布局
前几期学习了布局,本期学习一下布局更多的用法,比如partial和block,其中partial可以吧每个布局引用,block可作为布局的扩展
123 0
|
前端开发
Dreamweaver如何使用CSS?
Dreamweaver如何使用CSS?
273 0
|
编解码 移动开发 缓存
HTML5网页3D场景制作之Three.js初体验-制作3D字体
WebGL(图形库是一个JavaScript API)在任何连接的WebGL中渲染图形的API,Web3D和Web3D的图形应用程序,可以单独使用一个WebGL通过引入与OpenGL 2.0一致的浏览器来使用WebGL 2.0 WebGL完美地解决了现有的Web交互式三维动画的两个问题: 第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件的支持; 第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
625 1

相关实验场景

更多