Можно ли использовать Liquid для быстрого добавления стиля CSS настраиваемого класса к тексту? - PullRequest
Новая
       55

Можно ли использовать Liquid для быстрого добавления стиля CSS настраиваемого класса к тексту?

0 голосов
/ 05 мая 2020

Есть ли способ быстро добавить стиль CSS, например, через класс CSS, используя Liquid (в документе с уценкой, созданном с помощью Jekyll)?

Я бы хотел иметь возможность писать что-то вроде 

blah blah words {% someclass | words styled by class someclass %} some
more words.

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

Я знаю, что могу сделать следующее 

blah unstyled words

{:.someclass}
words to be styled by CSS of someclass

blah unstyled (well, body- and p-styled) words

, чтобы создать абзац (из-за уценки) с примененным классом, например <p class="sometag"> words to be styled by CSS of someclass</p>, с вложенным предполагаемым содержимым.

Возможность изменить элемент с <p> на <span> будет достаточно для достижения моих целей.

1 Ответ

0 голосов
/ 13 мая 2020

Посмотрим, смогу ли я вам помочь. Например, представьте, что в файле уценки мы хотим вставить полужирный красный <H2> заголовок и абзац <p> с полужирным зеленым текстом с помощью настраиваемого тега.

Вы можете сделать что-то вроде этого: в каталоге _include вашего проекта Jekyll создайте файл без расширения с именем mytag. Внутри файла mytag введите приведенный ниже код и сохраните его.

Файл mytag: 

{% if include.h2 %}
{% capture mystyle %}
<h2 style="color: red; font-weight: bold; font-size: 2em;"> {{ include.h2 }} </h2>
{% endcapture %}

{{ mystyle }}
{% endif %}



{% if include.p %}
{% capture mystyle %}
<p style="color: green; font-weight: bold;"> {{ include.p }} </p>
{% endcapture %}

{{ mystyle }}
{% endif %}

Теперь в вашем файле .md вы можете написать приведенный ниже код, чтобы получить жирный красный <H2> заголовок: 

{% include mytag h2="My title h2" %}

или вы можете написать код ниже, чтобы иметь абзац <p> с зеленым жирным шрифтом: 

{% include mytag p="I'm a green bold paragraph" %}

Очевидно, вы можете персонализировать все, ввод имени класса вместо встроенного стиля.

...