Используя Jekyll, как преобразовать каждый элемент списка в index.md в пользовательский тег ‹div› в сгенерированном html-файле?

Я создаю очень простой одностраничный сайт Jekyll. Все, что он делает, это отображает список в файле index.md, в который можно добавлять или удалять элементы, как предопределенные теги <div> в файле html, который в конечном итоге генерируется.

Я очень новичок в использовании Jekyll и не могу понять, любой поиск в Google приводит меня к циклам коллекции и for, которые до сих пор не всегда помогали.

Пример index.md содержания:

## TITLE

- Element A
  * Subelement A
- Element B
  * Subelement B
- Element C
- Element D
  * Subelement D1
  * Subelement D2

Все, что у меня есть в default.html, это -

<html>
    <body>
        <h1>{{ page.title }}</h1>
        {{ content }}
    </body>
</html>

Но допустим, идея состоит в том, чтобы отображать элементы в списке как что-то вроде this (для простоты предположим, что у нас есть только один столбец вместо трех).

Не обязательно искать запеченный ответ, но любой намек и (или) ресурс по этому вопросу очень помогут.

EDIT 1:
Моя структура папок выглядит следующим образом, которую я хотел бы сохранить:

# Directory structure
.
|__ _layouts
|   |__ default.html
|__ assets
|__ _config.yml
|__ index.md

Мой config.yml пуст.

Единственное, что я буду редактировать, это файл index.md, в который я добавлю больше элементов списка. Это просто нужно отобразить в собственном теге <div> в файле index.html.

РЕДАКТИРОВАТЬ 2:
Оказывается, я хочу, чтобы Джекил был эквивалентом shortcodes Хьюго. Предварительные исследования говорят мне, что я должен изучить Джекила includes и tags.
Я думаю, что, возможно, смогу упростить свой вопрос таким образом - Как преобразовать каждый элемент списка уценки в настраиваемый тег <div> с помощью Jekyll?

EDIT 3: При указании следующего содержимого Markdown я ожидаю получить следующее содержимое HTML:

<html>
    <body>
        <h1>{{ page.title }}</h1>
        <div class="column-card">
            <div class="list-element">
                <p>Element Content</p>
            </div> 
            <div class="subelement-content">
                <p>Sub-element content</p>
            </div>
        </div>
        .....this repeats for more list elements.....
    </body>
</html>

jekyll html static-site
person jar    schedule 04.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда разделы представляют собой содержимое Markdown, преобразованное в HTML, используйте коллекции и повторяйте. Например, я буду использовать коллекцию с именем tutorials:

# _config.yml

collections:
  tutorials:
    output: true

со следующей структурой каталогов:

# Directory structure
.
|__ _layouts
|   |__ default.html
|__ _tutorials
|   |__ Example A
|   |__ Example B
|__ _config.yml
|__ about.md
|__ index.md

Затем в макете default:

<section>
  {% for doc in site.tutorials %}
    <article>
      <div class="article-title>
        {{ doc.title | default: Sample Article }}
      </div>
      <div class="artcle-summary">
        {{ doc.excerpt }}
      </div>
      <a href="{{ doc.url }}" title="Read More..">Read More</a>
    </article>
  {% endfor %}
</section>

Вышеупомянутое предназначено для создания разделов контента. Если вам просто нужно отобразить простые строки текста, используйте файлы данных. Например, когда у меня есть следующее в файле данных по пути ./_data/navigation.yml:

- label: Home
  url: "/"
- label: About Site
  url: "about.html"
- label: Contact Us
  url: "contact.html"

Тогда содержимое моего макета будет:

<nav>
  <ul>
    {% for item in site.data.navigation %}
      <li>
        <a
          href="{{ item.url | relative_url }}"
          title="{{ item.label }}"
        >{{ item.label }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

Документация: https://jekyllrb.com/docs/

person ashmaroli    schedule 04.01.2020
comment
Мне нужно просто отобразить простые строки текста - список элементов в файле уценки index.md, если быть точным. Я думал, что в jekyll будет способ перебирать список и генерировать теги ‹div› в index.html в папке _site. Однако похоже, что я не понял jekyll или как он работает правильно. Моя установка довольно проста. Будет ТОЛЬКО один файл уценки - index.md, содержимое которого я буду постоянно менять, и я просто хочу, чтобы jekyll отображал его определенным образом на одной html-странице, например, URL-адрес New York Times. - person jar; 04.01.2020
comment
Я нашел некоторую соответствующую информацию и обновил вопрос. Пожалуйста, посмотрите, я думаю, что сейчас это более важно. - person jar; 04.01.2020
comment
Jekyll — это не суперумная программа, которая вычисляет, что вы собираетесь получить, и доставляете это. Вместо этого это простая программа, которая преобразует Markdown в HTML и помещает этот HTML-контент в заданный HTML-макет. Возвращаясь к вашему вопросу, Джекил может быть не тем, что вы ищете. Однако вы можете помочь другим ответить, если отредактируете свой вопрос, включив в него и полученный HTML-код. т. е. При наличии следующего содержимого Markdown я ожидаю получить следующее содержимое HTML.. - person ashmaroli; 04.01.2020
comment
Если вы знаете кого-то, кто может написать подключаемый модуль Ruby для Jekyll, чтобы изменить его текущее поведение, возможно, вы сможете добиться этого. Единственный возможный способ добиться этого с готовым Jekyll — использовать файлы данных и циклы в макете. - person ashmaroli; 04.01.2020