Hugoでのライブ編集

バイライムバイ
Bookshop 私たちのオープンソースのページを構築するツールキット-今Hugoだけでなく、ジキルとエレベーターをサポートします.
あなたが我々のミスBookshop launch post 昨年の10月には、クイック要約:ここでBookShopは、あなたのスタックとビルドコンポーネントを統合し、UIコンポーネントをローカルにブラウズし、エディタの豊富なビジュアルページ構築体験を提供します.Bookshopはあなたのコンテンツ管理ニーズのためにCloudCannonと密接に統合されます.エディタは、利用可能なコンポーネントのカタログ全体を見ることができますし、ページを構築するためにそれらを使用して視覚的に、すべてのカスタマイズされたコンポーネントライブラリによって供給されます.
機能開発は、自動視覚データのバインディング、エレベータ1.0サポート、および豊かなヒューゴの統合を追加するリリース以来、数ヶ月で続けてきました.

ライブプレビュー
HugoとBookshopについて議論する前に、CloudCannonでの変更をプレビューするために何を意味するのか、そしてBookshopがなぜそれをスタックに統合するのに役立つのかの基礎的な理解を得るべきです.畝
ライブプレビューのために使用するCloudCannonの最初の機能はLive Editing API . この新しい機能は、視覚的なエディタに固有の場合は、指定されたページ上のフロント問題の双方向制御を提供します.ライブ編集APIは、ライブプレビューのコアビルディングブロックです.JavaScriptは、ライブ編集APIからイベントをキャッチし、ページに必要な変更を行います.畝
JavaScriptのSSGであなたのサイトを構築したならば、これらの変更は些細な仕事ですReact and Svelte 箱からそれを配線するコネクタ.しかし、あなたが純粋なSSGにいるならば、Jekyll、Theentiesとヒューゴ群衆－あなたは、このステップがなぜ挑戦を提供するかについて見ることができます.どのように、あなたはデータが変わるとき、ページで何を更新するべきかについてわかっていますか?(スポイラー:書店は知っている)
ページビルダー機能セットの次はVisual Data Bindings . これらのバインディングは、CloudCannonにページの領域を関連付けるよう指示します.これにより、CloudCannonはビジュアルエディタでポップアウトを提供することができ、オブジェクトを追加したり、オブジェクトのサイドバーを通してオブジェクト(内部の配列)内でハントすることなくコンテキストを編集することができます.畝
ページ構築経験の最後の柱はStructures . 意味のあるページをデータから構築するには、そのデータに対していくつかの構造を必要とする(読み取り:コンポーネント)編集者がページに項目を追加および削除することができます.構造体では、特定の場所に追加、削除、再配置を行うオブジェクトのリストを定義できます.畝
これらの成分を使用すると、CloudCannon以内に完全に紹介ページビルダーを構築することができます.エディターでは、ビジュアルデータバインディングをクリックしてパネルを開き、コンポーネントの配列に新しい構造体を追加します.
サイトにこのシステムを構築することは非常に強力ですが、それはまた、それを取得し、実行するための多くの作業することができます.これは我々が最終的に書店に到達し、なぜ我々が構築し、維持する場所です.

書店
今、我々は我々が遊んでいるゲームを知っている、どのようにブックショップは、画像に収まりますか?畝
ブックショップは、あなたのサイトを構築する方法でいくつかの規則が必要です.コンポーネントは、ブックショップディレクトリ内の特定の構造に住んでおり、スキーマファイルは各コンポーネントと一緒に住んでいます.あなたのワークフローにこれらの微調整の外に、Bookshopは道から出ます-あなたのレイアウトの中で、あなたはあなたのような書店タグを使用します、あるいは、部分的です.畝
それ自身で、それは画期的なものではありません、しかし、フードの下の規則のため、Bookshopはあなたのために全体のページビルダーを一緒に置くことができます:

各コンポーネントに対して書き込むスキーマファイルはCloudCannon構造体に変わります.

各コンポーネントはビジュアルデータバインディングを受け取ります.

