Bootstrap5を使ったレビュー一覧画面を作りました。
概要
2019年に作成したプログラムを改修し、bootstrap5を利用したレビューの一覧画面を作成しました。
テンプレートはWordPress用ではなく、自ら開発する方向けとなっています。
例えば、現在作成しているサービスのレビューサイトへ追加するといったことが可能です。
開発時にvuejsやreactjsに移行しやすいようにjavascriptの実装は最低限としているため、動きのあるテンプレートではありません。
ご利用方法や詳細については下記を参考にお願いいたします。
ビルド済みのファイルについては含まれません。
理由としては、webpackを利用してファイルをビルドしているため、ビルド済みのファイルを含めると参照パスが正しく設定されないためです。
動作を確認する場合、後述のビルドコマンドを実行してください。
サンプル画像
購入はこちらからできます。
https://samplecodes.uc.r.appspot.com/checkout/start/3
レビュー一覧テンプレートについて
以下の機能が含まれています。
- レビュー評価のプログレスバー
- レビューの一覧
- レビューの一覧をソートするセレクトボックス
- レビューを投稿するためのモーダルウィンドウ
- ページング用のリンク
- mobile向けのレスポンシブ機能
- 表示しているレビュー位置 (例: 1 - 10 of 20 review)
レビューの内容は以下の要素が含まれています。
- タイトル
- 投稿日時 (例: 2019-07-25 post)
- レビューの内容
- レート (星の数を表示)
利用する際に必要なスキルについて
- htmlを書けること
- javascript or typescriptを書けること
- webpackによるビルド方法がわかること
- css or scssを書けること
購入ファイルについて
. ├── package-lock.json ├── package.json ├── readme.md ├── src │ ├── assets │ │ ├── reset │ │ │ ├── normalize.scss │ │ │ └── scripts.ts │ │ └── review │ │ ├── scripts.ts │ │ └── styles.scss │ └── html │ └── index.html ├── tsconfig.dev.json ├── tsconfig.json ├── tsconfig.prod.json ├── webpack.base.config.js ├── webpack.dev.config.js └── webpack.prod.config.js
動作環境について
- node: v16.1.0
- npm: 7.11.2
利用方法について
利用する際は以下のように利用してください。
- npm install
- npm run webpack-dev
- webpackによってビルドが行われ、distフォルダが作成されます。
- src/html/index.htmlを開きます。
webpack-prodを実行すると、プロダクション環境へデプロイするためのコードを生成できます。 具体的な設定については、以下のファイルを確認してください。
- tsconfig.prod.json
- webpack.prod.config.js
購入はこちらからできます。
https://samplecodes.uc.r.appspot.com/checkout/start/3
