Пользовательский плагин Jekyll (Liquid Filter?) Отображает теги скрипта как текст, а не как JavaScript - PullRequest
1 голос
/ 27 февраля 2020

Я экспериментирую с созданием сайта, используя Jekyll для друга.

Я пытаюсь преобразовать материал из файлов, таких как /_events/2020-02-25-an-event.md и /_events/2020-02-26-another-event.md, во что-то, что можно легко встроить в совокупность различных строительных блоков контента и результатов на этих страницах, которые просматривает посетитель, включая <script type="application/ld+json">...</script> теги, соответствующие schema.org, событию стандартам.

Файл, подобный /_events/2020-02-25-an-event.md выглядит следующим образом:

---
layout: event
title: An event
published: true
startdatetime: 2020-02-28
venue: Best Club Ever
---

Члены коллекции events предназначены для отображения в виде отдельных просматриваемых URL-адресов и должны иметь фрагмент JavaScript, скрывающий в отображаемом выводе, например:

<script type="application/ld+json">
    [
        {
            "@context" : "http://schema.org",
            "@type" : "Event",
            "name" : "An event",
            "startDate" : "2020-02-28",
            "location" : "Best Club Ever blah blah ... have address stuff to work out, still"
        }
    ]
</script>

Я получил эту работу, написав /_plugins/event_schema.rb следующим образом:

require 'liquid'

module EventSchemaFilters

  def do_not_use_me_directly_single_json_curly(input_object)
    %Q(
        {
            "@context" : "http://schema.org",
            "@type" : "Event",
            "name" : "#{input_object['title']}",
            "startDate" : "#{input_object['startdatetime']}",
            "location" : "#{input_object['venue']}"
        }
    )
  end

  def event_single_schema_script(input_object)
    %Q(
        <script type="application/ld+json">
        [
            #{do_not_use_me_directly_single_json_curly(input_object)}
        ]
        </script>
    )
  end

  def event_multiple_schema_script(input_object_array)
    %Q(
        <script type="application/ld+json">
        [
            #{input_object_array.map(&method(:do_not_use_me_directly_single_json_curly)).join(',')}
        ]
        </script>
    )
  end

  def event_multiple_schema_script(input_object_array)
    %Q(
        <script type="application/ld+json">
        [
            #{input_object_array.map(&method(:do_not_use_me_directly_single_json_curly)).join(',')}
        ]
        </script>
    )
  end

  end

Liquid::Template.register_filter(EventSchemaFilters)

И затем, написав /_layouts/event.html (который просматривает макет «страницы», который выглядит как « «макет по умолчанию» как:

---
layout: page
---

{{ page | event_single_schema_script }}

К сожалению, если я напишу /index.md, как это, в то время как я получаю небольшой набор предстоящих событий, он отображается в окружении <code> ... теги и отображаются в теле т Домашняя страница:

---
title: Home Page
layout: default
---

# {{ page.title }}

{{ site.events | event_multiple_schema_script }}

Желание, чтобы этот скрипт был частью DOM JavaScript ..., а не частью текста на странице:

<script type="application/ld+json">
    [
        {
            "@context" : "http://schema.org",
            "@type" : "Event",
            "name" : "An event",
            "startDate" : "2020-02-28",
            "location" : "Best Club Ever blah blah ... have address stuff to work out, still"
        }
        ,
        {
            "@context" : "http://schema.org",
            "@type" : "Event",
            "name" : "Another event",
            "startDate" : "2020-02-27",
            "location" : "Less Good Club blah blah ... have address stuff to work out, still"
        }
    ]
</script>

Перемещение {{ site.events | event_multiple_schema_script }} быть содержимым /_includes/event_all_schema_script.html, и попытка {% include event_all_schema_script.html %} вообще не помогла - та же проблема.

Удаление вызова на {% include event_all_schema_script.html %} из /index.md и помещение его в /_layouts/default.html вместо выводит так, как я хочу. Но теперь он есть на каждой странице, включая такие, как https://example.com/events/2020-02-25-an-event/, а это не то, что я хочу. Но это показывает, что моя проблема в том, что я написал что-то, что я не могу просто «вставить» в уценку ... вещи ... которая станет веб-страницей.

Вещи, которые также работают в /index.md, но это не то, что я хочу сделать:

  • Почерк <script>...</script> код прямо в него
  • Ввод {% include event_all_schema_script_hardcode.html %} в него, где /_includes/event_all_schema_script_hardcode.html буквально просто <script>...</script> текст, скопированный из вывода, который я показал всем вам.
    • Если бы материал "генераторы для чайников" не было так сложно найти (документация Jekyll не очень обширна; Google бесполезен, потому что фраза "генератор сайтов * stati c" является распространенной ) , может быть, я мог бы написать код, который сделал бы возможным создание такого файла во время сборки? Это похоже на довольно высокую планку, чтобы преодолеть, хотя., С моими текущими знаниями Джекила / Ruby.

Я открыт, чтобы перестроить это, путь. Не привязан к идее «фильтрации» таких вещей, как site.events, et c. Это так же далеко, как я получил в своем «привет мире».

Единственные принципы, к которым я действительно привязан в окончательном проекте:

  • Все данные вводятся в календарь «событий» должно быть сделано через передний план элементов в коллекции events (поэтому я могу получить CMS, например Forestry.io или Netlify CMS, чтобы с ним было приятно играть) .
  • Вычисление содержимого блока <script>...</script> должно происходить в «независимом, вставляемом компоненте».
    • Я не хочу делать большую жидкость l oop внутри /_layouts/homepage.html, которую я должен напомнить веб-дизайнеру, чтобы скопировать / вставить в /_layouts/better_homepage.html.
    • Вместо этого я просто хочу быть в состоянии сказать веб-дизайнеру: «Эй, если вы хотите, чтобы метаданные страницы включали в себя ленту событий, просто вставьте {% include event_all_schema_script.html %} куда-нибудь в нее или в ее макет».
    • Я хочу {% include event_all_schema_script.html %}, или кто-то другой, кто поможет мне в этом, работать над телом страниц / записей / коллекций и разметкой.
  • Я собираюсь взять Из того, что я узнал из этого, можно также написать «простые старые DIV для веб-дизайнеров, стилизировать их по своему усмотрению», такие как /_includes/event_all_div.html и /_includes/event_single_div.html, и разрешить их использовать везде, где веб-дизайнер сочтет нужным - в уценке или в макете.
    • Опять же, я не веб-дизайнер. Я просто человек преобразования структуры данных. Моя единственная цель - создать красивые, «скучные» фрагменты HTML, которые готовы для правильного веб-дизайнера использовать и стилизовать по своему усмотрению.

Есть какие-нибудь мысли о том, как я могу улучшить эту попытку рендеринга HTML, чтобы она была удобна как для макета, так и для уценки?

Большое спасибо.

1 Ответ

2 голосов
/ 28 февраля 2020

Я не могу воспроизвести вашу проблему, но это определенно происходит из-за того, что Kramdown понимает любую строку с отступом в четыре пробела или больше как стандартный кодовый блок .

Если вы не Если вы не хотите обрабатывать некоторые части ваших файлов разметки, вы можете использовать nomarkdown расширение , например:

{::nomarkdown}  
     Any indented line or block
{:/nomarkdown}

Другим обходным решением может быть переключение на файлы html для ваших событий. .

...