无法部分返回从标题生成的图像 - Hugo

编程问答 2022-06-01

问题描述

基于 this blogpost，我尝试为每个新帖子生成一个伪随机缩略图。首先，在我的数据文件夹中，我有一个 bg.json，其中包含有关颜色和 SVG 的信息，如下所示：

{
  "colours": [
    "#dfe6e9","#00b894"
  ],"patterns": [
    "data:image/svg+xml..."
  ]
}

接下来，在 partials 文件夹中，我创建了一个名为 thumbnail.html 的新部分，其中包含以下代码：

{{ $hash := split (md5 .Title) "" }}
        {{ $totalColours := len .Site.Data.bg.colours }}

        {{ $primaryIndex := index $hash 1 }}
        {{ $basedPrimaryIndex := printf "%x" $primaryIndex }}
        {{ $modIndex := mod $basedPrimaryIndex $totalColours }}
        {{ $primary := index .Site.Data.bg.colours $modIndex }}

        
        {{ $secondaryIndex := index $hash 2 }}
        {{ $basedSecondaryIndex := printf "%x" $secondaryIndex }}
        {{ $modIndex := mod $basedSecondaryIndex $totalColours }}
        {{ $secondary := index .Site.Data.bg.colours $modIndex }}


        {{ $bgIndex := mod (printf "%x" (index $hash 0)) (len .Site.Data.bg.patterns) }}
        {{ $bg := replace (replace (replace (replace (index .Site.Data.bg.patterns $bgIndex) "%3C" "<") "%3E" ">") "%23" "" | safeHTML) "data:image/svg+xml," "" }}
        {{ $colouredBg := replace $bg "9C92AC" $secondary }}
        <style>
            .post__header {
                --color: {{ $primary }};
                --bg: url("data:image/svg+xml;charset=utf-8;base64,{{ base64Encode $colouredBg }}");
            }
        </style>

我的主题在另一个名为 portfolio.html 的部分中生成作品集卡片。我查看了文件并用我的部分路径替换了原来的 img src，如下所示：

 <div class="box-masonry">
                      {{ if and (isset .Params "image") .Params.image }}
                        {{ if eq .Params.showonlyimage true }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
                        {{ else }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
                        {{ end }}
                            <img src="{{ partial "thumbnail.html" . }}" alt="" class="img-responsive">
                        </a>
     (...)

但是，当我运行我的 Hugo 服务器时，我没有看到任何图像。我认为这将是处理事情的最简洁方式，但我认为帖子标题（经过哈希处理以选择随机调色板/模式）没有被传递。我该如何解决这个问题？

enter image description here

我的存储库托管在这里：https://github.com/thedivtagguy/archives

原始博文代码的存储库托管在此处：https://github.com/trys/random-to-a-point

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlhugo