昨天將月底客家語文學會講座的 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>© 2022 您的網站名稱·<a href="#">隱私權政策</a>·<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>«</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>»</span></a></li>
</ul>
</nav>
用這組 nav 去替換上面三個模板中的 "上一頁" 與 "下一頁" nav 即得如下模板 4 :
結果如下 :
因為是靜態網頁, 所以每一頁的分頁導覽列都必須手動調整各頁網址.
如果不需要側邊欄, 可以將 <aside> 與 </aside> 的部分拿掉, 然後將 <article> 底下的容器樣式從 col-sm-8 改為 col-sm-12 即可, 下面是從模板 3 改成的模板 5 :
如果網頁內容有表格之類很寬的資料時會穿過側邊欄, 使得版面很奇怪, 這時用模板 5 這種無側邊欄的結構就很適合. 通常會在首頁中配置側邊欄, 而網站中其他資料網頁就不放側邊欄.
沒有留言:
張貼留言