2022-07-13  2022-07-13    1589 字   4 分钟

路径修改

默认转换路径

Hugo 静态站点生成器不支持文件的相对链接。相反,它希望您使用[ 和短代码]链接到其他页面。ref``relref

因此,使用黑曜石导出从黑曜石导出的笔记无法开箱即用,因为 Hugo 无法正确解析这些链接。

Markdown 渲染钩子(仅使用默认渲染器支持)允许您解决此问题,但是,在进行一些一次性设置工作后,使导出的笔记与 Hugo 一起使用。goldmark

创建包含以下内容的文件:

对于文件:layouts/_default/_markup/render-link.html

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}

<a href="
    {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
    {{- else -}}
      {{- .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}>
  {{- .Text | safeHTML -}}
</a>

{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

对于图像:layouts/_default/_markup/render-image.html

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}

<img src="
  {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
    {{- else -}}
      {{- printf "/%s%s" .Page.File.Dir .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}
  {{- with .Text }} alt="{{ . | safeHTML }}"
  {{- end -}}
/>

{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

有了这些钩子,指向笔记和文件附件的链接现在应该可以正常工作。 注意:如果您使用的是带有自己的渲染钩子的主题,则可能需要做一些额外的工作,或自定义上面的片段,以避免与主题中的钩子发生冲突。

修改后的路径

由于Windows 获取到的路径\是这样的,而url是/这样的,所以上面的方式不起作用。 参考hugopath.Dir | Hugo (gohugo.io)官方文档, 做出修改,获得以下内容

对于文件

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}
{{- $str := .Page.File.Dir -}}
{{- $path := path.Dir $str -}}

<a href="
  {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
    {{- else -}}
      {{- printf "/%s/%s" $path .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}>
  {{- .Text | safeHTML -}}
</a>

{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

对于图像

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}
{{- $str := .Page.File.Dir -}}
{{- $path := path.Dir $str -}}

<img src="
  {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
    {{- else -}}
      {{- printf "/%s/%s" $path .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}
  {{- with .Text }} alt="{{ . | safeHTML }}"
  {{- end -}}
/>

{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

懒加载策略

参考主题hugo-theme-stack 中的懒加载策略

对于文件:layouts/_default/_markup/render-link.html

<a class="link" href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
    {{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"
    {{ end }}>{{ .Text | safeHTML }}</a>

对于图像:layouts/_default/_markup/render-image.html

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}

{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}

{{- if $image -}}
    {{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
    {{- $Permalink = $image.RelPermalink -}}
    
    {{- if $notSVG -}}
        {{- $Width = $image.Width -}}
        {{- $Height = $image.Height -}}
        {{- $galleryImage = true -}}
        
        {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
            {{- $small := $image.Resize `480x` -}}
            {{- $big := $image.Resize `1024x` -}}
            {{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

<img src="{{ $Permalink }}"
    {{ with $Width }}width="{{ . }}"{{ end }}
    {{ with $Height }}height="{{ . }}"{{ end }}
    {{ with $Srcset }}srcset="{{ . }}"{{ end }}
    loading="lazy"
    {{ with $alt }}
        alt="{{ . }}"
    {{ end }}
    {{ if $galleryImage }}
        class="gallery-image"
        data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
        data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
    {{ end }}
>

最终得到懒加载和路径修改后的

对于文件:layouts/_default/_markup/render-link.html

{{- $str := .Page.File.Dir -}}
{{- $path := path.Dir $str -}}
<a class="link" href="{{ printf "/%s/%s" $path .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
    {{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"
    {{ end }}>{{ .Text | safeHTML }}</a>

对于图像:layouts/_default/_markup/render-image.html

{{- $str := .Page.File.Dir -}}
{{- $path := path.Dir $str -}}
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := printf "/%s/%s" $path .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}


{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}

{{- if $image -}}
    {{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
    {{- $Permalink = $image.RelPermalink -}}
    
    {{- if $notSVG -}}
        {{- $Width = $image.Width -}}
        {{- $Height = $image.Height -}}
        {{- $galleryImage = true -}}
        
        {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
            {{- $small := $image.Resize `480x` -}}
            {{- $big := $image.Resize `1024x` -}}
            {{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

<img src="{{ $Permalink }}"
    {{ with $Width }}width="{{ . }}"{{ end }}
    {{ with $Height }}height="{{ . }}"{{ end }}
    {{ with $Srcset }}srcset="{{ . }}"{{ end }}
    loading="lazy"
    {{ with $alt }}
        alt="{{ . }}"
    {{ end }}
    {{ if $galleryImage }}
        class="gallery-image"
        data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
        data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
    {{ end }}
>

文件


avatar
青山
悟已往之不谏 知来者之可追
一言
今日诗词
站点信息
本站访客数 :
本站总访问量 :