要解释index.md与_index.md的区别，需要先弄清楚一个叫Page Bundle的名词。按Hugo官方的解释，Page Bundle就是一个“页面包裹”，把一个页面的内容和相关资源打包在一起，通俗的理解就是用一个目录来管理文章和图片等资源，把一篇文章和文章中的配图一起放在某个目录下，这个目录就是一个Page Bundle。 Page Bundle又分成了两大类，类比一棵树，一种叫叶子Page Budle，另外一种叫分支或树干Page Bundle。那怎么来区分一个Page Bundle到底是树叶，还是树干呢？ 这个时候就轮到index.md和_index.md出场了，如果一个目录下包含_index.md文件的就是树干，反之只包含了index.md的目录就是树叶。 content/ ├── leaf/ │ ├── index.md # 表明leaf目录是leaf bundle │ └── leaf.jpg └── branch/ ├── _index.md # 表明branch目录是branch bundle └── branch.jpg 我们都知道树叶是一颗树的最末端，即树叶上不可能再长树干了，同理，包含index.md的目录也不能包含子目录了；而树干是可以继续长出树干和叶子的，所以类比到包含_index.md的目录，它是可以继续嵌套其它目录和子目录的。 Hugo页面有个方法叫 .Resources，这个方法可以提取出页面相关的所有资源，包括图片、音视频等，它提取的资源就是从对应的Page Bundle中提取出来的。 以上就是index.md和_index.md的主要区别与作用。

对于一个后端程序员来说，Tailwind CSS无疑是构建前端UI页面的大杀器，其简洁的语法和所见即所得的实时预览效果极大的提高了前端页面的开发效率，让你用写HTML的方式书写CSS的核心思想简直如行云流水般丝滑。 如下便是用Tailwind CSS构建的一个简历模版，最终效果如下图： 更多手写Tailwind CSS模版可见 此处 ，后续会持续更新。

为了提高网站的响应速度，我们通常会在列表页或详情页显示缩略图，用户点击图片后再展示原图。这种设计即满足了网站的快速响应也满足了用户查看原图的需求，那么在Hugo中我们应该如何实现这样的功能呢？ 我们知道Markdow文档中的超链接语法格式为： [超文本](超文本url链接) 我们还知道Markdow文档中的图片语法格式为：  那我们就可以将这两个特性结合起来从而实现点击图片查看原图的功能，点击图片查看原图的两个核心点一个是点击，一个是原图，结合上面超文本和图片的语法我们直接在Markdown中这样写即可： [](原图url链接) 如果你没有在Hugo中启用缩略图功能，那上面的 缩略图片url链接 和 原图url链接 也可以是同一个url。 最终效果如下：

有一种非常简单的语法可以直接在Markdown文档中显示HTML或任意代码片段还自带高亮 ```HTML <div>Welcome to <strong>Gopher ❤️ Apple</strong></div> ``` 其中三个连续的反引号是固定的，开始反引号后面的HTML可以自定义（比如可以是Go、Swift、CSS等等），最终Hugo构建后渲染出来的效果如下所示： <div>Welcome to <strong>Gopher ❤️ Apple</strong></div>

有时候由于我们拼写错误或疏忽大意生成了错误的文章地址，但当时并没有发现，过了一段时间被Google等搜索引擎收录后才发现。或者就是想给之前的文章改个URL地址，但此时搜索引擎已经收录了错误的地址，那有什么办法是即不能让之前已经在网络上传播的链接无法访问又可以通过修改的新链接访问呢，这时候就该派 aliases 上场了。 换句话说 aliases 其实就类似Nginx或Apache中的URL重定向，会将某个URL的访问重定向到另外一个URL。 +++ title = '在不破坏已有SEO的基础上如何修改文章的URL地址' url = '/the-valid-url/' aliases = ['/the-invalid-url'] +++ 简单的通过 aliase 设置我们就可以同时访问这两个URL且不会破坏之前的SEO啦。