Slinkityの最初の観察

Slinkityは、あなたの静的な11 tyのサイトに動的な、クライアント側の相互作用をもたらすためにVITEを使用するフレームワークです.これは、ツイートで発表された上でアルファ版としてリリースAugust 8, 2021 . 既存旋削可能.html or .liquid ファイル.jsx ファイル.
Slinkityを使用すると、次のようなショートコードを持つページにコンポーネントを挿入できます.{% react './path/to/Hello.jsx' %} . コンポーネント駆動ページはクライアントで水和されているので、動的状態管理は開発と生産の両方で機能します.現在のWeb開発コミュニティで2つの競合するキャンプを統合することを目指します.

ジキルとヒューゴのようなデータとテンプレート言語によって駆動されたリーンなJavaScriptのない静的サイトジェネレータ.

ダイナミックな、JavaScript重いウェブアプリはデータによって供給されて、NextJsとNuxtjsのようなVue成分または反応します.

Slikityは初期のAlphaで、生産用途に推薦されません.あなたは問題やログのバグを報告することができますhere . このプロジェクトのコード例を見つけることができますon my GitHub .

プロジェクトの作成

新しいディレクトリを作ることによってindex.md ヘッダーとファイルを含むファイル.gitignore ファイル.

mkdir -p ajcwebdev-slinkity/src
cd ajcwebdev-slinkity
echo '# ajcwebdev-slinkity' > src/index.md
echo 'node_modules\n_site\n.DS_Store' > .gitignore

依存性を追加する

初期化するpackage.json ファイル依存性を開発依存性としてインストールします.また、インストールする必要がありますreact and react-dom 依存関係として.

yarn init -y
yarn add -D slinkity @11ty/eleventy@beta
yarn add react react-dom

Slykityは11 tyに依存するlatest 1.0 beta build 正しく動作するように.

です。js

設定ファイルを作成します.

touch .eleventy.js

入力ディレクトリをsrc .

// .eleventy.js

module.exports = function (eleventyConfig) {
  return {
    dir: {
      input: 'src',
    },
  }
}

開発サーバ

npx slinkity --serve スタートa Vite server あなたの11 tyのビルドを指します.

npx slinkity --serve

The --incremental 開発中にビルドを高速化するためにフラグを使用できます.Viteは、SASSと反応を含むファイルタイプの範囲を処理することを可能にします.

[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.242:8080
 -----------------------------------
[Browsersync] Serving files from: _site

[11ty] Writing _site/index.html from ./src/index.md (liquid)
[11ty] Copied 1 file / Wrote 1 file in 0.11 seconds (v1.0.0-beta.2)
[11ty] Watching…

オープンlocalhost:8080 あなたのサイトを表示するには.

使用する場合slinkity コマンドを実行すると、eleventy CLI以外serve and port :

serve スタート11ty dev server in --watch mode ファイルの変更をリッスンする.

Slinkityは、11ティーのBrowserSyncサーバーの代わりに独立したViteサーバーをスピンします.port 私たち自身のサーバーのためにピックアップされ、Viteに渡される必要があります.

CLIは、However Configsをチェックし、入力や出力などのカスタムディレクトリを探します.見つければ、それらは適切な場所で見ることができるように、Viteサーバに渡されます.

2つのdevサーバを並列起動します

テンプレートを構築し、ファイルの変更を監視する

ブラウザのリソースバンドルとデバッグ用のViteサーバー

VITEサーバは、出力ディレクトリを指すことによって起動します.そのディレクトリがまだ存在しない場合、VITEはディレクトリの書き込みを待ちます.

2コンポーネントを追加する

我々は、11ティープロジェクトをアップして実行している.我々は今、作成するjsx コンポーネントと私たちのインデックスページにショートコードを含める.

こんにちは。日本学術振興会

あなたのコンポーネントはディレクトリと呼ばれますcomponents インサイド11 ty _includes ディレクトリ.

mkdir -p src/_includes/components
touch src/_includes/components/Hello.jsx

これはすべてのインポートされたコンポーネントが住んでいる場所です.Slinkityは常に_includes/components/ VITEのためのビルドにピックアップします.あなたがここの外でどこでもあなたの構成要素を置くならば、Viteは彼らを見つけることができません!

// src/_includes/components/Hello.jsx

import React from "react"

const Hello = () => {
  return (
    <>
      <span>The quality or condition of a slinky</span>
    </>
  )
}

export default Hello

このコンポーネントは、span タグ.とreact shortcode , コンポーネントを任意の静的テンプレートに挿入できます.含めるreact ショートコードindex.md この場合、コンポーネントへのパスを渡しますcomponents/Hello .

# ajcwebdev-slinkity

{% react 'components/Hello' %}

_includes and .jsx は省略可能です.

カウンター.日本学術振興会

前のコンポーネントと同様に_includes/components なので、このディレクトリをあなたのビルドにコピーできます.

touch src/_includes/components/Counter.jsx

新しい状態変数宣言count .

// src/_includes/components/Counter.jsx

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You've had {count} glasses of water 💧</p>

      <button onClick={() => setCount(count + 1)}>
        Add one
      </button>
    </div>
  )
}

