でのドラフトの作成

いくつかの静的サイトジェネレータとコンテンツ管理システムは、ドラフトとしてポストをマークする機能を内蔵しています.第11回(11 ty)はこれらのうちの1つではありませんが、幸運にも実装可能です.
コアコンセプトはfront matter keys — permalink and eleventyExcludeFromCollections — ユーザーからページを非表示にするcomputed data 環境変数によって自動的に環境に応じて可視性を切り替える.

どのような機能が必要ですか?

The permalink キー
The permalink ファイルが構築される前の問題キーコントロール.より実質的に、それはURLがページのためにあるものを指示します.
ドラフト用のファイルを作成したりURLを与えたりしたくない場合はpermalink に設定するfalse . 引用するEleventy permalink docs : あなたがセットするならばpermalink 値false , これにより、ファイルを出力フォルダに書き込むことができなくなります.ファイルはまだ処理されます(そして、コレクションの中に存在します)url and outputPath properties 設定するfalse ) しかし、スタンドアロンテンプレートとして出力ディレクトリでは使用できません.
私たちはまだコレクションにファイルがまだ存在しないことを望みますeleventyExcludeFromCollections 入る.

The eleventyExcludeFromCollections キー
The eleventyExcludeFromCollections フロントマターキーは何を言うかcollections . コレクションは、RSSフィード、サイトマップやブログのポストリストなどの動的なページを作成するために使用できる関連コンテンツからのデータのセットです.eleventyExcludeFromCollections に設定するtrue コレクションから作成されたリストからドラフトを非表示にするには.引用するEleventy collection docs : 前の問題(またはデータカスケードのさらに上流の)でeleventyExcludeFromCollections オプションtrue すべてのコレクションに追加されたコンテンツの特定の部分から選ぶことcollections.all , タグを使用してコレクションを設定します.あなたのRSSフィードに便利です.sitemap.xml , カスタムテンプレート.htaccess ファイル、et cetera.
ページの組み合わせによって需要に隠されることができますpermalink and eleventyExcludeFromCollections しかし、我々が本当に欲しいものは、我々がローカルにテストし続けることができるように、彼らが生の生産現場に隠されるだけであるためにあります.計算されたデータは、私たちにそれをさせます.

計算データ
Computed data ページ、前の事項、または他の場所からのデータに渡されたデータに基づいて、フロント問題の値を動的に変更することができます.フロントは通常静的ですが、計算されたデータではpermalink and eleventyExcludeFromCollections キーは、我々がローカルに働いているか、生産のために我々のサイトを構築しているかどうかに基づいてトグルされる必要があります.

環境変数
環境変数は、上の特定の機能ではないので、私はそれらを詳細にカバーすることはできませんが、簡単に言えば、彼らはあなたのコードが実行されている場所に応じて切り替えることができるグローバル変数を提供します.
私たちはdotenv NPM package それは一貫して簡単にオペレーティングシステム全体に設定を提供するため.

ドラフトの作成方法
Jekyllが私がカバーする草稿を扱うのに3つの方法があります.

前部物質におけるドラフトキーの使用

将来の日付の設定

ドラフトフォルダの使用

私はここのブログ柱に集中しています、しかし、どこかで前の問題がある限り、これらのメソッドはどんなタイプのページででも使われることができますdata cascade .

環境設定
次の手順では、NetLifyのようなサービスを使用してサーバー上にサイトを構築していると仮定します.
まず、dotenvをインストールするnpm i dotenv コマンドラインで.
次に、.env ファイルをルートディレクトリ(package.json ) 次のファイルに追加します.

ELEVENTY_ENV=development

これは私たちにグローバル変数“EleenentyRenEnv”を与えます.
最後に、送信するのを防ぐ必要があります.env それが開発環境にあると思わないようにファイルをサーバーに.あなたを加えることによってこれをしてください.env あなたのファイル.gitignore file ( rootフォルダに存在しない場合に1を作成)

.env
node_modules

環境変数を設定すると、計算されたデータでそれらを使用することができます.

前処理におけるドラフトキーの使用
ここでの目標はどちらかです.

集合するdraft キーtrue or false それが隠れているかどうか決定するために、ページの前部の問題でor

集合する date key 将来の日付までのページの前の問題では、ビルドがその日付かそれ以降の場合、そのページを表示するだけです

--------
date: 2150-12-31
draft: true
// Other front matter
--------
// Page content

そうするために、我々はAを加える必要がありますdirectory specific data file これにより、フォルダ内のすべてのファイルに同じフロントを追加できます.

blog
    |- blog.11tydata.js
    |- first-post.md
    |- second-post.md
    |- third-post.md</pre>

使いましたblog.11tydata.js それがブログ・フォルダーにあるように.別のフォルダ名を使用している場合は、フォルダの名前のファイル名に“ブログ”を置き換えます.
11 tydataの内部.JSファイルのフロントデータをエクスポートします.

require('dotenv').config();

const isDevEnv = process.env.ELEVENTY_ENV === 'development';
const todaysDate = new Date();

function showDraft(data) {
    const isDraft = 'draft' in data && data.draft !== false;
    const isFutureDate = data.page.date > todaysDate;
    return isDevEnv || (!isDraft && !isFutureDate);
}

module.exports = function() {
    return {
        eleventyComputed: {
            eleventyExcludeFromCollections: function(data) {
                if(showDraft(data)) {
                    return data.eleventyExcludeFromCollections;
                }
                else {
                    return true;
                }
            },
            permalink: function(data) {
                if(showDraft(data)) {
                    return data.permalink
                }
                else {
                    return false;
                }
            }
        }
    }
}

