@naporin0624/flat-shop-ui NPM

UI 開発基盤

セットアップ

git@github.com:naporin0624/flat-kobo-makeshop-design.git
cd flat-kobo-makeshop-design/
docker-compose up -d
npm install
npm run dev # <-- これで javascript の開発できるようになる

localhost:8080 でアクセス

一部 Linux 環境で Permission Error が発生する件

一部の Linux 環境ではコンテナ内の Apache 実行ユーザーをコンテナ実行ユーザーに合わせる必要があります。

id
> uid=xxxx(user) gid=xxxx(user)

この uid と gid を .env に記述

UID=xxxx
GID=xxxx

ディレクトリ構成

html/theme/data/以下にデータファイル(.json)、html/theme/templates/以下にテンプレートファイル(.tpl)を配置します。

html/ : Apache document root
- theme/
  - data/ : テンプレートから呼び出すデータ
    - data1.json
    - data2.json
    - data3.json
    - ...
  - templates/ : テンプレートファイル
    - module/ : モジュール (テンプレートから{$module.header}等で呼び出し)
      - header.tpl
      - footer.tpl
      - side_bar.tpl
      - ...
    - page1.tpl
    - page2.tpl
    - page2.tpl
    - ...

theme/以下のファイルには/以下でアクセス可能です。(例: theme/assets/style.css -> /assets/style.css)

サンプル

データファイル (html/theme/data/data.json)

{
  "page": {
    "title": "デザインテンプレート開発環境",
    "css": "/assets/style.css"
  },
  "shop": {
    "name": "ショップ名"
  }
}

上記 page と shop は別ファイルに分割することも出来ます。

data1.json

{
  "page": {
    "title": "デザインテンプレート開発環境",
    "css": "/assets/style.css"
  }
}

data2.json

{
  "shop": {
    "name": "ショップ名"
  }
}

テンプレート (html/theme/templates/top.tpl)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><{$page.title}></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="<{$page.css}>" />
  </head>
  <body>
    <{$module.header}>
  </body>
</html>

テンプレートモジュール (html/theme/templates/module/header.tpl)

<h1><{$shop.name}></h1>

License

MIT License

release

機能修正・追加ごとに以下のコマンドを実行してください。

npx changeset add

それぞれの変更に対して、以下のように変更の種類を選択してください。

patch
- バグ修正
minor
- 機能追加
major
- 破壊的変更
- 特大リリース

変更の種類を選択すると、CHANGELOG.md に記載される変更内容の入力が求められるので、変更内容を記載してください。