Hugo 文章内链优化显示

好久好久之前(2年前),写过这功能:《Bitcron 文章内链自动优化显示》,如下效果:

Bitcron 文章内链自动优化显示

#折腾 
当我们在文章内引用了一个站内的链接,一般只是超级链接,其实,也可以为这个超级链接提供更好的表现方式。 这是看起来很简单,但确实一个超赞的想法,来自于 Jimmy。效果如下(中间部分,hello 为标题):

本文利用 Hugo 的 Shortcodes 功能和 .GetPage 函数来实现。

VS Code 初体验

Visual Studio Code 久仰大名,但一直误认为是个臃肿大部头,毕竟是微软出品。 🙇

一试,直接拉取仓库开启 Git 同步,成了,满足本地码字同步而不用碰终端,不用碰终端,碰终端!

二试,使用 gpm 插件更能多仓库管理,也成了,好感爆棚。没遇到什么权限问题,应该是之前终端里配置过的关系。

再试,GitHub 网页上更改,VS 里拉取变更,丝滑,这下舒心到随心咯!

404

Hugo 主题常用的代码片段

全站 Site

网址:.Site.BaseURL

标题:.Site.Title,示例:

<a href="{{ $.Site.BaseURL }}">{{ $.Site.Title }}</a>

副标题:.Site.Params.description

关键词:.Site.Params.keywords

头部菜单:

{{ range $.Site.Menus.main }}
	<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}

Hugo 添加面包屑导航

黑+白,疗效好

「不问明天,悠然浪费」,多少年前看到的一句话,一直作为博客的 Slogan ,如同“谶语”般的存在! 😷

说回正题,折腾流程如下:

添加 Google Fonts 思源宋体

谷婶大法好,在线字体都支持中文咯! 👍

访问 Google Fonts,点选需要的字体,简单设置能获得样式链接。虽听闻字体服务器国内也有节点,但还是启用 loli 的 CDN,感谢!

前端编辑 Hugo 文章

目前发文是直接在 Github 前端进行,Hugo 的构建交给 Github Actions 实现自动化部署。因此,产生个需求,文章里改个错别字什么的,能不能一键直达 GIthub 编辑页面?

# 当面页面链接
https://immmmm.com/hugo-themes/
# Github 编辑页面链接
https://github.com/lmm214/immmmm/edit/master/content/posts/coding/hugo-themes.md

Hugo 主题推荐

人工 Github 搜索 “Hugo theme” 按 stars 排序,挑出以下十款。

Hugo 图片懒加载

起因,想给文章插入的 img 图片添加 loading='lazy',果然有爱折腾的,看(这里),官方说明 #render-hook-templates,Hugo v0.62+

简单说能对md内的链接(link)和图像(image)自定义渲染,比如实现以上需求,只需在主题新建 layouts/_default/_markup/render-image.html

喜大普奔,市官宣 “全面恢复生产生活秩序” !自家小区已解禁,商场全部正常营业,餐饮也全部支持堂食。真是 “忽如一夜春风来,千树万树梨花开。”