Блог

Главная - Вопросы по программированию - Интеграция Markdown и SrcSet

Интеграция Markdown и SrcSet

#html #css #perl #markdown

#HTML #css #perl #markdown

Вопрос:

Мне нравится markdown. Я использую его в сочетании с Template Toolkit, и в принципе мне не нужно писать какой-либо html. Мои веб-страницы статичны, содержат только фрагмент js, который использует Google Analytics. В основном я хотел бы сохранить это таким образом. У меня нулевой опыт работы с javascript.

Я могу сделать до некоторой степени простой макет страницы, используя несколько классов, применяемых к DIVs.

Итак, это

 <DIV class=picr3>

![Shelterbelt-12][2]

Planting a shelterbelt, or any tree project...

***

</DIV>
[2]: /Images/Shelterbelt/Shelterbelt-12.jpg

это весь html, который мне нужно использовать, чтобы изображение размером в ширину 30% от содержимого div было перемещено вправо. Система не идеальна, но она достаточно хорошо изменяет размер, а поскольку страница статична, она хорошо кэшируется и быстро доставляется.

Для меня важнее другое: я могу тратить время на написание контента и совсем немного настраивать макет.

Проблема: если я отправляю красивое изображение рабочего стола на мобильный телефон, время загрузки увеличивается. Если я использую изображение с уменьшенным разрешением, чтобы ускорить доступ к телефону, это выглядит как дерьмо на рабочем столе.

В Html у нас теперь есть элемент, объединенный с атрибутами srcset и size. Это превращает то, что раньше было простым тегом img, в это: 

 <picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

<img src="stick-original.png" alt="Human">
</picture>

На данный момент я рассматриваю возможность развертывания моего собственного решения в значительной степени в этом направлении:

  • Замените <DIV> на <div> В моей реализации Markdown, нахождение между тегами нижнего регистра означает, что содержимое этого тега не обрабатывается Markdown.

  • Придумайте стандартное соглашение об именовании, скажем whateverimage-L.jpg для расширенной версии, -M.jpg для средней версии и -S. jpg для уменьшенной версии.

  • Предварительно обработайте результирующие файлы markdown, чтобы сгенерировать полный элемент из встроенного markdown. Я думаю, что это в пределах моих ограниченных возможностей программирования на perl.

Ошибки?

Это колесо уже изобретено?

Как лучше подойти к этому? Должен ли я стиснуть зубы и сделать это с помощью фрагмента javascript?

Какое-то другое решение, которого мне не хватает в моем блуждании по «лабиринту извилистых проходов, все разные», то есть Интернет?

Примечание для модераторов: это может лучше подойти для webmasters.SE . Казалось, это было больше похоже на программу. Если вы считаете, что это должно быть там, пожалуйста, переместите это.

Комментарии:

1. Раздел » HTML » правил, кажется, довольно четко указывает, что такого рода вещи выходят за рамки Markdown и должны решаться с помощью необработанного HTML. Лично я не знаю ни о каких реализациях Markdown, которые поддерживают picture теги. Так что да, вставляйте необработанный HTML в свои документы. Вставляете ли вы этот необработанный HTML вручную или с помощью скрипта, зависит от вас.

2. Если вы используете Template Toolkit, вы можете написать шаблон для этого и следовать определенному соглашению об именовании, затем включить этот шаблон. Если это слишком много работы, вы можете написать код на Perl и экспортировать его как vmethod, который сделает это за вас. Затем вам нужно будет ввести имя вашего файла, очень похожее на Markdown, и оно сгенерирует правильные вызовы шаблона.

3. Или вы могли бы создать подкласс синтаксического анализатора markdown, который вы используете, чтобы научить его генерировать другой HTML.

4. @sunbabqye посмотрел на это. Может быть, но я действительно не понимаю код. Я пытался модифицировать его раньше, и обычно мне приходится возвращаться.