フロントエンドへの変更は、ライブ編集APIを通過し、サイト上のすべてのコンポーネントの内容を再表示します.

書店ワークフロー
コンポーネントは、Bookshopコンポーネントディレクトリでその寿命を開始します.Hugoについては、我々はヒーローコンポーネントを書くcomponents/hero/hero.hugo.html . このファイルは他の場所で書くかもしれないhugo部分と同じです、そして、あなたはそれの中で最もヒューゴ機能を持ちます.畝
と並んでhugo.html ファイルを書き込みますhero.bookshop.toml ファイル-これはコンポーネントの設定です.次のようになります.

    [component]
    structures = ["content_blocks"]
    label = "Hero"
    icon = "title"

    [props]
    title = "Lorem Ipsum"
    style.select = ["Large", "Compact"]

中[props] このコンポーネントが取るフィールドを定義します.コンポーネントのブラウザで見ることができるいくつかの例を示します.これをコンポーネントスキーマと考えることができます.書店用途[props] Cloudcannonで構造を作成するにはこのファイルの特別なキーワードは、共通のCloudCannon機能へのショートカットとして存在します.この場合、style.select CloudCannon選択入力を設定しますstyle キー付きLarge and Compact オプションとして.
The [component] セクションは、構造を置くブックショップに指示します.ここで重要な部分はstructures 上記の例では、「エディタは、主人公のコンポーネントを前の項目の任意の配列に追加できます.」content_blocks .”
CloudCannonでは、エディタが次のように表示されます.

適切な構造でタグ付けされたコンポーネントの設定ファイルが自動的にこれらのmodalsを設定します.
ユーザーが新しいを追加するときに生成されたフロント問題でピークを取るHero コンポーネント

    content_blocks:
      - _bookshop_name: hero
        title: My Title
        style: Large

このオブジェクトはよく見るべきです.私たちが以前に書いたコンポーネントの設定は、以前に見たフィールドを作成しましたstyle 今すぐ選択したオプションが表示されます.さらに、我々は_bookshop_name このコンポーネントを識別する書店によって生成されるフィールド.畝
Hugoのページの上にこれを得るために_bookshop_name 鍵キーはbookshop 部分的に直接

    {{ range .Params.content_blocks }}
      {{ partial "bookshop" . }}
    {{ end }}

ヒント:あなたの書店からのファイルだけが、ビジュアルエディタでのライブを更新しますので、ブックショップのコンポーネント内で上記のループを配置すると、content_blocks 配列が正しくページを更新します.どのようにstarter template この例を例に挙げます.
これらの手順で、私たちのページビルダーの重要な部分を作成しました.あなたが更新のライブを見る前に設定するいくつかのワンオフの作品があるので、必ずHugo Bookshop Guide これをサイトにセットしながら.一旦すべてが完了したら、あなたの編集者はページの上でコンポーネントを加えて、編集して、削除して、再配置することができます.

あなたが新しいプロジェクトを転がして、または、マイクロサイトの艦隊を維持しているビジネスで代理店を運営するかどうかにかかわらず、Bookshopはあなたがリッチで、カスタマイズされた構成図書館であなたのエディタに権限を与えることができます-間、次の大きいものに取り組むために.Hugoモジュールシステムでは、古いサイトに新しいコンポーネントをもたらすことができますし、時間をかけて編集経験を強化する.
我々は最初にBookshop 2.0でジキルとコミュニティコミュニティにこのワークフローをもたらしました、そして、我々は我々の顧客がこのスタックに建設した豊富な文脈編集の多くの素晴らしい例を見ました.私は個人的に非常に今このワークフローをhugoで利用できるように興奮している.畝

始める
始める最良の方法はHugo Bookshop Guide とチェックアウトBookshop Hugo Starter テンプレート.これらのリソースは、Hugoのブックショッププロジェクトがどのように一緒に接続するかを説明し、スターターテンプレートはCloudCannonビジュアルエディタで機能する簡単なページビルダーの例を提供します.あなたが動けなくなるならば、手を必要としてくださいBookshop issues GiThubまたはアプリのサポートチームと連絡を取る.