从零开发一个hugo主题【已放弃】

#1 创建一个新主题

手欠，想自己写一个主题。主要是看到给出来的主题各种都差点意思的样子，改起来又这里那里对不上号。虽然说是零基础，但是最简单的 HTML 语言和简单的 CSS 我还是懂一些的。

第一步创建一个新主题

1. 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

2. 在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>

点击标题跳转后就有内容了。至此，核心功能都实现了，接下来就是添油加醋了。