24

Jekyll のレイアウトを変更したいと思います。変更は小さく、異なります。たとえば、追加の CSS または JavaScript ファイルをリンクします。または、ヘッダーに情報を追加します。またはチューニングページのタイトル。 これらの変更はページ/投稿に依存することが重要です。

変更は小さく多様であるため、それぞれに特別なレイアウトを作成するのはコストがかかりすぎるようです。

独自のソリューションを作成しようとしましたが、命令を含める際に変数を使用することが不可能になりました。

誰かが同様のことを解決しましたか? たとえば、特別な CSS を特定の投稿にリンクしますか?

4

2 に答える 2

40

YAMLフロントマターを使用して、投稿/ページに必要なものを調整できます。そこに提供する情報は、レイアウトからアクセスでき、page変数の下または特定の投稿の下にそれらのリストに含まれます。

これはあなたのケースの解決策のように聞こえます：次のようなYAMLフロントマターを使用できます：

---
extra_css:
  - foo.css
  - dir/bar.css
  - /s/baz.css
---

そして、次のようにレイアウトのヘッダーでこれを使用します。

{% for css_name in page.extra_css %}
    <link rel="stylesheet" href="{{ css_name }}">
{% endfor %}

このようにして、YAMLフロントマターの投稿で提供するデータに基づいて任意のロジックを追加できます。

これらのロジックの一部をモジュールに抽象化する場合は、インクルードをハックして、インクルードの前に変数を割り当て、内部で使用することができます。これは、Jekyll Bootstrapプロジェクトでどのように作成されたかを説明するリンクです（ところで、そのサイトにはJekyllに関する多くの素晴らしい情報があります）。

そして、はい、Jekyllはインクルードでの変数の使用を許可していません。したがって、条件付きで何かをインクルードしたい場合は、どこかに利用可能なすべてのインクルードのリストが必要になります。それらが必要になります。

もう1つの解決策は、レイアウト内のすべてをインクルードに分割し、さまざまなレベルの複雑さのレイアウトを作成することです。このようにして、投稿用にこれらの基本レイアウトのいずれかを設定し、基本から必要なブロックのインクルードを使用して追加のコードを記述できます。レイアウトなので、投稿は次のようになります。

---
layout: custom
---
<aside class="sidebar">
    {% include comments.html %}
    {% include sidebar.html %}
</aside>
<div class="content" role="main">
    Foo bar baz
</div>

そこで、ページの基本的なレイアウトを含まず、サイドバーとコメントを含まないカスタムレイアウトを使用できるため、投稿ごとに必要なレイアウトのレベルを決定し、再定義する必要があるものを再定義できます。

また、さまざまな場所を微調整する必要があるが、内容が不明な場合は、次のようなブロックでYAMLフロントマターを使用できます。

extra_head: |
    <style>
    * {background: red}
    </style>

次に、そのような変数をheadから呼び出すことができます。{{ page.extra_head }}そして、そこに配置したコンテンツを取得します。ただし、YAML内で液体タグを使用することはできませんが、そのような変数で任意のYAMLタグを使用できるため、単純な置換フィルターを使用して、それらをマークダウンしたり、内部の文字列を他のものに置き換えたりできます。

そして、それらのどれもあなたに合わない場合、Jekyllはあなたに合いません—コメントで書いたように、Jekyllは単なるブログエンジンであり、XSLTのように複雑になるのを待つべきではありません。

于 2013-01-04T17:49:35.537 に答える
0

jekyll-bootstrap 静的サイトに独立したページを作成しようとしたことがあります。たとえば、my_cv.html独立した css スタイルが必要です。gh-pages を使用して新しい github リポジトリを作成する代わりに (申し訳ありませんが GitHub)、形式が実際に互換性があると思うmy_cv.mdので、すべての最終的な html コンテンツを投稿に入力するだけで、幸いなことに機能します。markdownhtml

于 2014-01-26T23:26:38.797 に答える