2021年6月12日 星期六

GitHub 個人網站設計 (一) : 頁首 logo 與主架構

去年在 GitHub 上架設了個人網站 (只能靜態), 當時只是暫時用 jQuery UI 的手風琴結構寫了簡單的首頁就沒再繼續, 因為我主要是把 GitHub 當成是測試網頁的分享寄存空間而已, 參考 : 


最近幫湘雲老師架設 WordPress 網站時需要用 Javascript 做一些簡單的資料處理, 所寫的小程式打算整理起來放在網站中以便查找, 所以今天就花了點時間設計了一下個人網站的架構. 理工人的網站只要清爽樸素就好, 不需要太花俏 (實話是 : 缺乏藝術細胞).  

資料歸納整理適合使用頁籤 (tab) 結構, 我一直很喜歡 jQueryUI 的 hot-sneak 主題佈景, 所以就用此布景套在頁籤結構上作為首頁的版型, 當然上面還要再放個網站標誌圖檔, 基本上就是使用兩個 div 元素上下堆疊而成, 上面放 logo, 下面放 tab, 網頁碼如下 :

    <div style="text-align: center;">
      <img id="logo" src="images/logo.jpg">
    </div>
    <div id="tabs">
      <ul>
        <li><a href="home.htm">首頁</a></li>
        <li><a href="test.htm">網頁測試</a></li>
        <li><a href="tools.htm">小工具</a></li>
      </ul>
    </div> 

關於 jQueryUI 的頁籤參考 :


因為 tab 預設是佔滿整個頁面寬度 (頁籤靠左), 為了讓 logo 圖檔也能置中佔滿整個螢幕寬度, 所以將這個圖檔元素的 div 容器加上了 text-align: center 的樣式, 同時須給予一個 id 屬性, 用來根據 tab 頁籤來動態調整其寬度, 這就要用到 jQuery 物件的 width() 方法了, 此方法沒傳入參數為 getter, 會傳回物件之寬度, 有傳入參數時是 setter, 可設定元件之寬度, 控制程式碼如下 : 

    <script>
      $(function(){
        $("#tabs").tabs();
        $("#logo").width($("#tabs").width());
        });
    </script>

首先是呼叫 tab 物件的 tabs() 方法初始化頁籤結構, 然後呼叫其 width() 方法取得頁籤的寬度, 並將其傳入 logo 圖檔物件的 width() 方法來設定圖檔寬度. 

接下來只要製作 logo 圖檔再上傳到 GitHub 就可以了. 

我的構想是用一個狐狸頭像再加上網站名稱就好了, 首先於 Picpick 新增一個 1040x100 的空白圖片, 打上微軟正黑體字型大小為 36 的紫色網站名稱 "小狐狸事務所 の 網路實驗室", 然後外面套個方框 :




左邊的空白就是放狐狸頭像的地方, 我用 "fox png free" 搜尋谷歌找到下面這個免費圖檔網站 :


挑中其中這張狐狸圖樣 : 




下載後用 PicPick 開啟擷取其頭像並同比例縮小為高度 100px 的圖檔, 將其複製後貼到 logo 圖檔的左方空白區 : 




哈哈, 果然簡單又樸素. 

存檔為 logo.jpg 後先到 GitHub 個人網站根目錄下新增一個 images 子目錄 : 





然後將此 logo.jpg 圖檔上傳到 GitHub 個人網站的 images 子目錄下即可. 

最後修改原先的首頁檔 index.htm 如下 : 

<!DOCTYPE html>
<html>
  <head>
    <title>小狐狸事務所 の 網路實驗室</title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:90%;}
    </style>
  </head>
  <body>
    <div style="text-align: center;">
      <img id="logo" src="images/logo.jpg">
    </div>
    <div id="tabs">
      <ul>
        <li><a href="home.htm">首頁</a></li>
        <li><a href="test.htm">網頁測試</a></li>
        <li><a href="tools.htm">小工具</a></li>
      </ul>
    </div>
    <script>
      $(function(){
        $("#tabs").tabs();
        $("#logo").width($("#tabs").width());
        });
    </script>
  </body>
</html>

將此 index.htm 上傳覆蓋原來的檔案就大功告成啦! 成果如下 : 




在手機上瀏覽效果如下 : 




可見頁首圖檔的確會隨螢幕大小而變. 

其實也曾試用過 CSS3 新的寬度比例單位 vw, 也就是將 logo.jpg 的樣式設為 style="width: 100vw;", 這與以前的 100% 是類似效果, 但實測發現 100vw 會使圖檔右邊比頁籤多出一點, 調成 98vw 或 99vw 雖可改善, 但在手機上仍然會突出, 使頁面顯得不協調, 所以就不採用此方法了, vw 詳細用法參考 :  


網站目前只是空殼子, 有空再來慢慢整理. 

沒有留言 :