Actifs de publication locale avec Jekyll
Je me demandais comment d'autres personnes organisent leurs actifs pour des publications individuelles lors de l'utilisation de Jekyll. Par exemple, si une publication a une image, la jetez-vous simplement dans un dossier d'images partagées? Je n'aime pas vraiment l'idée de faire cela - cela signifie qu'une image est complètement séparée d'un post, quand je pense qu'elles devraient être jumelées.
Je préfère considérer les images comme des éléments autonomes qui sont inclus dans zéro ou plusieurs pages. La plupart du temps, mes images apparaissent sur une seule page. Il y a des moments où je veux les avoir sur plusieurs pages et dans d'autres cas, je ne lie pas du tout une image. Si votre flux de travail consiste à placer chaque image dans un répertoire avec une publication, leur recherche commence à nécessiter une quantité importante de recherche et vous devez trouver quelque chose de différent pour les images qui n'appartiennent pas à une publication spécifique.
L'approche que j'utilise est de l'autre côté du spectre. J'ai un seul répertoire d'images (servi à partir de "/ images") et 100% de mes images y sont hébergées. Les avantages de ceci sont:
Lorsque j'ajoute une image à un message, il est facile de savoir quel chemin utiliser. C'est toujours:
/images/{image-name}Par exemple: http://alanwsmith.com/i/aws-20111017--0906-02 . Cela permet d'écrire un plug-in, il vous suffit de saisir le nom de l'image et le reste du chemin connu est rempli automatiquement.
Avec une application comme Photo Mechanic , il est incroyablement facile de parcourir le répertoire unique localement et de voir chaque image. Si je veux inclure une image sur une autre page, cela réduit considérablement le temps de la trouver.
Il n'y a pas de lieu/processus séparé si je veux envoyer une image à quelqu'un sans l'inclure réellement dans une page (c'est-à-dire lui envoyer un lien direct vers le fichier image). Je jette juste l'image dans le répertoire standard et envoie le lien direct.
Si vous voulez devenir un peu plus avancé, garder toutes vos images dans un seul répertoire permet également quelques ajustements de Nice. Par exemple, même si les URL de mes images commencent par "/ images", les images sont en fait stockées dans un répertoire en dehors de ceux que jekyll utilise. Dans mon cas, le haut de mon arbre source ressemble à ceci:
./html
./source-files
./image-files
Toutes mes images sont stockées dans le répertoire "./image-files". Dans ma configuration Apache, j'ai configuré un alias pour que l'URL "/ images" pointe vers le répertoire "./image-files". Par exemple:
Alias /images /webroot/image-files
Lorsque je lance jekyll, il traite tout dans "./source-files" et le dépose dans "./html". Parce que toutes les images sont en dehors de ces deux répertoires, jekyll ne les voit/ne les touche jamais. À mesure que votre bibliothèque d'images s'agrandit, cela accélérera les choses et empêchera une énorme quantité de copie de fichiers inutiles.
Un autre Tweak que j'aime dans Apache tourne:
Options +MultiViews
Cela vous permet d'appeler vos images sans avoir à utiliser l'extension de fichier (par exemple pas de '.jpg', '.png', etc ...). Vous pouvez le voir dans l'exemple de lien que j'ai fourni ci-dessus. Peu importe la performance. J'aime son apparence et cela m'évite d'avoir à taper l'extension à chaque fois que j'appelle une image.
MultiViews permet également de remplacer une image d'un format par un autre sans avoir à recoder autre chose. Par exemple, si vous supprimez "some-image.gif" et le remplacez par "some-image.png", vous n'aurez pas à toucher à du code HTML. Il serait toujours servi sous "/ images/some-image". La nécessité d'apporter des modifications comme celle-ci est probablement extrêmement rare. Je pense juste que c'est une chose intéressante à faire.
Enfin, vous pouvez prendre une seule décision concernant l'autorisation ou l'interdiction de parcourir votre répertoire d'images. Personnellement, je veux seulement que mes images apparaissent là où je les place. J'ai donc défini le fichier .htaccess dans mon répertoire d'images sur:
Options -Indexes
Si vous allez travailler sur un site avec plusieurs milliers ou dizaines de milliers de pages et d'images, cela peut ne pas évoluer. Pour un site personnel de taille normale, je trouve que cette approche facilite la maintenance des images.
J'ai écrit un plugin pour me permettre d'organiser facilement les actifs dans des sous-répertoires:
https://github.com/samrayner/jekyll-asset-path-plugin
{% asset_path my-image.png %}
dans le post-01/01/2013, le titre du poste afficherait:
/assets/posts/post-title/my-image.png
dans la page ma première page afficherait:
/assets/my-first-page/my-image.png
Tout comme vous, je déteste vraiment avoir toutes les images dans un seul dossier partagé.
La plupart, sinon la totalité, de mes images sont utiles dans un seul article, et les conserver à côté du fichier Markdown est vraiment meilleur pour la gestion des articles:
- Je peux déposer un nouveau message en un seul sous-dossier de
/_posts/En une seule étape, sans avoir à mettre le Markdown à un endroit et les images à un autre - Lorsque je souhaite modifier les images d'une publication existante, je n'ai pas besoin de trouver la bonne image dans un énorme dossier
/assets/, Elle est située juste à côté du fichier Markdown - Dans mon Markdown, je peux utiliser le nom du fichier image directement, sans aucun chemin
- Si je veux utiliser n'importe quel éditeur Markdown avec prévisualisation en direct, cela fonctionne, pas besoin d'une configuration de dossier d'actifs spécifique
J'ai essayé d'avoir ceci pour mon blog ( exemple de post ici ).
Pour les images réactives, j'ai utilisé le plugin Jekyll Picture Tag , mais j'ai dû le bifurquer, car la demande de tirage pour gérer ces chemins n'était pas acceptée.
Maintenant que Jekyll 3 est là, je souhaite qu'il puisse nous permettre d'utiliser des images à la fois dans un dossier de publication ET dans /assets/, À la recherche d'une image marquée avec  dans les deux, dans cet ordre .
J'ai maintenant réussi à développer un plugin Jekyll qui aide à garder les actifs des publications à côté du fichier Markdown: https://nhoizey.github.io/jekyll-postfiles/
Pour JavaScript et CSS, vous pouvez envisager un pipeline d'actifs. Vous pouvez obtenir une bonne amélioration des performances grâce au regroupement et à la compression. J'utilise également CoffeeScript et Sass, j'avais donc besoin d'un préprocesseur pour convertir mes actifs. J'utilise Jekyll Asset Pipeline pour gérer tout ce processus automatiquement lorsque j'exécute la commande jekyll.
Pour les images/vidéos, je vous recommande de développer une convention pour nommer les dossiers dans votre projet. J'ai généralement un dossier "assets" puis des sous-dossiers avec la date de chaque publication contenant les images liées à ces publications. Si vous avez plusieurs articles par jour, vous pouvez envisager d'inclure le nom de l'article.