1行目でdotenvをインポートしているので、環境変数を.env からのファイルprocess.env オブジェクト.
3行目で読んでいるELEVENTY_ENV 環境変数process.env オブジェクトを使用してブール値をisDevEnv 変数.
4行目で今日の日付を含む新しい日付オブジェクトを作成します.
6行目- 10行目は、ドラフトページを表示するかどうかを決定するブールを返す関数を含んでいます.
7行目では、私たちはdraft キーが設定されましたtrue ページのフロント問題で.使用することに注意const isDraft = data.draft === true; も動作しますが、型強制のために、どんなtyposもページがドラフトでないと仮定するでしょう.ドラフトキーを明示的にチェックし、それがfalseに設定されていないことによって、私たちはそれがパブリックであることを意味することを確認することができます.
8行目では、今日の日付より今日の日付に対して、フロントの日付をチェックしています.
9行目ではisDevEnv 3行目から変数isDraft 7行目以降の結果isFutureDate 行8から変数を返し、そのページが表示されるかどうかを確認するbooleanの結果を返します.
ライン12～33は、そのデータカスケードで使用するために、エレベータのために前の物質データを輸出している.The eleventyComputed キーは私がここで含んでいる唯一の鍵です、しかし、あなたは他の前の問題鍵を加えることができますtags を返します.
ライン15 - 22と23 - 30は、我々がeleventyExcludeFromCollections and permalink の結果に基づく値showDraft 渡される関数data supplied by Eleventy . If the showDraft 行6からの関数はtrueを返し、既存の値を使用していますが、falseを返すと、既存の値をtrueとfalseに上書きして、ページをコレクションから除外し、それぞれのページを構築しないようにします.

ドラフトフォルダの使用
ここでの目標は、ファイルを非表示にするか、それらを表示するフォルダのフォルダーを移動することです.そうするために、我々はAを加える必要がありますdirectory specific data file 同じフォルダーがそのフォルダー内のすべてのファイルに追加されるように、Draftsフォルダーに

blog
    |- first-post.md
    |- second-post.md
drafts
    |- drafts.11tydata.js
    |- third-post.md

使いましたdrafts.11tydata.js ここでは、それはドラフトフォルダーです.別のフォルダ名を使用する場合は、フォルダ名のファイル名に“drafts”を置きます.
11 tydataの内部.JSファイルのフロントデータをエクスポートします.

require('dotenv').config();

const isDevEnv = process.env.ELEVENTY_ENV === 'development';

module.exports = function() {
    return {
        eleventyComputed: {
            eleventyExcludeFromCollections: function(data) {
                if(isDevEnv) {
                    return data.eleventyExcludeFromCollections;
                }
                else {
                    return true;
                }
            },
            permalink: function(data) {
                if(!isDevEnv) {
                    return false;
                }
                else if(data.permalink !== '') {
                    return data.permalink;
                }
                else {
                    return data.page.filePathStem.replace('/drafts/', '/blog/') + '/';
                }
            }
        }
    }
}

1行目でdotenvをインポートしているので、環境変数を.env からのファイルprocess.env オブジェクト.
3行目で読んでいるELEVENTY_ENV 環境変数process.env オブジェクトを使用してブール値をisDevEnv 変数.
5行目から29行目までのデータは、データカスケードで使用するために前のデータをエクスポートします.The eleventyComputed キーは私がここで含んでいる唯一の鍵です、しかし、あなたは他の前の問題鍵を加えることができますtags を返します.
線8 - 15と16 - 26は、我々が決定しているところですeleventyExcludeFromCollections and permalink に基づいた値isDevEnv 3行目から.
9 - 14行目で、我々は既存を返していますeleventyExcludeFromCollections 我々が開発環境にいるならば、値をつけてください、さもなければ本当です.
17 - 19行で開発環境に入っているかどうかをチェックしますpermalink キーfalse 我々がそうしないならば.
20 - 22行目では、permalinkがフロントに明示的に設定されているかどうかをチェックします.
23 - 25行では、ページのデフォルトpermalinkを変更し、パスの「ドラフト」部分を「ブログ」に置き換えます."/rafts/3 st post/"の代わりに"/blog/second post/"を出力します.注意adding the trailing slash on the end is important .

概要
The permalink and eleventyExcludeFromCollections 前件キーを使用すると、

--------
permalink: false
eleventyExcludeFromCollections: true
--------

計算されたデータと環境変数を活用することで、ジキルのドラフト動作を再現できます.
コマンドライン:

npm i dotenv

env :

ELEVENTY_ENV=development

gitignore :

.env
node_modules

ブログ.11 TyDatajs

require('dotenv').config();

const isDevEnv = process.env.ELEVENTY_ENV === 'development';
const todaysDate = new Date();

function showDraft(data) {
    const isDraft = 'draft' in data && data.draft !== false;
    const isFutureDate = data.page.date > todaysDate;
    return isDevEnv || (!isDraft && !isFutureDate);
}

module.exports = ()=> {
    return {
        eleventyComputed: {
            eleventyExcludeFromCollections: data => showDraft(data) ? data.eleventyExcludeFromCollections : true,
            permalink: data => showDraft(data) ? data.permalink : false,
        }
    }
}

ドラフト.11 TyDatajs

require('dotenv').config();

const isDevEnv = process.env.ELEVENTY_ENV === 'development';

module.exports = ()=> {
    return {
        eleventyComputed: {
            eleventyExcludeFromCollections: data => isDevEnv ? data.eleventyExcludeFromCollections : true,
            permalink: data => {
                if(!isDevEnv) { return false; }
                return data.permalink !== '' ? data.permalink : data.page.filePathStem.replace('/drafts/', '/blog/') + '/';
            }
        }
    }
}

ポスト.md

--------
draft: true
--------

更なる読書

Permalinks documentation

Collections documentation

Computed data documentation

Data cascade documentation

Directory specific data files documentation