子猫と子犬と一緒のDrupal

16503 ワード

スタックオーバーフローについてasked how dynamic “list” generation worked in 11ty 比較してDrupal views .
私はDrupalについて何も知りませんでした、しかし、私はおそらく、私が2つのウェブサイトビルディングシステムに関係がある内容データモデルが異なるかもしれない影響に関して若干の光を流すことができたと思いました:Relational(SQL)対オブジェクト.
両方のシステムで子猫と子犬のデータセットで視覚的で、低いコードを見ます.

データストレージ

Drupalは、WordPressのように、内容がAに格納されるウェブサイト生成ツールですrelational (SQL) database management system .
対照的に、11 tyはコンテンツからウェブサイトを生成することです.

保存ordinary computer files , or

インターネット上の他の場所に格納されますが、これは完全に良いコンピュータファイルになります.jsスタイル

データ形

しかし、最大の違いは、データが格納される場所ではなく、サイト生成ツールがそれを見る形です.
違いの感覚を得るために私の説明を見てください.

XMLとJSONに対するイントロ

ケイティ・月25日・ 8分読

#xml #json #tutorial #beginners

しかし、そのポストで説明されていないが、別の詳細の中の1つのテーブルからデータを識別することを含み、それが他のテーブルの行へのリンクを表していることを示し、コンピュータが自動的にそれらのリンクを理解していることを示すことによって、複数のテーブル型データファイルを結合するという考えが説明されていない.(リレーショナルデータベースではリレーショナルの意味です).
動物の避難所から養子縁組を待っている子猫と子犬についてのデータを見てみましょう.
サンプルデータを入力する際に怠惰にさせるために、私のシェルターは不思議です、そして、同じ名前の2匹のペットはこれまでに到着しません.

関係データベース型

完全リレーショナルデータベースでは、おそらく我々のデータを正常化するでしょう.
以下は4つのテーブルを持つデータモデルの例です.kittens , puppies , valid_colors , and pet_coloration :

子猫たち

スラッグ
名称
オレオ
オレオ
ハーシー
ハーシー

子犬

スラッグ
名称
フィド
フィド
ローバー
ローバー
軽食
軽食

バリデータ

ローワンID
色
1
ブラック
2
ブラウン
3
白
4
グレイ
5
オレンジ
6
タン
7
赤

ペトル色

ペックルテーブル
スラッグ
色度
子猫たち
オレオ
1
子猫たち
オレオ
3
子猫たち
ハーシー
2
子犬
フィド
1
子犬
フィド
7
子犬
ローバー
6
子犬
軽食
1
子犬
軽食
3

ネストリスト

ファイルベースのネストされたリスト形のデータストアで互いの行IDを相互参照する4つのテーブルに我々のデータを構造化することから私たちを止めることは、何もありません.
人々はこのようなデータを格納する傾向がありますkittens and puppies , それぞれの動物の記録の中に埋葬された詳細があります

子猫たち

