当前分类 / Hugo / 总共7篇

Hugo 配置文章内容标题索引导航

前提条件

在 Hugo 0.60.0 后我们可以方便的实现文章内标题索引了,因为从这个版本开始引入了 Goldmark MarkDown 生成引擎,基于该引擎在此版本引入了 TableOfContents 配置。

因此,你在尝试此文章的后续内容的前提是确保你的 Hugo 版本是 0.60.0 以上,查看版本命令如下:

1
2
$ hugo version
Hugo Static Site Generator v0.70.0-7F47B99E windows/amd64 BuildDate: 2020-05-06T11:17:50Z

如果你的 Hugo 版本过低,建议先升级版本。

配置文件

1
2
3
4
5
[markup]
    [markup.tableOfContents] #文章导航设置
        endLevel = 3      #3级标题以后不建立索引
        ordered = false   #是否采用有序列表
        startLevel = 2    #2级标题开始建立索引

在你的配置文件中加入上面配置,这里需要注意的是你的配置文件可能不是 toml 格式的,有可能是 yaml 格式或者 json 格式。

阅读更多

Hugo 实现复制剪贴板添加@版权信息

大致介绍

我们经常会在简书、CSDN 等这些博客平台看到复制别人的文章内容在粘贴的时候出现几行版权信息,大致内容如下:

1
2
3
4
5
6
7
8
上面查询,我的版本是 v0.70.0 如果你的版本低于 v0.65.0 则不支持我们今天要设置的代码高亮,请先升级版本。

Hugo 在 v0.65.0 版本之后使用了 Chroma 代码高亮插件,它是一个 Go 语言实现的非常漂亮并能快速生成的代码高亮工具。
---------------------
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:水寒 源地址:https://dp2px.com/2020/05/29/hugo-highlighting/
来源:DP2PX.COM © 水寒版权声明:本文为水寒原创文章,转载请附上博文链接!

今天我们在 Hugo 博客中实现这种剪贴板,并做到如下三点:

  1. 可以过滤指定文章,也就是说部分文章不自动添加版权信息。
  2. 根据复制的字数过滤,低于一定字数不自动添加版权信息。
  3. 自动链接到原始文章路径。

阅读更多

设置 Hugo 的代码高亮

前提条件

首先我们要保证 Hugo 的版本是高于 v0.65.0 的,查询方法如下:

1
2
$ hugo version
Hugo Static Site Generator v0.70.0-7F47B99E windows/amd64 BuildDate: 2020-05-06T11:17:50Z

上面查询,我的版本是 v0.70.0 如果你的版本低于 v0.65.0 则不支持我们今天要设置的代码高亮,请先升级版本。

Hugov0.65.0 版本之后使用了 Chroma 代码高亮插件,它是一个 Go 语言实现的非常漂亮并能快速生成的代码高亮工具。

阅读更多

想继续使用Valine或LeanClound存储的快绑定域名

在开始前先做一个简单科普,很多朋友在使用评论功能的时候可能留意到了 Valine 这个插件,它是一个很好用的评论插件,但是可能有一部分人并不知道这个插件实现评论的原理,其实它的评论存储服务是依赖于 LeanClound 的,这个 LeanClound 实际上是一个云服务器提供商,只不过它比较人道的是提供了一个开发版环境(虽然资源很小,云引擎只有 0.5CPU 256MB,但是数据库却是够用的),我们实际上是使用了它提供的数据存储服务,而且 LeanClound 为我们提供了一套 JavaScript SDK 来操作数据库,也就是我们要引入的一个 js 文件:

1
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js"></script>

实际上 Valine 就是基于这套 api 来实现数据的插入和查询,然后展现到我们的博客,这样我们就很透彻的理解了它们之间的关系了,接下来进入我们今天的正题。

阅读更多

使用 Hugo + Algolia 进行静态站点搜索「译」

本文翻译自:Static site search with Hugo + Algolia 原作者:Chris Macrae

我们将介绍如何使用搜索服务提供商 Algolia 为你的 Hugo 网站设置快如闪电的搜索服务,Algolia 自称它们是 “建立搜索业务的最可靠平台”,我们将使用 Hugo 的自定义输出格式为我们的静态站点生成 JSON 搜索索引。然后我们将在 Algolia 上进行必要的配置,并使用 npmatomic-algolia 将新索引发送给 Algolia。最后使用 Serverless 简化更新搜索索引。

为什么选择 Algolia

有很多静态网站的搜索解决方案。您可以使用前端 Javascript 和 Lunr.jsFuse.js 等工具滚动自己的搜索,使用 ElasticSearchAmazon CloudSearch 建立强大的开源搜索技术,或者像 Algolia 这样的 SaaS 解决方案。所以问题是,是什么让 Algolia 如此出色?答案归结为两个因素:

阅读更多

Hugo 配置文件详解

一般在我们的 Hugo 中的主题目录下(themes\icarus\)会有一个 theme.toml 或者 config.yamltheme.json 配置文件,但是我却喜欢在工程根目录下配置 config.toml 文件,这个文件的配置会对整个工程有效。这个配置文件是一个整站的配置。它给 Hugo 提供了如何构建站点的方式,比如全局的参数和菜单。接下来我们就对 config.toml 文件配置进行详解。

baseurl:配置你的服务器域名地址

1
baseurl = "https://dp2px.com/"

theme:这个配置很关键,如果你的 themes 目录下有多个主题,这里配置你要使用的主题

1
theme = "MyIcarus"

languageCode:ISO 639-1语言代码, 你的语言环境, 例如中:zh-cn

1
languageCode = "zh-cn"

title:你的网站标题(这个变量可以在页面模板中使用)

1
title = "DP2PX.COM"

阅读更多

我为什么要从 Hexo 更换到 Hugo

前言

最近比较烦的是我的博客本以为很完美了,不用再折腾了,没想到 Hexo 有一个很大的弊端。我忍痛割爱的计划将 Hexo 引擎更换为基于 Go 语言的 Hugo 模板引擎。Hexo 优点很多,缺点就是生成静态文件 (hexo g) 速度真的是太慢了。Hexo 是基于 Nodejs 的,有很多插件,而 Hugo 没有插件,使用自带的 Go html 模板实现, 这个速度真的是牛,基本上在 Hexo 上面十几分钟,使用 Hugo 只需要几秒钟。

在更换过程中我想保留我原来博客的主题风格,所以很多东西都是逐渐仿照实现过去的,但是最让人头疼的并不是去实现这些功能,而是迁移过程中为了防止路径不同(大小写)和 keywords description 的不同导致的 SEO 问题。 其实目前我已经完全实现模板复制,但是我还是计划花一两个月慢慢迁移过去,这样对本站的影响可以尽量做到最小。

阅读更多