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

目录
相关文章
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1299 0
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
移动开发 前端开发 JavaScript
入坑吗?说说几个富文本编辑器
入坑吗?说说几个富文本编辑器
65 1
|
9月前
|
搜索推荐
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
114 0
Hugo教程#2布局
如何知道布局的模板是什么呢,其实hugo内置了一个功能,可以创建一个空白主题
164 0
|
前端开发
Hugo教程#4基础布局
前几期学习了布局,本期学习一下布局更多的用法,比如partial和block,其中partial可以吧每个布局引用,block可作为布局的扩展
135 0
|
数据可视化
Markdown编辑器与富文本编辑器的区别
首先,要搞清楚一点,markdown 编辑器与传统的富文本编辑器实际上一点区别都没有!只是可能由于某些原因放到了一个概念,那么是一个什么概念呢?
311 0
|
索引
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程26:构建一个Banner图片轮播(下)
763 0
SwiftUI极简教程26:构建一个Banner图片轮播(下)
|
索引
SwiftUI极简教程25:构建一个Banner图片轮播(中)
SwiftUI极简教程25:构建一个Banner图片轮播(中)
443 0
SwiftUI极简教程25:构建一个Banner图片轮播(中)

热门文章

最新文章

相关实验场景

更多