Локальные активы с Jekyll

Ответ 1

Я предпочитаю думать о изображениях как автономных активах, которые включены в нуль или более страниц. В большинстве случаев мои изображения появляются на одной странице. Бывают случаи, когда я хочу иметь их на нескольких страницах, а в других случаях я вообще не привязываю изображение. Если ваш рабочий процесс состоит в том, чтобы поместить каждое изображение в каталог с сообщением, поиск их начинает требовать значительного объема поиска, и вам нужно придумать что-то другое для изображений, не принадлежащих к определенному сообщению.

Подход, который я использую, находится на противоположной стороне спектра. У меня есть один каталог изображений (от "/images" ) и 100% моих изображений размещены там. Преимущества этого:

• Когда я добавляю изображение в сообщение, вам легко узнать, какой путь использовать. Это всегда:

  /images/{image-name}
  

  Например: http://alanwsmith.com/i/aws-20111017--0906-02. Это позволяет писать плагин, поэтому все, что вам нужно ввести, - это имя изображения, а остальная часть известного пути будет автоматически заполнена.

• С помощью приложения, такого как Photo Mechanic, невероятно просто просматривать локальный каталог и видеть каждое изображение. Если я хочу включить изображение на другую страницу, это значительно сократит время его поиска.

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

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

./html
./source-files
./image-files

Все мои изображения хранятся в каталоге "./image-files". В моей конфигурации apache я настроил псевдоним, чтобы URL-адрес/изображения указывал на каталог "./image-files". Например:

Alias /images /webroot/image-files

Когда я запускаю jekyll, он обрабатывает все в "./source-files" и переносит его в "./html". Поскольку все изображения находятся за пределами этих двух каталогов, jekyll никогда не видит/не затрагивает их. По мере роста вашей библиотеки изображений это ускорит процесс и предотвратит огромное количество ненужного копирования файлов.

Еще одна настройка, которую я люблю в Apache, включается:

Options +MultiViews

Это позволяет вам вызывать ваши изображения без использования расширения файла (например, "нет".jpg ",".png "и т.д.). Вы можете видеть это в приведенной выше ссылке ссылки. Для производительности это не имеет особого значения. Мне просто нравится, как он выглядит, и это избавляет меня от необходимости вводить расширение каждый раз, когда я вызываю изображение.

MultiViews также позволяет заменить изображение одного формата другим без необходимости перекодировать что-либо еще. Например, если вы удалите "some-image.gif" и замените его "some-image.png", вам не нужно касаться какого-либо HTML. Ему все равно будет подана форма "/images/some-image". Необходимость внесения подобных изменений, вероятно, чрезвычайно редка. Я просто считаю, что это интересно.

Наконец, вы можете сделать одно решение о разрешении или запрете просмотра каталога изображений. Лично я хочу, чтобы мои изображения отображались там, где я их размещаю. Итак, я установил файл .htaccess в каталог моих изображений:

Options -Indexes

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

Ответ 2

Я написал плагин, чтобы я мог легко организовать ресурсы в подкаталогах:
https://github.com/samrayner/jekyll-asset-path-plugin

{% asset_path my-image.png %}

в post 2013-01-01-post-title будет выводиться:

/assets/posts/post-title/my-image.png

на странице my-first-page будет выводиться:

/assets/my-first-page/my-image.png

Ответ 3

Так же, как и вы, мне очень не нравятся все изображения в одной общей папке.

Большинство, если не все, моих изображений полезны в одном сообщении, а их хранение вместе с файлом Markdown действительно лучше для управления сообщениями:

• Я могу оставить новый пост как одну подпапку /_posts/ за один шаг, не помещая Markdown в одно место и изображение (-ы) в другой
• Когда я хочу отредактировать изображение (-ы) существующего сообщения, мне не нужно найти нужный образ в огромной папке /assets/, он находится рядом с файлом Markdown
• В моем Markdown я могу использовать имя файла изображения напрямую, без какого-либо пути
• Если я хочу использовать любой редактор Markdown с предварительным просмотром в реальном времени, он работает, нет необходимости в конфигурации конфигурации определенных активов.

Я пытался использовать это для своего блога (пример сообщения здесь).

Для реагирующих изображений я использовал Jekyll Picture Tag плагин, но мне пришлось его разветвлять, потому что запрос Pull для решения таких путей не был принят.

Теперь, когда есть Jekyll 3, я хотел бы, чтобы он мог использовать изображения как в почтовом ящике AND, так и в /assets/, ищем изображение с ![alt](image-file-without-path.jpg) в обоих в этом порядке.

Ответ 4

Теперь мне удалось разработать Jekyll-плагин, который помогает сохранять ресурсы posts наряду с файлом Markdown: https://nhoizey.github.io/jekyll-postfiles/

Ответ 5

Для JavaScript и CSS вы можете рассмотреть конвейер активов. Вы можете добиться хорошего улучшения производительности путем связывания и сжатия. Я также использую CoffeeScript и Sass, поэтому мне нужен препроцессор для преобразования моих активов. Я использую Jekyll Asset Pipeline для управления всем этим процессом автоматически при запуске команды jekyll.

Для изображений/видео я рекомендую вам разработать соглашение об именах папок в вашем проекте. Обычно у меня есть папка "assets", а затем вложенные папки с датой каждого сообщения, которое содержит изображения, связанные с этими сообщениями. Если у вас есть несколько сообщений в день, вы можете подумать о включении имени сообщения.