site logo

Keep doing what you want, never give up.

文章配图

Hugo目录中的index.md与_index.md有什么区别?

要解释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的主要区别与作用。
文章配图

Hugo静态站点部署最佳实践之稀疏检出public静态目录

一个完整的Hugo静态站点目录往往都包含了各种各样的目录,如content内容目录、themes主题目录等等,既然是静态站点,那我们部署最终的代码时最好只将Hugo生成的静态内容部署到生产服务器,也就是public目录。 假设我们本地的Blog目录结构如下所示: /Blog /archetypes /assets /content /Go /Swift /HTML /data /layouts /public /static /themes /GopherLoveApple 我们一般会将Blog目录下的所有内容一并提交到同一个git仓库以防内容丢失或备份,这种情况下我们就可以利用git的稀疏检出(sparse checkout)功能来实现只检出public目录,从而达到只将public目录下的内容部署到线上服务器。 操作也比较简单,具体git命令如下: mkdir www.example.com cd www.example.com git init #在www.example.com空目录下先初始化一个git仓库 git remote add origin <[email protected]:用户名/仓库url地址.git> #添加远程仓库地址 git config core.sparseCheckout true #开启稀疏检出 echo "public" >> .git/info/sparse-checkout #配置要检出仓库下哪个子目录 git pull origin master 经过上面的配置后当你使用git pull origin master命令拉取代码时就只会拉取public目录下的内容了。
文章配图

利用Markdown语法给Hugo站点添加点击图片查看原图功能

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

Hugo自定义404页面

要在Hugo主题中添加自定义404页面非常简单,只需要在主题目录中添加一个404的html模版即可: {{ theme }}/layouts/404.html {{ define "main" }} <main> <br><br> <h1>We couldn't find this Page!</h1> <p> Please try our search page to look for it or go back to the <a href="/">home page</a>. </p> </main> {{ end }} 可以查看本站点的404页面示例 https://www.gopherloveapple.com/404
文章配图

在文章中添加HTML代码片段

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

给文章添加字数统计和大致的阅读时间

给博客文章添加字数统计和阅读时长可以大致告诉你的读者这篇文章有多长。这在Hugo模版中很容易就可以实现。 添加文章字数统计 让我们在文章详情页添加字数统计 {{ .WordCount }} 字 输出类似:108 字 添加文章阅读时间 同样可以使用Hugo内置函数完成 {{ .ReadingTime }} 分钟 输出类似:5 分钟
文章配图

在不破坏已有SEO的基础上如何修改文章的URL地址

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

在Hugo Theme中使用页面级Parameters参数

在Hugo Template模版中我们可以直接访问在md文件中定义的Params参数,这些参数是通过在每个md文件头部的叫做front matter元数据的位置定义的。 这里举例说明使用方法,假定有一个叫example.md的Markdown文件,内容如下: +++ title: "My First Post" date: 2024-04-29 meta_image: "/images/20240429001/hugo.png" +++ 然后我们就可以直接通过 {{ .Params.meta_image }} 这样的方式来引用这张图片,这句代码在实际构建时会被替换成 /images/20240429001/hugo.png 在模版中显示图片: <img src="{{ .Params.meta_image }}" />