前に書いたように 、Squarespaceにはすぐに使える機能がたくさんあり、すぐに「向きを変えて」ブログ、ギャラリー、ストアを作成できます（ただし、 Stripeのみを使用します）。 また、各ページ（ブログ、ギャラリー、カスタムコレクション）にアクセスしてJSON-eで応答を取得できるため、モバイルアプリケーションをすばやく作成することもできます。 これは、動的なコンテンツの読み込みを行うより深刻なアプリケーションを構築するときにも使用できます。 ただし、Squarespaceの多くの機能（画像の読み込みとサイズ変更、組み込みマークアップブロックの初期化と操作、ギャラリー、フォーム、ソーシャルネットワーク用のウィジェットなど）は、クライアント上で機能し、サーバーパーツと対話します。 APIのドキュメントも、組み込み関数の動作の説明もありません。コードを掘り下げて、自分で行ってください。
そのため、ページでAJAXリクエストを行って必要なコンテンツを取得しても、カスタムブロックが機能せず、画像が読み込まれない場合は、habracatをリクエストします。
Squarespaceフロントエンド全体がYUI上で回転し、ライブラリは十分に文書化されていますが、Squarespaceは多くのモジュールを使用しているため、 YUIを使用して作成する人でも、何が何であるかを理解するには時間がかかります。 私は既に1つのプロジェクトに費やしており、ここで喜んで共有します。誰かの助けになるかもしれません。自分で忘れないでしょう（すべてを成し遂げることはできません）。
ユーザーまたはクライアントがページを作成するSquarespaceのすべての組み込みブロックは、ページの読み込み後に初期化されます。 つまり、「/ yoursite / mainpage？Format = json」という形式のアドレスを持つAJAXリクエストでページをリクエストすると、data.mainContentのレスポンスでページのhtmlコンテンツが取得されます。 このコンテンツをDOMに追加すると、カスタムブロックは機能せず、画像は読み込まれません。
1.画像を発送する
ドキュメントに次のように記述されているため、画像を読み込む問題は即座に解決されます。コンテンツを読み込んだ後、data-image属性を持つすべての画像をローダーで「駆動」するだけです。
new Y.Squarespace.Loader({ img: Y.all('img[data-image]') });
さらに、不必要なコメントなしで、カスタムブロックの初期化に役立つ関数を提供します。 これらの関数は、ドキュメントからはanswer.squarespace.comにもstackoverflow.comにも記載されていないため、すでにコードからキャッチする必要がありました。
2.フォームを初期化する
そのため、ページでライトボックス付きのフォームが使用されている場合（ボタンをクリックすると開きます）、AJAX後にすべてが機能するようにするには、この関数を呼び出します。
function initFormLightBox() { Y.all('.form-block').each(function () { var h = this; if (h.one(".form-wrapper")) { var b = h.one(".form-wrapper").remove().removeClass("hidden"); h = h.one(".lightbox-handle"); if (!h.getData("lightbox")) { var g = b.cloneNode(!0), d = new Y.Squarespace.Widgets.FormLightbox({ content: g, render: Y.one("body") }); Y.Squarespace.FormRenderingUtils.checkPreSubmit(g); d.on("close", function () { var c = b.cloneNode(!0); d.set("content", c); Y.Squarespace.FormRenderingUtils.checkPreSubmit(c) }, this); h.setData("lightbox", d) } h.detach("click"); h.on("click", function (a) { a.halt(); d.open() }, this) } }); } });
3.ライトボックス内の画像
ライトボックスで開く画像を初期化するには、次を使用します。
function initImageLightBox() { Y.all('.image-block-wrapper.lightbox').each(function () { var e = this; if (b = e.one("img[data-image]")) if (b = b.loader) { e.get("parentNode"); b = { content: b.getBareElement() }; if (c = e.getAttribute("data-description")) b.meta = c; e.plug(Y.Squarespace.Lightbox2Plug, { lightboxOptions: b }) } }); }
4.ギャラリー、ビデオ
ギャラリー、Instagram、Flickr、500pxブロック、ビデオブロックを初期化するには：
function initGallery() { Y.all(".sqs-block.gallery-block, .sqs-block.flickr-block, .sqs-block.instagram-block, .sqs-block.fivehundredpix-block, .sqs-block.video-block").each(function (b) { Y.Squarespace.GalleryManager.initializeBlock(b) }) }
5.カード
マップのあるページの場合、次の関数を使用します。
function initMap() { Y.all(".sqs-block.map-block[data-block-json]").each(function (b) { Y.Squarespace.Rendering.renderMap(b.one(".sqs-block-content"), Y.JSON.parse(b.getAttribute("data-block-json"))) }); }
何らかの理由で、SquarespaceはGoogleマップのグレースケールフィルターがスタイリッシュであると判断し、パラメーターなしでコンストラクターに「スタック」するため、フィルターを作成せずに、または独自のフィルターを使用せずにマップをCodeブロックに挿入するか、標準のrenderMap（）を書き換えます。
6.サイトの日付の国際化とフォーマット
この項目は、以前のテーマとはあまり関係がありませんが、Squarespaceはロシア語をサポートしていないため、まだ必要です。 最終的にMoment.jsまたは類似のライブラリを使用して再フォーマットとローカライズを行うことができますが、 YUI自体がローカライズを完全にサポートしているのに、なぜ引っ張りすぎたり自転車を書いたりするのでしょうか？ したがって、私は主にこのような単純なソリューションを使用します。ここでは、再フォーマットに必要な要素クラスを指定します。
function formatTime() { Y.Intl.add("datatype-date-format", "ru-RU", { "a": ["", "", "", "", "", "", ""], "A": ["", "", "", "", "", "", ""], "b": [".", ".", "", ".", "", "", "", ".", ".", ".", ".", "."], "B": ["", "", "", "", "", "", "", "", "", "", "", ""], "c": "%a, %d %b %Y %k:%M:%S %Z", "p": ["AM", "PM"], "P": ["am", "pm"], "x": "%d.%m.%y", "X": "%k:%M:%S" }); Y.Intl.setLang("datatype-date-format", "ru-RU"); Y.all('time.published').each(function () { var time = new Date(this.getAttribute('datetime')); var format = Y.Date.format(time, {format: "%d %b, %Y"}); this.setHTML(format); } ); Y.all('time.summary-metadata-item--date').each(function () { var time = new Date(this.getAttribute('datetime')); var format = Y.Date.format(time, {format: "%d %b, %Y"}); this.setHTML(format); } ); }
PS
誰かがSquarespaceプラットフォームでそのような決定を蓄積した場合、PMまたはコメントでそれを共有することをお勧めします。これを記事に追加します。