Jekyllを使用したローカル投稿アセット
Jekyllを使用しているときに、他の人がどのようにして個々の投稿のアセットを整理しているのかと思っていました。たとえば、投稿に画像がある場合、それを共有画像フォルダにダンプしますか？私はこれをやるという考えがあまり好きではありません-それは、ペアにすべきだと思うときに、画像が投稿から完全に分離されていることを意味します。
私は、画像を0個以上のページに含まれるスタンドアロンのアセットと考えることを好みます。ほとんどの場合、私の画像は単一のページに表示されます。複数のページにそれらを配置したい場合があり、他の場合には画像をまったくリンクしません。ワークフローで各画像を投稿のあるディレクトリに配置する場合、それらを見つけるにはかなりの量の検索が必要になり始め、特定の投稿に属さない画像については別の何かを考え出す必要があります。
私が使用するアプローチは、スペクトルの反対側にあります。単一の画像ディレクトリ（「/ 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」の形式で提供されます。そのような変更を行う必要があることは、おそらく非常にまれです。できるのは面白いことだと思う。
最後に、画像ディレクトリの閲覧を許可するかどうかについて、単一の決定を下すことができます。個人的には、自分の画像を配置した場所にのみ表示したいのです。そのため、画像ディレクトリの.htaccessファイルを次のように設定しました。
Options -Indexes
数千または数万のページや画像があるサイトで作業する場合、これはスケーリングされない可能性があります。通常のサイズの個人用サイトの場合、このアプローチにより画像の管理が容易になることがわかりました。
サブディレクトリ内のアセットを簡単に整理できるプラグインを作成しました。
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
あなたと同じように、すべての画像を1つの共有フォルダーに入れるのは本当に嫌いです。
すべてではありませんが、ほとんどの画像は1つの投稿で役立ちます。Markdownファイルと一緒に保管しておくと、投稿管理に非常に役立ちます。
- ある場所にマークダウンを配置し、別の場所に画像を配置することなく、1つのステップで_
/_posts/_の1つのサブフォルダーとして新しい投稿をドロップできます - 既存の投稿の画像を編集する場合、巨大な_
/assets/_フォルダーで適切な画像を見つける必要はありません。Markdownファイルのすぐ近くにあります - マークダウンでは、パスなしで画像ファイル名を直接使用できます
- ライブプレビューでMarkdownエディターを使用したい場合、機能します。特定のアセットフォルダー構成は不要です
私は自分のブログでこれをしようとしました（ 例の投稿 ）。
レスポンシブイメージの場合、 Jekyll Picture Tagプラグイン を使用しましたが、フォークする必要がありました。そのようなパスを処理する Pull Request が受け入れられなかったためです。
Jekyll 3ができたので、ポストフォルダーと_/assets/_の両方で画像を使用し、両方ででマークされた画像をこの順序で検索できるようにしたいと思います。
Markdownファイルと一緒に投稿アセットを保持するのに役立つJekyllプラグインを開発することができました。 https://nhoizey.github.io/jekyll-postfiles/
JavaScriptとCSSの場合、アセットパイプラインを検討することをお勧めします。バンドルと圧縮により、パフォーマンスを大幅に改善できます。また、CoffeeScriptとSassも使用しているため、アセットを変換するにはプリプロセッサが必要でした。 Jekyll Asset Pipeline を使用して、jekyllコマンドを実行するときにこのプロセス全体を自動的に管理します。
画像/ビデオの場合、プロジェクト内のフォルダーの命名規則を作成することをお勧めします。通常、「アセット」フォルダーがあり、サブフォルダーにはそれらの投稿に関連する画像を保持する各投稿の日付があります。 1日に複数の投稿がある場合は、投稿の名前を含めることを検討してください。