(kitten #1)

name: Oreo

colors:

black

white

slug: oreo

(kitten #2)

name: Hershey

colors:

brown

slug: hershey

子犬

(puppy #1)

name: Fido

colors:

white

red

slug: fido

(puppy #2)

name: Rover

colors:

tan

slug: rover

(puppy #3)

name: Snickers

colors:

black

white

slug: snickers

ペット一覧

リレーショナル

私が言うことができるものから、それはDrupalのような関係データベースを意識したウェブサイト構築システムのように見えますhttps://mysite.com/colors/black/ それはすべての黒いペットを利用可能なリスト、関係なく、彼らは子猫や子犬です.
これは、SQLを使用して、データを格納するデータベース管理システムに組み込まれている宣言型プログラミング言語は、非常に小さなコードでその視点からデータを検査する機会を提供しています.
このコードは(注意:実行しませんでしたが、バグがあるかもしれませんが、うまくいけばgistを取得します).

SELECT DISTINCT
 DECODE(pets.pet_table, "kittens," "kitten", "puppies," "puppy", pets.pet_table) as pet_type
 pets.slug, 
 pets.name
FROM valid_colors
INNER JOIN pet_coloration
 ON valid_colors.row_id = pet_coloration.color_id
INNER JOIN (
  SELECT "kittens" as pet_table, slug, name
  FROM kittens
  UNION ALL
  SELECT "puppies" as pet_table, slug, name
  FROM puppies
) pets
 ON pets.slug = pet_coloration.slug
 AND pets.pet_table = pet_coloration.pet_table
WHERE valid_colors.color = 'black'

...このデータを生成します.
ペックル型
スラッグ
名称
子猫
オレオ
オレオ
子犬
軽食
軽食
実際には、私はここですべてを入力するつもりです(概念は少し2次元で落書きするのは難しいです)しかし、私たちが想像できるほぼすべてのパターンのデータを“クエリ”ので、私は間違いなくDrupalのようなツールがどのように簡単にどのようにあなたはそれがあなたが適切なURLの下で適切なURLを構築を管理したいと言うことができる簡単なユーザーインターフェイスを確認することができますhttps://mysite.com/colors/ – black , tan , orange , など

入れ子状のリスト

似たタイプのURLを構築するhttps://mysite.com/colors/black/ 単に「子猫」と「子犬」を含む入れ子にされたリスト形のデータを使用することは、おそらくより多くの手動コーディングをするでしょう.
私たちは、個々のペットのリストの中に埋め込まれた各ペットについて“着色”データを残していないだけでなく、このようなデータで動作するように最適化されたWebサイトの構築ツールは、11代のように、我々はすべてのハードワークを行うように命令プログラミング言語を提供しています.
我々は手には、すべての単一の子猫や子犬のレコードの上にループをコードを書く必要があるかどうか、それが黒かどうかを確認するには、その場合は、子猫や子犬についての右の詳細を脇に設定してください.
このコードは次のようになります.

const pets = [
 ...kittens.map((kitten) => {
  kitten.pet_type = "kitten";
  return kitten;
 }),
 ...puppies.map((puppy) => {
  puppy.pet_type = "puppy";
  return puppy;
 }),
];

const pets_for_color = ({ color }) => {
 return pets.filter((pet) => {
  return pet.colors.includes(color);
 });
};

const black_pets = pets_for_color({ color: "black" });

module.exports = black_pets

そのようなコードは、あなたのウェブサイトビルダーが生成することができたこのようなデータを生成しますhttps://mysite.com/colors/black/ :

(pet #1)

name: Oreo

colors:

black

white

slug: oreo

pet_type: kitten

(pet #2)

name: Snickers

colors:

black

white

slug: snickers

pet_type: puppy

トリッキーな?良くなる.
一度あなたの“関係データを”習慣を考えて壊れてきた“オブジェクトデータ”の思考習慣のハングアップを得たし、一度新しいプログラミング言語に慣れてきた、新しいアプローチはそんなに悪くないでしょう.
私は今のようなトリックを覚えて最後の半年以上の十分なJavaScriptを学ぶために今自分自身を高フィクションです... , .map() , and .filter() .
常にあなたの小さな勝を祝う!
実際に、あなたのデータセットがあまり大きくない限り、あなたが何をしているかを知っているならば、コードのいくつかの追加行を書いて、あなたのウェブサイトビルダーがすべてを構築するのに使うことができた入れ子になったリスト形のデータセットを生成するのは、あまり難しくありませんhttps://mysite.com/colors/ あなたに代わってURL:

// Code shown previously,
// except final lines pertaining to black_pets,
// goes here

const current_colors = [
 ...new Set(
  pets
   .map((pet) => {return pet.colors;})
   .flat()
 ),
];

const pets_by_color = current_colors.map((color) => {
 return { color, pets: pets_for_color({ color }) };
});

module.exports = pets_by_color;

このようなコードはこのようなデータを生成します.あなたのWebサイトビルダーは、どのページを作るかを決定するためにリストの最も外側のレベルを使用することができますpets 下の適切なURLを構築するためのサブリストhttps://mysite.com/colors/ – black , tan , red , など

(color #1)

color: black

pets:

(...all the details about Oreo...)

(...all the details about Snickers...)

(color #2)

color: white

pets:

(...all the details about Oreo...)

(...all the details about Fido...)

(color #3)

color: brown

pets:

(...all the details about Hershey...)

(color #4)

color: red

pets:

(...all the details about Fido...)

(color #5)

color: tan

pets:

(...all the details about Rover...)

このような「データ変換」コードを書いて、結果をHTML HTMLテンプレートに利用できるようにすることは、その理由である_data 特別なフォルダ.
あなたの次の11 tyウェブサイトでJavaScriptでデータ前処理を利用するようにしてください.
それはあなたがDrupalやWordPressのようなデータベースベースのサイト構築ツールを使用した後に新たに起動している場合に慣れているデータリスト＆URLの建物の経験に到達するのに役立ちます.