このサイトは Nuxt 3 を使用しています。 コンテンツ管理には Nuxt Content を使用しています。 スタイルには Tailwind CSS を使用しています。
- Node.js
- VSCode
一応、GitHub上でコードを編集することもできますが、VSCodeを使うことを推奨します。 ただし、Contentの追加・編集のみであればGitHub上で作業しても大丈夫だと思います（ローカルで開発する場合にはプルして差分を更新すること）。
このリポジトリをgit cloneした後、依存関係をインストールしてください。
# npm
npm install開発サーバーを起動するには、以下のコマンドを実行してください。
npm run dev通常であれば、http://localhost:3000で開発環境が起動します。
ローカル環境で開発している場合、git pullしてリモートリポジトリの変更を取り込んでください。
画像とコンテンツ以外の定期的な変更は、基本的に必要ありません。 このサイトを使い続ける場合でページデザインの変更等を行う際には、可能な限りウェブ開発（特に、Vue/Nuxtを触ったことがある人が望ましいがこれに限らない）が得意な人にお願いしてください。
画像は、/public/imgディレクトリ以下に配置してください。
拡張子は.jpgに統一してください。別の拡張子を使用すると、場合によってコンポーネントが画像を認識できないことがあります。
修正する場合には、/componentsディレクトリ以下のコンポーネントを確認してください。
例えば、ページタイトル部分の背景画像は/components/utilities/PageTitle.vue内で指定しています。
メンバー画像については、/public/img/membersディレクトリ以下に配置してください。
コンテンツはcontentディレクトリ以下に配置してください。
content
├── news
│ └── TITLE.md
├── members.json
├── publications.md
├── research.json
└── schedule.jsonnewsディレクトリには、ニュース記事をMarkdown形式で配置してください。
ファイル名は、記事タイトルを端的に表す英語表現にしてください。
ファイルの先頭には、以下のように記事のメタデータを記述してください。
---
title: 記事タイトル
description: 記事の説明
date: YYYY/MM/DD
---titleがMarkdownファイルのHeading 1を表すことになるため、記事の内容を記述する際には## 見出しから始めてください。
詳細は、すでに配置済みの記事を参考にしてください。
members.jsonには、学生メンバーの情報をJSON形式で配置してください。
先生の情報は、直接/pages/members.vueに記述しているので、必要に応じてそちらを更新してください。
このファイルの大まかな構造は以下のとおりです。
{
"graduate": [], // 現在所属している大学院生
"bachelor": [], // 現在所属している学部生
"graduated": { // 卒業生
[
"year": "卒業年度",
"member": []
]
}
}現在所属している学生（graduate、bachelor）は、以下のような構造にしてください。
{
"name": "学生氏名",
"img": "画像ファイル名（拡張子は省略）",
"belonging": "学年",
"theme": "研究テーマ",
"message": "趣味等の追加情報を1行で"
}卒業生の情報は、以下の構造にします。
{
"name": "学生氏名",
"belonging": "学位",
"theme": "研究テーマ",
}publications.mdには、研究業績をMarkdown形式で配置してください。
すでに配置済みのファイルを確認し、フォーマットに従ってください。
ナンバリングについて、1.をつければ自動的にナンバリングされます。
確認していませんが、番号がバラバラでも自動的にナンバリングされると思います。
research.jsonには、研究内容をJSON形式で配置してください。
これは、トップページ（index.vue）にカード形式で表示される内容です。
[
{
"title": "研究テーマ",
"description": "研究内容の説明",
"img": "画像ファイル名（拡張子は省略）"
}
]about.vueの研究紹介については、直接/pages/about.vueに記述しているので、必要に応じてそちらを更新してください。
schedule.jsonには、スケジュールをJSON形式で配置してください。
[
{
"type": "", // 年間、週間
"items": [
{
"time": "", // 時間
"content": "" // 内容
}
]
}
]新しくページを作成する場合、以下のルールに従ってください。
- Tailwind CSSを使用する。
- 見出しの大きさは、
h1からh6までの6段階で表現し、以下の表のようにClassを付与する。- 見出しには
font-boldを付与して、太字にする。
- 見出しには
| Heading | Tailwind Tag |
|---|---|
| h1 | text-3xl lg:text-5xl |
| h2 | text-2xl lg:text-4xl |
| h3 | text-xl lg:text-3xl |
| h4 | text-lg lg:text-2xl |
| h5 | text-base lg:text-xl |
| h6 | texr-base lg:text-lg |
ヘッダーやフッターのレイアウトは、/layouts/default.vueで定義しています。
ヘッダーのリンクを表示するコンポーネントは、/components/Header.vueです。
リンクそのものの定義は、レイアウトファイルの冒頭に以下のように記述しています。
const links = [
{
title: 'About',
link: '/about'
},
{
title: 'News',
link: '/news'
},
{
title: 'Laboratory',
link: '/laboratory'
},
{
title: 'Publication',
link: '/publication'
}
]フッターのコピーライト表記の年数は、自動的に生成されています。
{{ new Date().getFullYear() }}