#1 创建一个新主题
手欠,想自己写一个主题。主要是看到给出来的主题各种都差点意思的样子,改起来又这里那里对不上号。虽然说是零基础,但是最简单的 HTML 语言和简单的 CSS 我还是懂一些的。
第一步创建一个新主题
hugo new theme <主题名>
在主题文件夹下,会自动生成一些默认文件。这些文件几乎都是空的,后续写主题就在这里面写。
theme
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html //404页面
│ ├── _default
│ │ ├── baseof.html //所有页面的模版,所以这个最重要
│ │ ├── list.html //应该是侧边栏那些模版
│ │ └── single.html //文章页面或者单独页面的模版
│ ├── index.html //主页模版
│ └── partials //页面可以被拆分成好多个部分,这里用来放每个部分
│ ├── footer.html
│ ├── header.html
│ └── head.html
├── LICENSE
├── static
│ ├── css
│ └── js
└── theme.toml
- 在
config.toml中把 theme 名改为新创建的主题。这样就hugo server就会加载新主题了。
#2 遍历页面
大概的语法还在摸索,但是博客的底层逻辑就是每个 markdown 文件都会被转成一个页面,遍历所有的页面来呈现博客。这里我是在index.html里面加入了:
{{ with .Site.GetPage "/post" }} {{ range .Pages }}
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
{{ end }} {{ end }}
这里的语法是用with 将当前目录改为/post ,接着使用range来遍历.Pages,.Permalink是路径,.Title是标题。
至此,最基本的博客主页就已经有了。
#3 构造文章页面
前面已经实现了遍历所有的文章索引,点击链接就会跳转到对应的页面。但此时layouts/__default/single.html是空的,所以点击后会显示**Page Not Found**。
在single.html中写入
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
{{ .Content }}
</body>
</html>
点击标题跳转后就有内容了。至此,核心功能都实现了,接下来就是添油加醋了。