ミッドナイト2020ブリヂストンプラグイン

過去数ヶ月間.Bridgetown 愛好家とオープンソースソフトウェア開発者は、新しい機能と強化のあらゆる種類であなたのウェブサイトをデッキにプラグインと自動化を書いています.私は、我々が以前に彼らを逃した場合、我々がちょうどこれらのいくつかをハイライトすることが高い時間であると思いました.レッツゴー!

グラミータウン
これは、プレスから熱いです!With the Graphtown plugin , あなたは簡単にグラフィカルな宝石の上にTidyビルダーDSL(ドメイン固有の言語)を使用してBridgetownのウェブサイトのGraphSQL APIを消費することができます.これには多くのユースケースがありますが、1つの人気のあるものは、Strapi .
ここでどのように簡単です!

# plugins/builders/strapi_posts.rb

class StrapiPosts < SiteBuilder
  graphql :posts do
    query {
      posts {
        id
        title
        description
        body
        createdAt
      }
    }
  end

  def build
    queries.posts.each do |post|
      slug = Bridgetown::Utils.slugify(post.title)
      doc "#{slug}.md" do
        layout "post"
        date post.created_at
        front_matter post.to_h
        content post.body
      end
    end
  end
end

コードのほんの数行で、あなたのCMSからあなたのサイトを再構築するたびに非常に最新のコンテンツを組み込む準備が整いました.

ブリッジタウン＋刺激😍
Stimulus “あなたが既に持っているHTMLのためのささやかなJavaScriptフレームワークです.”それは、超簡単な反応またはVueのようなヘビー級解決においてロードを必要とすることなく、あなたのサイトへのモジュール的で、再利用可能で、構成可能な行動とインタラクションを加えることを超簡単にします.
現在the bridgetown-automation-stimulus package by Konnor Rogers , あなたは、1つのコマンドであなたのBridgetownウェブサイトに刺激をインストールすることができます!単に端末を開いて実行します.

bundle exec bridgetown apply https://github.com/ParamagicDev/bridgetown-automation-stimulus

それはfrontend/javascript/controllers 自動的にあなたのためのフォルダ.単にそこにあなたの刺激コントローラを書くdata-controller 必要に応じてあなたのHTMLの属性、およびレースにオフにしている!

インラインSVGプラグイン
SVG画像は最終的にWeb上で主流になっている小さなファイルサイズ、無限のベクトルスケーラビリティ、およびCSSスタイリングを介して信じられないほどのライブカスタマイズ可能性.
あなたのBridgetownウェブサイトで直接SVGイメージを埋め込むより簡単な方法がありませんthe bridgetown-inline-svg plugin by Andrew Mason . 実際には、我々はブリッジgetnnrbの上でここでそれを使用します.私達のロゴを様々なページに埋め込むCOMサイト!
やらなければいけないことは

bundle add bridgetown-inline-svg -g bridgetown_plugins

次に、任意の液体のテンプレートやマークダウンドキュメントでは、svg タグをイメージにインラインにします

{% svg path/to/my.svg %}

あなたも、クラスの名前とディメンションのようなさまざまなHTML属性を設定することができますし、クールな部分は、あなたのSVGファイルは、プラグインによって最適化されるので、彼らは潜在的にも小さいです!

HTMLプラグイン
Bridgetownのような静的サイト・ジェネレータを使用して、CDNNetlify or Vercel , あなたのサイトはすでにインターネット上で最速のいずれかになる可能性があります!しかし、常により多くのパフォーマンスの向上の余地があり、それはどこですかthe bridgetown-minify-html plugin by Mike Rogers 入る.
このプラグインをBridgetown Repoにインストールするだけで、ビルドプロセスの終了時にminalize stepが確立されます.これは、あなたのサイトを再構築するたびに、すべての不要な空白、コメント、および構文解析のために厳密に必要とされていないマークアップの他の部分を取り除くことによってHTML出力を“minify”することを意味します.
結果は、より高速なダウンロード速度と幸せなユーザーの結果あなたのHTMLのための小さな転送サイズです!
ボーナスチップ:また、することができますadd PurgeCSS HTMLプロセスによってアクティブに使用されていないスタイルシート内の任意のCSSコードを取り除きます.パフォーマンスftw!

概要
うわ、何日!あなたは、Graphtownプラグインを使用して頭のないCMSからコンテンツを組み込む方法について学びました、刺激を使用してあなたのサイトにJS Interactiveを加える方法、素晴らしい映像のためにあなたのサイトでSVGイメージを含む方法、そして、あなたの出力HTMLとCSSファイルサイズを最大限に減らす方法スピード.
あなたはBridgetownで何をすることができますか?私は、見つけるのを待つことができません!
超高速かつカスタマイズするのは簡単です独自のウェブサイトを設定するには?Give Bridgetown a try today and let us know how it goes !