Интеграция Markdown и SrcSet - PullRequest
1 голос
/ 27 марта 2019

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

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

Итак, этот

<DIV class=picr3>

![Shelterbelt-12][2]

Planting a shelterbelt, or any tree project...

***

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

- это все, что мне нужно, чтобы изображение размером до ширины 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>

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

  • Заменить

    на
    . В моей реализации Markdown нахождение между тегами в нижнем регистре означает, что содержимое этого тега не обрабатывается Markdown.
  • Придумайтестандартное соглашение об именах, скажем whateverimage-L.jpg для большой версии, -M.jpg для средней версии и -S.jpg для маленькой версии.

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

Gotchas?

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...