つのコラム柱レイアウト

この記事では、2つの列レイアウトを作成するオプションを探索します.
これは、Markdownは私たちが任意のスタイリングを持つことを許可していないので、かなりの課題です.
あなたが私のデザインを見るならば、あなたは明らかにイメージが一方と他方の側の内容であるのを見ることができます.

このユースケースでは、マークダウンファイルのファイル名に基づいて画像を解析するカスタムJavaScriptメソッドを使用します.

イメージリポジトリ

前述のように、私たちは別々のファイル構造で我々のイメージを主催しています.
フォルダを作成するimages インサイドsrc フォルダ.
このフォルダの中で、あなたのポストファイルの正確な同じ名前でサブフォルダを作成する必要があります.
この例では、投稿はarticle-6.md , それで、私たちはarticle-6 .

これがあれば、必要なすべてのイメージフォルダを追加できます.
次に、このフォルダを我々の出力ウェブサイトに渡すために、ElethEventに伝える必要があります.
開放する.eleventy.js ファイルをエクスポートし、次の行を追加します.

module.exports = function (config) {
  config.addPassthroughCopy("src/images");

  // All your other config stuff
});

これにより、私たちはビルドした画像をフォルダに出力します.

イメージフィルタを作成する

一旦我々のイメージセットアップがあるならば、我々は我々のポストで彼らを利用するためにこれらのイメージを読むことができるスクリプトを構築し始めることができます.
は、それがデータを読むことができる涼しい特徴を持ちます_data フォルダ.
それで、これをつくりましょう_data フォルダ内のsrc ディレクトリ.
内部でファイルを作成するpostImages.js .
このファイルは私たちのファイルシステムを読んで、画像を見つけて、それらを使用するためにオブジェクトに加える機能です.
この関数は、オブジェクトを返すことができるノードスクリプトです.と呼ばれる変数になるpostImages 我々が中で帰る何でも.

Note: This function was adapted from Chris his journal project.

まず、ファイルシステムを使用して構造を定義します.

const fs = require('fs'),
  path = require('path');

const walkSync = (dir, filelist) => {
  const files = fs.readdirSync(dir);
  filelist = filelist || {};

  // Do our magic here

  return filelist;
};

module.exports = walkSync(process.env.PWD + '/src/images/');

ここでは、関数walkSync . 特定のディレクトリを読み込み、いくつかのマジックを行い、filelistオブジェクトを返します.
その後、我々はそれを返すようにエクスポートfilelist 変数として.
これでwalkSync 関数は、ディレクトリをループしてサブディレクトリを見つける必要があります.

files.forEach(function(file) {
  if (fs.statSync(dir + file).isDirectory()) {
    filelist = walkSync(dir + file + '/', filelist);
  } else {
    // Create our output
  }
});

我々はディレクトリ内の各ファイルをループし、その特定のファイルがディレクトリそのものであれば、現在の関数を呼び出しますfilelist 入力として.
我々はすべてのディレクトリをループしたので、我々は我々が見つけたイメージで何かをする必要があります.
それはelse 文.

const imageURL = dir + file;
const ext = path.extname(imageURL).toUpperCase();
if (['.JPG', '.JPEG', '.PNG'].includes(ext)) {
  const usePath = imageURL.replace(process.env.PWD + '/src/images/', '');
  const fullPath = usePath.split('/');
  const directory = fullPath[0],
    file = fullPath[1];
  if (!filelist[directory]) filelist[directory] = [];
  filelist[directory].push(file);
}

ImageURLを完全なdirで定義することから始めます.
このファイルの拡張子を取得します.
次のステップでは、ファイルが.JPG , .JPEG , .PNG .
もしそうならば、我々は安全にそれがイメージであると言うことができます、そして、我々は我々の出力にそれを加えなければなりません.
次に、ローカルパスをstring.replace method .
これは以下のようになります.

// article-6/1.jpg
// article-6/2.jpg
// article-6/3.jpg

我々は今スラッシュでこれらの文字列を爆発させたいので、我々はポスト名とそれのためのすべてのイメージを得ます.

const fullPath = usePath.split('/');

これには配列があります.

// [ 'article-6', '1.jpg' ]
// [ 'article-6', '2.jpg' ]
// [ 'article-6', '3.jpg' ]

だからキー0はarticle-6 , 記事名を表す、そして、第2のキーはイメージ名です.
今、我々はこれらのイメージを我々のオブジェクトに配列として加える必要があります.

const directory = fullPath[0],
  file = fullPath[1];
if (!filelist[directory]) filelist[directory] = [];
filelist[directory].push(file);

これにより次の出力が得られる.

{ 'article-6': [ '1.jpg', '2.jpg', '3.jpg' ] }

だから今postImages 変数はこのオブジェクトを含みます.

我々のポストにイメージをリンクしてください

現在、我々は我々のポストでこれらのイメージを得る必要があります.
前述のように、変数postImages すべてのオブジェクトデータを含む.
この変数を私たちのポストに呼び出すことでアクセスできます.
変更するsrc/_includes/layouts/post.njk ファイルを追加し、次のコードを追加します

{% for image in postImages[page.fileSlug] %}
<img src="/images/{{page.fileSlug}}/{{ image }}" />
{% endfor %}

我々はPostimagesオブジェクトにアクセスし、ページを渡します.ファイル名( 6 ).
それはこの記事のためのイメージの配列を返します.

つのコラムポストレイアウト

私たちがTailwindに変換されたので、ここでは、Tailwindクラスを使用している2つのコラムレイアウトの私のバージョンです.

{% extends 'layouts/base.njk' %} {% block content %}
<main class="flex flex-col-reverse md:flex-row">
  <div class="w-full p-4 py-24 md:w-1/2">
    <h1 class="mb-8 text-4xl font-bold">{{ title }}</h1>
    {% for image in postImages[page.fileSlug] %}
    <img src="/images/{{page.fileSlug}}/{{ image }}" class="w-full mb-6 shadow-xs" />
    {% endfor %}
  </div>
  <div class="w-full min-h-screen p-4 py-24 text-white md:w-1/2 bg-purple">
    {{ content | safe }}
  </div>
</main>
{% endblock %}

これは、左と右側のコンテンツのタイトルと画像を2つの列のデスクトップレイアウトを与えます.
では、flex-col-reverse モバイル上でこれらを切り替えるには、コンテンツがトップにあります.

そこに行くと、我々はちょうど2つの列のレイアウトを使用して、Historandとマークダウンファイルを使用します.
かなりクールな解決策.私は、あなたがこのメソッドを使用する他の方法を考えることさえできます.
今日のコードを見つけることができますGitHub .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or