問題タブ [nunjucks]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - さまざまな環境用に静的 HTML ページを構成するにはどうすればよいですか?
私は、HTML テンプレートと gulp に Nunjucks を使用してページをコンパイルしています。これは静的な 1 ページのサイトですが、環境ごとに分析などに異なる値を設定する必要があることがわかりました。これを行う最善の方法は何ですか?
config json ファイルを用意し、環境ごとに異なる gulp タスクを記述して値を変更することを考えていましたが、これを行うためのより良い方法があるかどうかを確認したいと思います。
json - gulp-nunjucks-html + gulp-data がウォッチでコンパイルされない
json ファイルからデータを取得し、それを html として処理する gulp タスクを作成しました。ビルドを最初に実行したとき、これは魅力のように機能しますが、これも行うように監視タスクを設定しました.nunjucksファイルをhtmlに再構築しますが、次の完全なビルドまでjsonを無視するようです(時計が行うことはすべて同じタスクを実行することです)
これが私の仕事です:
問題が他の場所にあり、それを見つけられなかった場合に備えて、ここに私のgulpfile全体があります:http://pastebin.com/q9vc8h6i
何か案は?
include - Nunjucks、拡張によって無視される「インクルード」部分ファイル内で定義されたブロック
これが私のユースケースです
ピースをまとめたファイル (holy-grail.njs) があり、必要な実際のページ (single.njs) によって拡張されます。問題は、インクルード ファイルで定義されたブロックが実際のページ テンプレートによって無視されることです。拡張サイドバーのテキストがスクリーンショットに表示されていないことがわかります <p>Here is some additional content for the sidebar extended in</p>
にやにや笑いのために、そのブロックコードをsidebar.njsからholy-grail.njsに移動しました。はい、それはsingle.njsによって拡張されているので、確かに私が疑ったとおりです。
バグですか、非機能ですか? 回避策はどうですか?それとも、ジェイドは私がしたいことをしますか? 「含まれる」ファイルは、さらに処理する前と同じように含まれていると思いましたが、処理されてから含まれているのでしょうか? これを行うことができなければ、テンプレートのピース/部分を整理し、コンテンツを拡張/カスタマイズする私の全体的なグルーヴィーな方法はうまくいきません.
これと同じ質問が 3 年前に行われましたが、誰も回答 しませんでした インクルード ファイル内のブロックが拡張テンプレートによって埋められていない
single.njs
聖杯.njs
sidebar.njs
node.js - クライアント側 JavaScript で Express.js ローカル変数にアクセスする (nunjucks)
テンプレート エンジンとして nunjucks を使用していることを除いて、 これは基本的にこの質問と同じです。
Express の render メソッドを使用して変数を nunjucks テンプレートに渡しています。
クライアント側の JavaScript でアクセスしたい。これまでのところ、私が理解した唯一の方法は、それを目に見えない HTML 要素に入れて、そこから JavaScript にプルすることです。
より良い方法はありますか?
javascript - 変数名を使用して nunjucks テンプレート マクロを呼び出す
与えられたマクロ:
変数名を使用して呼び出す方法はありますか:
または、カスタム タグからマクロを呼び出すにはどうすればよいですか? これらの変数を受け入れるタグを作成しましたが、そこからマクロを挿入する方法がわかりません。
json - コンテキスト付きのテンプレートのインポートが機能していないようです
私は最近、ヌンジャクに慣れようとしています。以前はハンドルバーを使用していたので、学習曲線はそれほど悪くはありませんでした. ただし、うまくいかないように見えることが1つあります。
次のデータを含む JSON ファイルがあります。
これは、他のページ要素を含む JSON ファイルに存在しますが、私が興味を持っているのは contentIntro コンテキストだけです。
このようなパーシャルを含めると:
次に、そのパーシャル (例: ) 内でドット表記を使用して JSON データにアクセスできますが、{{ contentIntro.title }}
これはあまり柔軟ではなく、ページに同じパーシャル タイプを複数持つことはできません。
理想的には、次のようにパーシャルをインポートすることです。
{{ title }}
テンプレートでは、インポートからのコンテキストが既にわかっているため、JSON データにアクセスできます。
面倒ですが、うまくいきません。理由がわかりません。Jinja2 のドキュメントはそれを示唆しているようですが、Nunjucks を使用して動作させることはできません。これは可能ですか?
編集: また、テンプレートが gulp で事前にレンダリングされているため、最終結果はフラットな HTML になることも付け加えておく必要があります。
gulp - markdown と nunjucks を使用した gulp ワークフロー
Gulp を使用して、Markdown と Nunjucks を使用して静的ページを生成するためのワークフローの設定に取り組んでいます。このために私が依存している現在の 2 つのタスクは次のとおりです。
次の構造を使用します。
これを実行するとgulp templates
、layout.nunjucks を拡張する index.nunjucks を使用して、index.html が /app にコンパイルされます。gulp pages
ただし、 index.html のコンテンツを生成するために、index.md から frontmatter と Markdown を描画するために使用したいと考えています。
私が抱えている問題はパスです: 上記の構造を考えると、/app/templates/pages/index.nunjucks を介して /app/index.html のコンテンツとして /app/pages/index.md を使用するにはどうすればよいですか? 現在、タスクは で失敗しTemplate render error: (unknown path)
ます。
基本的に、私はここで達成されたことを拡張しようとしています: Gulp Front Matter + Nunjucks による Markdown
javascript - nunjucks セット作成オブジェクト
nunjucks がset をブロックとして使用できるようになったので、次のようなことをしたいと思いました。
次に、この変数を別のマクロの入力オブジェクトとして呼び出します。次のようにします。
ただし、navigationItems
配列リテラルではなく文字列として評価されます。どのように、またはこれが可能かどうか考えていますか?
ありがとう。
javascript - gulp-gray-matter プラグインによって作成されたデータ オブジェクトにアクセスするにはどうすればよいですか (nunjucks で html ファイルをコンパイルする場合)
フロントエンドの JavaScript テンプレート エンジンとしてnunjucks-renderを使用しています。
特定の .nunjuck ファイルから前頭葉データを読み取り、そのデータを使用して .nunjuck (テンプレート) ファイルを .html ファイルにコンパイルしたいと考えています。
少し調査した結果、gulp-gray-matterがより高速で優れた前頭葉物質抽出プラグインの 1 つであることがわかりました。
私の質問は次のとおりです。前頭葉のデータ オブジェクトにアクセスするにはどうすればよいですか?
たとえば、前頭の問題を .nunjucks ファイルに次のように記述します。
最終的な HTML 出力は次のようになります。
私の gulfile.js 設定は次のとおりです。