[スプリング掲示板]3ホームページ

[ガイドバー]

いわゆるガイドバー

フロントエンドの設計は開発者によって異なり、コラボレーション時に困難に直面する可能性があります.これらの困難を解決するために,twitter開発者は反応型Webを開発するためのHTML,CSS,JSフレームワークを開発したが,これがガイドである.
各クラスのCSSとJSのコードを事前に生成し、各ラベルに対応するclass値があることを確認すると、設計が有効になります.

スタートストリップテンプレート

ユーザー間でガイドバーを使用して設計されたテンプレートも提供されます.下部のテンプレートを元に、必要に応じて変更しました.

https://startbootstrap.com/template/blog-post

[ホーム設定]

上端バー

『LOGO』『Home』『Popular』『MyPage』からなるlogoとHomeは「/」に移動し、popularは人気投稿に移動し、MyPageはユーザーの詳細に移動します.

投稿

パブリッシャープロファイル画像、パブリッシャID、パブリッシング写真、パブリッシング記事を出力します.サブスクリプション機能が追加され、サブスクリプションユーザーの投稿はホームページでのみ出力できます.

いいですね。

投稿賛機能を追加する準備をします.ユーザーが「いいね」をクリックした場合は、「赤いハート」と表示されます.以下に投稿の賛数も出力されます.

メッセージ

招待状の上で伝言を残すことができて、同じく招待状の上で伝言を残すことができます.

ブット

付加機能はありませんが、下端のツイッターも追加されました.

[時間軸テンプレートの破片]

テンプレートセグメント:

ヘッダー、フッターなど、すべてのページに共通してアクセスします.これらの部分を事前に作成し、必要な部分を再利用すれば、メンテナンスに有効です.時間軸は、これらの機能をテンプレートの一部として提供します.ヘッダーやツイッターなどのタグ属性でth:fragment=「フラグメント名」を宣言します.
タグ属性では、

ヘッダー、ツイッターなど、th:fragment=「フラグメント名」宣言

必要な部分でth:replace=「ファイルパス:::フラグメント名」を使用します.

テンプレートセグメントの使用

すべてのファイルに共通するタイトル部分.th:fragment=「fragment-header」テンプレートフラグメントを宣言します.各ファイルにheadを追加できるので、headを直接フラグメント化するのではなくdivをフラグメント化します.

story.htmlで使用します./layout/header.htmlのfragment-headerを置き換えます.

[CSSとJSを含む]

絶対パスの使用

<link href="/css/styles.css" rel="stylesheet" />
<script src="/js/story.js?ver=1"></script>

上記のようにhtmlから外部cssとjsをインポートできます./で始まる絶対パスを使用します.相対パスを使用すると、現在のファイルの場所を基準としてインポートされるため、位置に歪みが発生したり、ファイルの場所が変更されたりすると、適用できない問題が発生します.
ただし、ページのプロパティを見ると、プロジェクトのパッケージが直接表示される場合もあります.

キャッシュファイルの使用を避ける

CSS、JSがHTMLからインポートして使用できない場合があります.この場合、パスが無効であるか、以前にキャッシュされたCSSとJSをインポートして処理するのに適していない可能性があります.後者の場合、ブラウザが別のJS、CSSファイルであることをクエリーパラメータで伝えると、正しく適用されます.

<script src="/js/story.js?ver=1"></script>

[ビューマッピング]

ImageController

ImageControllerは、Urlに対する画像関連ビューstoryおよびpopularのマッピングを要求する.

UserController

UserControllerは、ユーザ関連ビューprofile、update、uploadのマッピングをUrlに要求する.