2022年8月1日 星期一

GitHub 個人網站設計 (二) : Bootstrap 網頁模板

昨天將月底客家語文學會講座的 GitHub 架站簡報資料寄出後, 覺得意猶未竟, 就從手邊一本旗標出版的 "一步到位 RWD 網頁程式設計" 這本書找到一個不錯的 Bootstrap 網頁範例修改為網頁模板, 只要填入自己的資料就可以製作出美美的個人網站了. 

這個範例是該書第 12 章的 "日光美食部落格", 風格清爽大方, 也適合做個人網站 : 




這網頁右上方的搜尋其實只是版面設計而已, 一般是要到後台資料庫搜尋本站內容, 但 GitHub 只能架設靜態網站, 為了保留整個版面設計, 我參考下面這篇文章將其改為 Google 搜尋 :


事實上只需要在 form 標籤內添加如下三個屬性即可 :

action="http://www.google.com/search" method="get" target="_blank"

我將原範例網頁中的特定內容去除, 加以一般化後成為如下之網頁範本 :


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>您的網站標題</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 導覽列 -->
    <nav class="navbar navbar-default">
      <div class="container-fluid" style="background:#428bca"><!-- 可更改背景顏色 -->
        <!-- 導覽列的頁首 -->
        <div class="navbar-header">          
          <a class="navbar-brand" href="#" style="color:white">您的網站名稱</a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">導覽按鈕</span>
            <span class="icon-bar" style="background:white"></span>
            <span class="icon-bar" style="background:white"></span>
            <span class="icon-bar" style="background:white"></span>
          </button>
        </div>
        <!-- 導覽列的項目 -->
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首頁</a></li>
            <li><a href="#您的網頁1" style="color:white">您的頁籤1</a></li>
            <li><a href="#您的網頁2" style="color:white">您的頁籤2</a></li>
            <li><a href="#您的網頁3" style="color:white">您的頁籤3</a></li>
          </ul>   
          <form class="navbar-form navbar-right" action="http://www.google.com/search" method="get" target="_blank">
            <div class="form-group has-feedback">
              <input type="search" class="form-control" placeholder="請輸入">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
            <button type="submit" class="btn btn-default">搜尋</button>
          </form>
        </div>
      </div>
    </nav>

    <!-- 頁首 -->
    <header>
      <div class="container">
        <h1>您的網站名稱</h1>
        <p class="lead">您的網站簡介</p>
      </div>
    </header>    
    <!-- 內容區 -->
    <hr>  
    <div class="container">   
      <div class="row">
        <!-- 文章 -->
        <article>
          <div class="col-sm-8">
            <h3>您的文章段落1標題</h3>
            <!-- 您的文章段落1內容 -->
            <hr>
            <h3>您的文章段落2標題</h3>
            <!-- 您的文章段落2內容 -->
            <hr>
            <h3>您的文章段落3標題</h3>
            <!-- 您的文章段落3內容 -->
            <hr>
            <nav>
              <ul class="list-inline text-center">
                <li><a class="btn btn-info btn-lg" href="#您的上一篇網頁">上一篇</a></li>
                <li><a class="btn btn-info btn-lg" href="#您的下一篇網頁">下一篇</a></li>
              </ul>
            </nav>
          </div>
        </article>

        <!-- 側邊欄 -->
        <aside>
          <div class="col-sm-3 col-sm-offset-1">
            <!-- 短文側邊框範例 -->
            <div class="panel panel-danger">
              <div class="panel-heading">
                <h3>您的短文側邊框標題</h3>
              </div>
              <div class="panel-body">
                <p>您的短文側邊框內容</p>
              </div>
            </div>
  
            <!-- 連結清單側邊框範例-->
            <div class="panel panel-warning">
              <div class="panel-heading">
                <h3>您的連結清單側邊框標題</h3>
              </div>
              <div class="panel-body">
                <ol class="list-unstyled">
                  <li><a href="#您的連結網頁1">您的連結名稱1</a></li>
                  <li><a href="#您的連結網頁2">您的連結名稱2</a></li>
                  <li><a href="#您的連結網頁3">您的連結名稱3</a></li>
                  <li><a href="#您的連結網頁4">您的連結名稱4</a></li>
                </ol>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>    
    <!-- 頁尾 -->
    <hr>
    <footer>  
      <div class="container">
        <p>&copy; 2022 您的網站名稱&middot;<a href="#">隱私權政策</a>&middot;<a href="#">服務條款</a></p>
        <p class="text-right"><a href="#">Back to top</a></p>
      </div>
    </footer>
  </body>