export default Counter

前のもののようなショートコードでコンポーネントを含めます.

# ajcwebdev-slinkity

{% react 'components/Hello' %}

{% react 'components/Counter' %}

これは_includes/component/Counter.jsx , 静的にコンポーネントをレンダリングし、HTMLとして挿入し、JavaScriptコンポーネントでレンダリングされたHTMLを水和します.

コンポーネントページの作成

コンポーネントページは、あなたの11 tyサイトの他のどのテンプレートのようです.テンプレートは、あなたの内容を定義するファイルです.例えば、ブログでは、これはあなたのブログ記事を含むMarkdownファイルでありえました.

アバウト.日本学術振興会

我々が作成したいと言う/about インタラクティブなイメージカルーセルとページ.私たちはabout.jsx 我々のサイトの他のページと並んでファイルしてください.

touch src/about.jsx

エラーメッセージが表示されますabout.jsx 何もエクスポートしません.次を追加します.

// src/about.jsx

import React from 'react'

function About() {
  return (
    <h2>This page tells you stuff about things!</h2>
  )
}

export default About

オープン/about/ ページを表示するにはその末尾のスラッシュを含める必要があります/ Viteサーバーのページを見つける.これは、我々のJS束が生きているからです/about , vite開発サーバを起動する.

レイアウト

Slinkityはコンポーネントをラッピングするhtml and body タグを自動的に.ただし、メタデータや余分なラッパー要素を含める場合は、レイアウトテンプレートを作成するのに便利です.レイアウト連鎖についてもっと学ぶことができますhere .

正面適用

あなたが11ティーに精通しているならば、あなたは前に前の問題でたぶん働いたでしょう.フロントは、コンポーネントベースのページでは同じように動作します.フロントの問題を他のテンプレートの「上流」から情報を渡す方法と考えることができます.

// src/about.jsx

import React from 'react'

export const frontMatter = {
  title: 'About me'
}

function About() {
  return (
    <h2>This page tells you stuff about things!</h2>
  )
}

export default About

このtitle キーは、現在のレイアウトのテンプレートからアクセスすることができます私たちのページに適用されます.参照11ty's front matter documentation データカスケードがこれにどのように適合するかについて.

レイアウト.HTML

クリエイトアlayout.html 下_includes ディレクトリ

touch src/_includes/layout.html

生息するlayout.html 内容で.

<!-- src/_includes/layout.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ title }}</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>

{{ title }} 我々のページの前の問題から「タイトル」属性を使います

{{ content }} コンポーネントのページをレンダリングする

含めるfrontMatter インabout.jsx レイアウトを配線する.

// src/about.jsx

import React from 'react'

export const frontMatter = {
  title: 'About me',
  layout: 'layout.html',
}

function About() {
  return (
    <h2>This page tells you stuff about things!</h2>
  )
}

export default About

あなたのサイトをNetlifyに配備する

Slinkityプロジェクトは、NetLifyとVercelのような一般的なJamstackホスティングプロバイダのいずれかにホストすることができます.

ネットリファイ。トムール

クリエイトアnetlify.toml ファイル.

touch netlify.toml

含めるnpx slinkity ビルドコマンドと_site を返します.

[build]
  command = "npx slinkity"
  publish = "_site"

国立天文台

走るnpx slinkity 生産ビルドを作成します.あなたの新しいサイトは_site フォルダwherever you tell 11ty to build your site . プロダクションビルドでは、まず最初に一時的なディレクトリにすべてのルートをビルドし、この一時ディレクトリから意図した出力をビルドするために、すべてのリソースバンドル、minalization、および最終最適化を拾い上げます.

クリエイトジョ

あなたがいるならばGitHub CLI インストールすると、プロジェクトを初期化してGithubにプッシュするには、次のコマンドを使用できます.

git init
git add .
git commit -m "a slinky is a precompressed helical spring toy"
gh repo create ajcwebdev-slinkity
git push -u origin main

代わりに、空白のgithubリポジトリを作成することができますrepo.new を押す前にリモートを追加します.

あなたのrepoをnetlifyに接続してください

また、custom domain name .