Jekyllを使用しているときに、他の人が個々の投稿のアセットをどのように整理しているのか疑問に思いました。たとえば、投稿に画像がある場合、それを共有画像フォルダにダンプしますか?私はこれを行うという考えは本当に好きではありません-それは、画像がペアになっているべきだと思うときに、画像が投稿から完全に分離されていることを意味します。
6 に答える
サブディレクトリのアセットを簡単に整理できるプラグインを作成しました:
https ://github.com/samrayner/jekyll-asset-path-plugin
{% asset_path my-image.png %}
投稿2013-01-01-post-titleは次のように出力します:
/assets/posts/post-title/my-image.png
ページ内のmy-first-pageは次のように出力します。
/assets/my-first-page/my-image.png
私は、画像を0ページ以上に含まれるスタンドアロンのアセットと考えることを好みます。ほとんどの場合、私の画像は1ページに表示されます。複数のページに分けたい場合もあれば、画像をまったくリンクしない場合もあります。ワークフローが各画像を投稿のあるディレクトリに配置する場合、それらを見つけるにはかなりの量の検索が必要になり、特定の投稿に属していない画像には別の何かを考え出す必要があります。
私が使用するアプローチは、スペクトルの反対側にあります。私は単一の画像ディレクトリ(「/ images」から提供)を持っており、私の画像の100%がそこに格納されています。これの利点は次のとおりです。
投稿に画像を追加するとき、使用するパスを簡単に知ることができます。いつも:
/images/{image-name}
例:http ://alanwsmith.com/i/aws-20111017--0906-02 。これにより、プラグインを作成できるため、入力する必要があるのは画像名だけで、残りの既知のパスは自動的に入力されます。
Photo Mechanicのようなアプリケーションを使用すると、単一のディレクトリをローカルで参照してすべての画像を表示するのが非常に簡単になります。別のページに画像を含めたい場合、これにより画像を見つける時間が大幅に短縮されます。
実際にページに画像を含めずに誰かに画像を送信したい場合(つまり、画像ファイルへの直接リンクを送信したい場合)、別の場所/プロセスはありません。標準ディレクトリに画像をスローして、直接リンクを送信します。
もう少し高度なものにしたい場合は、すべての画像を1つのディレクトリに保持することで、いくつかの優れた調整も可能になります。たとえば、私の画像のURLは「/ images」で始まりますが、実際には、画像はjekyllが使用するディレクトリ以外のディレクトリに保存されます。私の場合、ソースツリーの最上部は次のようになります。
./html
./source-files
./image-files
私の画像はすべて「./image-files」ディレクトリに保存されています。私のapache設定では、URL「/images」が「./image-files」ディレクトリを指すようにエイリアスを設定しました。例えば:
Alias /images /webroot/image-files
jekyllを実行すると、「。/ source-files」内のすべてが処理され、「。/html」にドロップされます。すべての画像はこれらの2つのディレクトリの外にあるため、jekyllはそれらを表示したり触れたりすることはありません。イメージライブラリが大きくなるにつれて、これは処理を高速化し、大量の不要なファイルコピーを防ぐのに役立ちます。
Apacheで私が気に入っているもう1つの調整は、オンにすることです。
Options +MultiViews
これにより、ファイル拡張子を使用せずに画像を呼び出すことができます(たとえば、「。jpg」、「。png」などはありません)。上記のリンク例でそれを見ることができます。パフォーマンスにはあまり関係ありません。見た目が気に入っているので、画像を呼び出すたびに拡張子を入力する必要がありません。
MultiViewsを使用すると、他の形式を再コーディングすることなく、ある形式の画像を別の形式に置き換えることもできます。たとえば、「some-image.gif」を削除して「some-image.png」に置き換えると、HTMLに触れる必要がなくなります。それでも「/images/some-image」から提供されます。そのような変更を行う必要があることは、おそらく非常にまれです。できるのは面白いことだと思います。
最後に、画像ディレクトリの参照を許可するか禁止するかについて1つの決定を下すことができます。個人的には、自分の画像を配置した場所にのみ表示したいと思っています。そのため、imagesディレクトリの.htaccessファイルを次のように設定しました。
Options -Indexes
数千または数万のページと画像があるサイトで作業する場合、これは拡張性がない可能性があります。通常のサイズの個人用サイトの場合、このアプローチにより画像の保守が容易になることがわかりました。
私は今、Markdownファイルと一緒に投稿アセットを保持するのに役立つJekyllプラグインを開発することができました: https ://nhoizey.github.io/jekyll-postfiles/
あなたと同じように、私はすべての画像を1つの共有フォルダに入れるのが本当に嫌いです。
すべてではないにしても、ほとんどの画像は1つの投稿で役立ち、Markdownファイルと一緒に保持することは投稿管理に非常に適しています。
/_posts/
ある場所にMarkdownを配置し、別の場所に画像を配置することなく、新しい投稿を1つのステップで1つのサブフォルダーとしてドロップできます。- 既存の投稿の画像を編集したい場合、巨大な
/assets/
フォルダで適切な画像を見つける必要はありません。Markdownファイルのすぐ近くにあります。 - マークダウンでは、パスなしで画像ファイル名を直接使用できます
- ライブプレビューでMarkdownエディターを使用したい場合、それは機能します。特定のアセットフォルダー構成は必要ありません。
私は自分のブログにこれを持たせようとしました(例の投稿はこちら)。
レスポンシブ画像には、Jekyll Picture Tagプラグインを使用しましたが、そのようなパスを処理するためのプルリクエストが受け入れられなかったため、フォークする必要がありました。
Jekyll 3ができたので、投稿フォルダと/assets/
1つのフォルダの両方で画像を使用して、両方でマークされた画像を![alt](image-file-without-path.jpg)
この順序で検索できるようにしたいと思います。
JavaScriptとCSSの場合、アセットパイプラインを検討することをお勧めします。バンドルと圧縮により、パフォーマンスを大幅に向上させることができます。CoffeeScriptとSassも使用しているので、アセットを変換するためにプリプロセッサが必要でした。コマンドを実行すると、 Jekyll Asset Pipelineを使用して、このプロセス全体を自動的に管理しますjekyll
。
画像/ビデオの場合、プロジェクト内のフォルダーに名前を付けるための規則を作成することをお勧めします。私は通常、「アセット」フォルダと、それらの投稿に関連する画像を保持する各投稿の日付を含むサブフォルダを持っています。1日に複数の投稿がある場合は、投稿の名前を含めることを検討してください。
この答え:
- プラグインを使用しません(GitHub Pagesで動作します)
- 関連する投稿のすぐ隣に画像を保持できます
- Typoraを使用してローカルで編集し、画像を表示できますWYSIWYG
フォルダにのような名前を付けて、やその他の画像の_posts/2020-10-10-My-Title/
ようなファイルを含めます。index.md
hero.svg
次にpermalink:
、_config.yamlのキーをに設定します:path
。
警告:
- あなたのフォルダ名は遅くする必要があります
- 画像はすべてSVGである必要があります