Hugo 的文件管理方案


绝大多数的静态网站生成工具,无论是从 Markdown 文件还是 rST 格式的文件,甚至其它格式的文件,基本原理就是:利用一种面向用户友好的文本格式,通过工具处理为 HTML 格式,例如用户使用 Markdown 撰写文章,Hugo 帮忙处理为 HTML 文件。而后拿到静态的 HTML 文件则抛给例如 Nginx 这种 Web 服务器去提供服务即可。

而处理的过程,则需要有按一定规则进行,例如标题与 URL 如何处理,文章日期如何处理,是否支持草稿,生成的网站页面列表如何排序,图片如何插入并显示等等。

这里我取“如何编写带图片的文章”这个需求来说明下我的使用方案。

其实如果仅仅只是文字内容,一篇文章一个 Markdown 文件,Hugo 以及大多数其它工具都会利用文件名来生成一个文件夹,而后此文件夹下面则会放入一个 index.html 文件。

这是为啥呢,因为类似 Nginx 这种 Web 服务器,它的基本逻辑就是去某个文件夹下寻找 index.html 文件,而如果同时你又有提供文件名称,它则会去寻找对应的文件名。

如果自己启动一个 Nginx 服务的话,有时候你会需要用到下面这段代码:

try_files  $uri $uri.html $uri/index.html index.html;

所以这里其实可以看到,$uri 这个东西,要么指一个文件,要么指一个文件夹。

如果你页面上有插入图片或者其他资源文件,那么你要么可以指定完整的文件路径地址,要么,就可以直接放到某个文件夹下面,与 index.html 平级,这样 index.html 引入的文件都可以是相对于当前页面所在文件夹的路径即可。

这就是服务器方面的逻辑。

下面是本地编写时候的逻辑。

我使用的 Markdown 编辑器是 Typora,虽然它 bug 不断,修了一个又有另一个,但目前并没有其它任何一个编辑器能让我放弃它。

它的实时编辑并渲染的功能,打出来任何一二三级标题和列表与段落,立马就显示为漂亮的效果,这才是一个内容编辑器应有的优秀视觉效果。

而如果我插入一张图片,它则会立即渲染显示,我能立即看到效果。它插入图片所生成的 Markdown 内容一般会是这样的:

![IMG_6004](IMG_6004-4755009.jpg)

这足够简单了,有插入菜单可以操作,如果你知道文件名,也可以自己写成这样,它就能渲染给你看。

但是,有个问题。

如果你的图片是放在某一个地方的,比如全部都在一个 static/img 文件夹下面,那这就有个问题。可能对与 Hugo 这样的工具最终渲染完成的网页是能显示图片的,但是你本地的编辑器,却不一定能显示出来,因为它没有能力去更高级文件夹去寻找文件,相对的它只能去自己的的子级文件夹去寻找文件。

我曾经也是这么整理文件的,图片的归图片,文章的归文章,如果文件与图片不够多,是没有问题的,然而一旦文章和图片多了起来,需要考虑的问题就有了:图片是否最终到网站是能正常显示的(路径对不对),图片名称是否要改一改(万一文件名冲突就乱了)等等问题。

所以现在呢,我所使用的方案就是:

如果是要插入图片的,就建一个以文章名称命名的文件夹,里面放一个 index.md 文件,图片等文件就也放当前文章这个文件夹里面即可。

这样,既能保证本地编辑是能实时渲染,也能保证最终呈现是正确无误的,而工作环境仅需要考虑当前文件夹,不用翻来覆去地寻找和核对。

而如果是不需要插入图片的文章,依然还是一个以文章名称命名的 .md 文件即可。

如果需要转移文章到新的目录,或者是寻找一个图片,都无需担心太多,直接操作,以文件夹为管理核心即可。

这便是我的内容资源管理方案,很不错了。

废话这么多,还是不如放一个文件夹路径图来的有视觉感:

.
├── about
│   ├── img
│   │   ├── Jeremy.jpg
│   │   └── qrcode_for_jeremyyincom_1280.jpg
│   └── index.html
├── post
│   ├── 2018-01-11-关联了两款小程序.md
│   ├── 2018-02-05-一款小小的物流数据产品.md
│   ├── 2018-03-19-现已加入 Algolia 搜索服务.md
│   ├── 2018-04-13-我是如何搞砸了本站搜索服务的.md
│   ├── 2018-04-18-小站构建工具已成功切换到 Hugo.md
│   ├── 2018-04-19-开始翻译一个文档:Saleor.md
│   ├── 2018-04-22-Saleor 初稿已翻译完成.md
│   ├── 2018-04-26-今天全是干货
│   │   ├── IMG_5991-4755089.jpg
│   │   ├── IMG_5997-4755064.jpg
│   │   ├── IMG_5998-4755103.jpg
│   │   ├── IMG_5999-4755051.jpg
│   │   ├── IMG_6001-4755073.jpg
│   │   ├── IMG_6002-4755080.jpg
│   │   ├── IMG_6003-4755030.jpg
│   │   ├── IMG_6004-4755009.jpg
│   │   └── index.md
│   ├── 2018-05-02-从 Jekyll 到 Hugo 的一些细节.md
│   └── 2018-05-03-Hugo 的文件管理方案.md
├── python
│   ├── 2016-06-28-给一个列表去重复却又要保留顺序.md
│   ├── 2016-12-23-if True or if not True.md
│   ├── 2017-06-14-造个轮子.md
│   ├── 2017-09-02-努力投身 Python 3 的怀抱.md
│   └── 2018-04-27-给一个列表去除重复数据的最原始方法.md
└── saleor
    ├── architecture
    │   ├── 20_money.md
    │   ├── 21_products
    │   ├── 22_thumbnails.md
    │   ├── 23_stock.md