Hugo 网站优化(1): 渲染 Markdown 图片引用地址

简介: 搭建一个自己的博客系统, 优化图片展示, 让书写更简单

Hugo 网站优化(1): 渲染 Markdown 图片引用地址

大家好, 我是老麦。 最近有空, 把我的网站优化了一下。 加上 CDN 之后, 国内访问嗖嗖嗖的。

https://tangx.in

作为一个技术人员, 使用 Markdown 写文章确实很方便。

引用图片通常有如下三种

# 1. 相对路径
![](image.png)   # 本文不讨论
![](./image.png)

# 2. 工程目录绝对路径
![](/static/logo/image.png) 

# 3. 外部引用
![](http://example.com/logo/image.png) 

但如果通过 hugo, jekyll 等引擎编译后,

相对路径: 由于 my-post.md 文件被编译成 my-post/index.html。 最终网站静态目录如下

.
├── image.png
└── my-post
    └── index.html

工程目录绝对路径/static 是一个关键字, 其子文件在编译后, 才存在于 一级 目录

## 编译前
.
└── static
    └── logo
        └── avatar.png

## 编译后
public  # 网站目录
└── logo # 一级目录
    └── avatar.png
1. 相对路径2. 工程目录绝对路径 通常会出现渲染后的路径错误。

优化渲染 Markdown 图片引用地址

一切为了保证 原始文件 markdown 本身展示图片可用。

决定在渲染模版中,做一些逻辑判断操作。

Hugo 配置如下

config.toml 中新增如下两个配置文件

# 去除工程目录 prefix 文件路径
[params.static_prefix]
    name = "/static"

# 外部 CDN 加速图片, 将图片地址替换成外部前缀
[params.image_cdn]
    enable = false 
    host = "https://cdn.example.com
    # host = "https://cdn.jsdelivr.net/gh/user/user.github.io"

render-image.html 文件优化如下

渲染逻辑如下。

  1. 通过 .Destination 拿到图片在 markdown 中的地址, 并保存在变量 $img_dest
  2. 判断 static_prefix 参数是否设置。

    1. : 去除 $img_dest 中的 prefix
  3. 相对路径 修改为 绝对路径

    1. 这里以 ./ 作为相对路径的 关键字 进行判断。
    2. 因此优化操作不能识别 image.png../image.png 这两种形式。 需要要求个人书写习惯。
  4. 判断 image_cdn 是否设置。

    1. : 在 绝对路径 前添加 外部 CDN 地址
<!-- 1. 变量赋值 -->
<!-- 1.1. 默认情况, 获取图片的定义地址 -->
<!-- ./image.png -->
<!-- /static/img/image.png -->
<!-- http://example.com/path/to/image.png -->
{{- $img_dest := .Destination -}}

<!-- 1.2. 网站 BaseURL 与 文件相对路径 -->
{{- $site_url := .Page.Site.BaseURL -}}
{{- $rel_url := $site_url | relURL}}

<!-- 2. 去除 prefix, 并添加 **没有域名的 BaseURL ** -->
{{ if and (isset .Page.Site.Params "static_prefix") }}
{{ $prefix := .Page.Site.Params.static_prefix.name }}
<!-- img_dest = /prefix/static/image.png -->
{{ if (hasPrefix $img_dest $prefix )}}
<!-- img_dest = /static/image.png -->
{{ $img_dest = (strings.TrimPrefix $prefix $img_dest ) }}
<!-- img_dest = /path/to/static/image.png -->
{{ $img_dest = (print (path.Join $rel_url $img_dest))}}
{{ end }}
{{ end }}

<!-- 3. 计算文件绝对路径 -->
<!-- dest = ./image.png -->
{{ if (hasPrefix $img_dest "./") }}
<!-- img_dest = .././image.png -->
{{ $img_dest = (print "../" (path.Join $img_dest)) }}
<!-- img_dest = /posts/<year>/<month>/<date>/<post_name>/.././image.png -->
{{ $img_dest = (print (path.Join .Page.RelPermalink $img_dest))}}
{{ end }}


<!-- 4.  开启 CDN -->
<!-- 是否开启 CDN 选项 -->
{{- if (and .Page.Site.Params.image_cdn.enable (not .Page.Site.IsServer)) -}}
<!-- 文件不以 http 开头 -->
{{ if not (hasPrefix $img_dest "http") }}
<!-- image_cdn + /path/to/image.png -->
{{ $img_dest = (print .Page.Site.Params.image_cdn.host (path.Join $img_dest)) }}
{{ end }}
{{- end -}}
<!-- CDN END -->


<img 
    src="{{ $img_dest | safeURL }}" 
    alt="{{ .Text }}" 
    {{ with .Title }} 
        title="{{ . }}" 
    {{ end }} 
/>
{{- /* Drop trailing newlines */ -}}

被玩崩了的 jsdelivr CDN

jsdelivr CDN 已经被玩坏了。

对于 github 个人用户的资源加速已经, 目前只能在国外有效。 国内 IP 访问, 将被重定向到 github raw 页面, 然而这个地址被墙了, 无法访问。

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
208 2
|
9月前
|
前端开发
【前端】从markdown格式文本中提取图片链接
【前端】从markdown格式文本中提取图片链接
106 0
|
前端开发
掘金Markdown编辑器中的图片怎么居中?
掘金Markdown编辑器中的图片怎么居中?
446 0
|
小程序 前端开发
微信小程序_自定义markdown的图片点击放大处理
微信小程序_自定义markdown的图片点击放大处理
342 0
|
Python Windows
工具:语雀导出MarkDown文档后图片修复
工具:语雀导出MarkDown文档后图片修复
445 0
markdown插入图片、音频视频
markdown插入图片、音频视频
253 0
markdown插入图片、音频视频
Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐
Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐
942 0
Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐
|
存储 SQL 关系型数据库
Python玩转阿里云OSS对象存储,批量转存markdown和html图片
Python玩转阿里云OSS对象存储,批量转存markdown和html图片
一些技术社区关于博客内图片 markdown 源代码的字数统计
一些技术社区关于博客内图片 markdown 源代码的字数统计
121 0
一些技术社区关于博客内图片 markdown 源代码的字数统计
LayUI 一MarkDown编辑器一简单渲染
LayUI 一MarkDown编辑器一简单渲染
374 0