将项目符号替换为<li>相应帖子中指定的图像

我有一个HTML列表元素，该元素将Blogpost作为列表。

<ul class="posts">
{{ range .Data.Pages -}}
  <li>
    <span class="postlist_container">
      <a href="{{ .Permalink }}">{{ .Title }}</a> 
    <time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> </span>
  </li>
{{- end }}
</ul>

Blogposts写在Markdown(Well rmarkDown(中，我指定了应显示在列表中的源图像。

---
thumbnail: "/post/source/image_tn.jpg"
---

我设法将图像与帖子的标题一起呈现，并在列表中添加标签。

<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">

这不是理想的选择，因为有一个子弹点，然后是标题，日期和图像。我想要的是图像替换了子弹点。

我已经阅读了有关使用CSS的有关此图像的绝对路径，例如

.posts {
  list-style-image: url("source/image.jpeg");
}

是否有一种方法可以从param.thumbnail中引用Markdown文件中的图像？

这不起作用：

.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}

任何帮助将不胜感激。

要使您的CSS样式表使用Markdown，您需要将其包含在HTML模板中。

插入曾经在模板中您要飞行更新的规则(最好是在<head>中插入，但是其他任何地方都可以正常工作

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

而不是

<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">

最好的是阅读Blogdown的模板教程

https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example
部分/目录是将其他模板通过部分函数重复使用的HTML片段的地方。我们在此目录下有四个部分模板：
header.html main定义<head>标签和<nav>标签中的导航菜单。

如果您进一步阅读，则可以看到{{ partial "head_custom.html" . }}是文件(head_custom.html(，您可以在其中插入

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

而不是使用list-style-image，为什么不使用伪元素之一？喜欢！

li{
  position: relative;
  padding-left: 5px;
}
li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}") no-repeat center center;
}

希望这会有所帮助。

相关内容

最新更新

热门标签：