</html>    

可見此網頁架構是將 Bottstrap 的左邊 8 格作為主要內容區, 右邊 3 格作為側邊欄, 外帶 1 格 offset. 側邊欄使用 Panel 框, 此模板中只用了 pannel-danger 與 panel-warning, 總共有下列 5 種, 會套用不同的背景色 : 
  • pannel-primary : 藍色
  • pannel-success : 咖啡色
  • pannel-info : 淡藍色
  • pannel-warning : 黃色
  • pannel-danger : 紅色
只要將此網頁中以 "您的..." 開頭的部分用自己的資料代替, 其餘都不要動, 首頁取名 index.htm, 其餘網頁都複製此首頁模板去改, 就可以建立美美的個人網站了. 

瀏覽網頁 : 





導覽列的網站名稱也可以換成一個 icon 圖, 只要準備一個 30*30 的圖檔上傳到 GitHub (此處是放在 images 目錄下), 然後將導覽列最前面的網站名稱替換為圖檔即可 :

          <a class="navbar-brand" href="#" style="color:white">
            <img src="images/F.jpg">
          </a>

原始碼如下 : 


瀏覽網頁 : 





如果導覽列上的頁籤有同類性質, 例如連結其他網站的 Facebook 或 Twitter, PTT 等可收納在一個 "社群網站" 的下拉式頁籤中以節省導覽列的空間, 作法參考下面這篇文章的範例 7 :


與一般頁籤單純為 li 標籤內包 a 標籤不同之處是, 它的 li 元素要添加 dropdown 樣式, a 元素要添加 dropdown-toggle 樣式與 data-togle 屬性, 然後後面加一組樣式為 dropdown-menu 的 ul-li 清單選項組, 用來放被收納的頁籤, 這些書籤若有需要也可以用樣式為 divider 的 li 標籤區隔, 具體作法如下 : 

            <!-- 下拉式頁籤 -->
            <li class="dropdown"> 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">
                <label>您的下拉式頁籤1</label>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁1</a></li>
                <li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁2</a></li>
                <li class="divider"></li>
                <li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁3</a></li>
              </ul>
            </li>

將上面網頁碼添加到模板 1 中的導覽列成為如下之模板 3 : 

 

結果如下 : 




如果需要多個下拉式頁籤, 只要複製貼上再修改即可. 

上面的範本中首頁底下有 "上一頁" 與 "下一頁" 兩個按鈕來循序切換文章頁面, 也可以改用分頁導覽列 (pagination bar), 這樣就不需要逐頁切換, 可以直接跳頁了. 分頁導覽列如下 : 

            <nav>
              <ul class="pagination">
                <li><a href="#您的第1頁文章網頁" aria-label="Previous"><span>&laquo;</span></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#您的第2頁文章網頁">2</a></li>
                <li><a href="#您的第3頁文章網頁">3</a></li>
                <li><a href="#您的第4頁文章網頁">4</a></li>
                <li><a href="#您的第5頁文章網頁">5</a></li>
                <li><a href="#您的第6頁文章網頁" aria-label="Next"><span>&raquo;</span></a></li>
              </ul>
            </nav>

用這組 nav 去替換上面三個模板中的 "上一頁" 與 "下一頁" nav 即得如下模板 4 :


結果如下 : 




因為是靜態網頁, 所以每一頁的分頁導覽列都必須手動調整各頁網址.  

如果不需要側邊欄, 可以將 <aside> 與 </aside> 的部分拿掉, 然後將 <article> 底下的容器樣式從 col-sm-8 改為 col-sm-12 即可, 下面是從模板 3 改成的模板 5 : 

如果網頁內容有表格之類很寬的資料時會穿過側邊欄, 使得版面很奇怪, 這時用模板 5 這種無側邊欄的結構就很適合. 通常會在首頁中配置側邊欄, 而網站中其他資料網頁就不放側邊欄. 

沒有留言:

張貼留言