More than 5 years have passed since last update.

初めてのホームページ開発手記 part2 Bootstrapとejsでページを作る

Last updated at 2019-10-05Posted at 2019-10-05

ここまでの前提条件

xUbuntuのインストール完了
node.js, Expressのインストール完了
Express Generatorでプロジェクトディレクトリを作成済み

Bootstrapの導入とトップページの作成

Bootstrapの配置

Start Bootstrapからよさげなテンプレートをダウンロードする
[PROJECT]/publicフォルダ配下にcss, vendorフォルダをコピー。

ヘッダー, フッターの作成

今回はejsでページを生成する。
メンテナンス性を考慮し、ヘッダーとフッター部分は部品として別々に作成する

[PROJECT]/views 配下に「partials」フォルダを生成する
「partials」フォルダ内にheader.ejs, footer.ejsファイルを作成する

header.ejsの中身、body開始タグまでを書いておく

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>title</title>

  <!--
   必要なヘッダー情報を記述する
   Start Bootstrap のtemplateのヘッダー部分をコピーすると簡単に作れる  
  -->
  </head>
<body>

footer.ejsの中身, bodyタグ、htmlタグを閉じる

    <!-- Footer  -->
    <footer >
        <!--
   必要なフッター情報を記述する
   Start Bootstrap のtemplateのフッター部分をコピーすると簡単に作れる  
  -->
        <p >Copyright XXX</p>
    </footer>
    </body>
</html>

トップページの作成

[PROJECT]/views/index.ejsからヘッダー、フッターを使用するにはincludeを記述すればよい

<%- include('partials/header'); %>

  <!-- Page Content -->
  <h1>見出し</h1>
    <p>本文</p>
     
<%- include('partials/footer'); %>

以上のような形にしておけば、ヘッダー、フッターのメンテナンスが非常に楽になる。
Start Bootstrapのテンプレートページを使用すると、一瞬でモダンなホームページができました。
あとはこれをベースに自分のページ用に編集していけばよさそうです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up