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

目录
相关文章
|
6月前
|
前端开发 JavaScript 算法
《CSS 简易速速上手小册》第10章:未来的 CSS(2024 最新版)
《CSS 简易速速上手小册》第10章:未来的 CSS(2024 最新版)
80 1
|
6月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
|
机器学习/深度学习 uml
Markdown编辑器
Markdown编辑器
109 0
|
6月前
|
编解码 移动开发 前端开发
《CSS 简易速速上手小册》第3章:CSS 响应式设计(2024 最新版)
《CSS 简易速速上手小册》第3章:CSS 响应式设计(2024 最新版)
55 1
|
6月前
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
230 0
|
6月前
|
前端开发 容器
《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)
《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)
53 0
|
6月前
|
前端开发 搜索推荐 容器
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
56 0
|
移动开发 前端开发 JavaScript
入坑吗?说说几个富文本编辑器
入坑吗?说说几个富文本编辑器
50 1
|
6月前
|
搜索推荐
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
92 0

相关实验场景

更多