замените точку маркера в <li>изображением, указанным в соответствующем сообщении - PullRequest
Новая
       35

замените точку маркера в <li>изображением, указанным в соответствующем сообщении

1 голос
/ 22 мая 2019

У меня есть элемент списка html, который отображает посты в виде списка. 

<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>

Посты блога написаны в уценке (хорошо Rmarkdown), и я указываю исходное изображение, которое должно появиться в списке. 

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

Мне удалось получить изображение вместе с заголовком поста с добавлением тега в список. 

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

Это не идеально, так как есть точка с маркером, затем название, дата и изображение. Я хотел бы, чтобы изображение заменило точку маркера.

Я читал об использовании CSS для этого, но в примерах всегда используется абсолютный путь к одному изображению, например 

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

Есть ли способ сослаться на изображение из Param.thumbnail внутри файла уценки?

Это не сработало: 

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

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

3 голосов
/ 22 мая 2019

Чтобы ваша таблица стилей CSS использовала уценку, вам нужно включить ее в шаблоны 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

Каталог partials / - это место для размещения фрагментов HTML для повторного использования другими шаблонами с помощью функции part. У нас есть четыре частичных шаблона в этом каталоге:

header.html main определяет тег <head> и меню навигации в теге <nav>.

если вы прочитаете дальше, вы увидите, что {{ partial "head_custom.html" . }} - это файл (head_custom.html), в который вы можете вставить 

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
0 голосов
/ 22 мая 2019

Вместо использования 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;
}

Надеюсь, это поможет.

...