2022年8月18日 星期四

好站 : Python 3.10 線上解譯器 : CoderPad

今天在測試 Python 的亂數模組時, 在 Python API 文件中看到 random.randrange() 項目下有 "Deprecated since version 3.10" 字樣卻沒仔細看後面內容, 誤以為此函式已經在新版 3.10 版遭到器用, 於是想找個線上 Python 解譯器來驗證一下 (因為手邊不論筆電還是桌電都只有 3.6~3.8 版), 但找了許多個網站都沒上到 3.10 版, 甚至 Python 官網也只有 3.9 版而已 :

# https://www.python.org/shell/

就在想放棄的時候, 所幸找到下面這個網站 coderpad.io : 


用下列程式碼測試它的線上解譯器是 3.10.5 版 :

from platform import python_version
print(python_version())




不需要註冊就可以直接使用其 Python 線上解譯器, 如果註冊並建立一個 team 的話, 會獲得 7 天免費全功能試用, 且程式可以儲存在擋案系統中 :




可見它提供了擋案系統與資料庫, 所以可以在此平台上用 Flask/Django 架站. 




登入後要寫程式就按右上角的 "Create Pad", 提供超過 30 種語言 : 

 


即使沒有註冊也是可以執行程式的. 

我執行下列程式確認 randrange() 在 3.10 版可以正常執行 : 

import random
print(random.random())
print(random.randrange(1, 10, 2))




回去再看一下 Python 文件, 原來它講的 "Deprecated since version 3.10" 是指 randrange() 的傳入參數是浮點數時的處理方式, 我在筆電 (3.7.2) 會觸發 ValueErroe : 

Python 3.7.2 (C:\Python37\python.exe)
>>> import random
>>> random.randrange(1, 5)
1
>>> print(random.randrange(1.2, 10.6, 2))
Traceback (most recent call last):
  File "<pyshell>", line 1, in <module>
  File "C:\Python37\lib\random.py", line 186, in randrange
    raise ValueError("non-integer arg 1 for randrange()")
ValueError: non-integer arg 1 for randrange()

但在 coderpad.io 則是觸發 TypeError : 




這樣總算是釐清疑惑了, 而且也找到一個很棒的資源, 有空可以用它來測試 Python 3.10 的新功能, 參考 : 


好書 : 一行指令學 Python : 用機器學習掌握人工智慧

上個月從市圖借到這本書, 昨天發現被預約須先還, 但我只看了前三章而已, 所以就想說乾脆買下來唄! 因為此書作者另一本著作 (一行指令學 Python : 用 Pandas 掌握商務大數據分析) 我之前有買, 寫得非常好 (是初學者最佳 Pandas 入門書), 但全華的書折扣都不多, 只找到下面這個蝦皮賣家的較便宜 (85 折) : 





昨天正想下標購買, 卻發現母校圖書館有ㄟ, 那就緩一緩先借, 這個先記下來, 以後有需要再買了. 此書主要是講傳統機器學習, 不包含深度學習, 前面先複習 Pandas 後接著介紹 Sklearn 資料前處理, 迴歸, 支援向量機 .... 等, 徐老師的書都是深入淺出的操作型範例, 非常好懂. 

蝦皮買書一本 : 初學Jetson Nano不說No:CAVEDU教你一次懂

最近整理筆記時找到之前追蹤的一本市圖搜尋到的書, 但卻好久都沒上架, 到底是進書了沒有? 我上母校圖書館也沒找到, 乾脆去書店買一本吧! 去明儀有找到, But, 此書有封膜無法翻閱, 且是紅標只有 85 折, 所以只好上網找看看, 發現蝦皮下面這個賣家最便宜 (66 折) : 





上回錯過了 88 節免運活動, 但昨天晚上發現有 8/18 299 免運, 叫菁菁幫我在蝦皮下標, 還有折價券可用, 結果只付 281 元, 約 59 折! 哈哈哈, 




我的 Jetson Nano 已好久未開機, 等這本書到貨就開工唄. 

2022年8月17日 星期三

明儀買書一本 : Python 股票 x ETF 量化交易回測 102 個活用技巧

上週逛明儀看到這本書, 隨手翻閱覺得很不錯, 想說回來查圖書館有沒有, 或 momo 最近是否有活動, 結果都不如願, 所以又再跑一趟明儀買下來 : 



Source : 博客來


此書作者劉承彥之前的著作 (程式交易與期貨等) 我也買過, 都是跟他的老師酆世昌 (昊瀚資訊老闆) 合著, 但這本卻沒有, 看序言才知酆老師已往生, 公司也因此結束營業, 真的好可惜. 這家公司就位於高雄中山二路, 他們開發的程式交易下單軟體 GOrder 還蠻有名的, 後續可能就無人維護了. 

2022年8月16日 星期二

在網頁中顯示 HTML 原始碼的小工具 html2show

過去兩周在手刻 GitHub 架站教學網站過程中遇到一個很煩的問題, 就是要將 HTML 原始碼在網頁中呈現時, 除了要把 < 改成 &lt; 與把 > 改成 &gt; 外, 還要將空格改成 &nbsp; (這些都是 HTML 定義的實體 entity), 最後還要在最後面加上 <br> 跳行, 這些我都用 EditPlus 去操作, 雖然 EditPLUS 比記事本好用太多, 但還是覺得非常煩. 

我在網路上找到一個可以轉換實體的網頁, 但它只處理 < 與 > 而已, 空格與尾端添加跳行則無支援, 這樣實用性並不高 : 


今天複習了 jQuery 與 Javascript 語法後寫了一個符合自己需求的小工具 html2show :





只要將 HTML 原始碼複製貼到上面的文字框, 然後按 "轉換", 下方就會出現結果了, 按 "複製" 鈕即可複製結果到剪貼簿. 雖然來得晚了點, 但後續也許還用得到 (在 Blogger 貼網頁不須轉換, Blogger 會自動轉換, 但自己寫網頁就需要). 

這個網頁原始碼如下 : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>code2html</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <br>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="source">HTML 原始碼</label>
          <textarea id="source" name="source" class="form-control" rows="8"></textarea>
        </div>
      </form>
      <button id="trans" type="button" class="btn btn-primary">轉換</button>
      <button id="copy" type="button" class="btn btn-primary">複製</button>
      <form>
        <div class="form-group">        
          <label for="dest"></label>
          <textarea id="dest" name="dest" class="form-control" rows="8"></textarea>
        </div>
      </form>
    </div>
    <script>
      $(function(){
        $("#trans").on("click", function(e){
          var source=$("#source").val();
          var reg=/\S/g;   
          var arr=source.split("\n");
          for (var i in arr) {
            var idx=arr[i].search(reg);
            var nbsp="&nbsp;".repeat(idx);
            var str=arr[i].replace(/</g, "&lt;").replace(/>/g, "&gt;");
            arr[i]=nbsp + $.trim(str) + "<br>";
            }
          $("#dest").val(arr.join('\n'));
          });
        $("#copy").on("click", function(e){
          $("#dest")[0].select();
          document.execCommand("copy");
          alert("已複製到剪貼簿!");
          });
        });      
    </script>
  </body>
</html>

此網頁中的程式主要是讀取 HTML 原始碼後以跳行字元 \n 為界拆分每列為一個陣列, 然後在走訪此陣列的元素時, 先用正規表示法偵測每列最前面有幾個空格, 將第一個字元以前的空格用 &nbsp; 實體取代, 接著分別將 < 與 > 用 &lt; 與 &gt; 取代, 以及在列尾加上 <br>, 最後用 join() 將陣列組合回字串. 

這裡面用到了如下幾個技巧 :
  1. str.search(/\S/g) : 
    這會傳回字串 str 中第一個找不是空格的字元位置, 這可用來傳給 repeat() 方法來產生前面要幾個 &nbsp;. 
  2. str.repeat(n) :
    這會傳回字串 str 重複 n 後的結果字串, 例如 "&nbsp;".repeat(2) 會得到 "&nbsp;&nbsp;".
  3. $("#myid")[0] :
    這會傳回 id 為 myid 元素之 jQuery 物件的原始 DOM 物件, 有時候還是需要用到 DOM. 
  4. $.trim(str) :
    這會將字串 str 左右側的空格去除後傳回. 因為 Javascript 本身沒有 lstrip() 或 rstrip() 之類的字串方法, 所以 jQuery 的內建函數 $.trim() 就是個很好的彌補. 
  5. dom_obj.select() :
    這會選取該 DOM 物件. 
  6. document.execCommand("copy") :
    這會將所選擇的元素之內容複製到剪貼簿中. 
參考 : 

Why is document.execCommand("paste") not working in Google Chrome?

2022 年第 33 周記事

最近兩周忙網頁, 馬不停蹄終於在昨天搞定了, 好累. 但也因為如此, 讓已近兩年沒在刻網頁的我溫習了一遍 jQuery 與 Bootstrap, 想想以前花時間勤寫筆記是對的, 要不然從頭找書要花更多時間, 有現成資料真是太好做事了. 

週五 8/12 中元節要祭拜祖先, 我原本打算請一天假回鄉下, 但因還不熟悉居家上班請假作法, 所以週四下班就回去了, 週五一早就開始準備祭祖事宜, 沒想到現在越來越多人一大早就拜, 才七點鞭炮聲九此起彼落, 可能蠻多人像我這樣, 拜完還要趕上班, 或者田裡還有活要趁太陽不熱時盡早做. 

最近柬埔寨詐騙新聞不絕如縷, 幾乎每節新聞都有, 警察在桃機勸阻還要費相當大的唇舌, 這些詐騙的非常可惡, 我以前接到有時間就玩玩, 玩到他們受不了直接掛電話, 我又沒口出惡言, 只是要聽老師長篇大論上課, 或是倚老賣老的勸世名言, 又或者是政治狂熱者的幹噍, 真是難為他們了. 從新聞中得知, 原來他們業績沒達標還會被毆打與電擊, 那我這樣玩他們又好像太殘忍了. 

菁菁接睫毛的工作八月起開始收費 (七月是免費徵模特兒, 我當了兩次, 哈哈, 我也有過翹睫毛, 而且菁菁說我的眼部照片最美, 年輕時的怨嘆的單眼皮現在居然自然變成好看的雙眼皮), 每天滿檔也就三個客人, 還有人從屏東跑來. 七月打過廣告後到八月底都滿檔, 看她做得蠻高興的, 既然對讀書沒興趣, 那就做自己喜歡的唄. 

跟英國 hostinger 租的 PHP 主機年底將到期, 這三個月要來評估是否續租, 目前傾向不續租, 因為測試網站可以完全用 GitHub 取代, 後端部分可以用 Pythonanywhere 取代, 只是以前寫的 PHP 程式碼沒處放了, 反正現在都改用 Python,  我已經很久沒在寫 PHP 了.

最近很多政治人物風靡飛鏢遊戲, 不意紛紛被迴力鏢所傷, 醜態畢露非常難看. 俗諺云, 仗義多為屠狗輩, 想來還真有道理. 

2022年8月15日 星期一

高科大還書 4 本 (Matlab 數位訊號處理與 R 語言等)

因新借三本書到館, 滿借情況下須至少還三本才能取書 : 
No.4 有人預約, 二哥說已沒在用. R 語言我現在沒時間看也先還. 另外還有一本已有新版書, 等書到再還 :
很努力在看了, 但還書速度還是很慢. 目前借書以 Python 機器學習的較多. 

2022年8月14日 星期日

完成教學網站 "用 GitHub 輕鬆架站"

因下周學會上課需要, 這兩周努力將之前部落格文章關於 GitHub 架站的濃縮整理在新申請的 GitHub 帳號上, 今天終於算是完工了. 雖然有將 CSS, Javascriipt, 與 jQuery 列入教學文件項目, 但這三個部分屬於進階要寫程式的領域, 對於在 GitHub 上架站來說, 只要對 HTML 與 Bootstrap 有概念, 會將模板改成自己的網頁就夠了, 所以以後有空再補充吧. 


雖然兩周前交出簡報檔就算交差了, 但花兩周時間手刻一個網站卻是十幾年前才有的傻勁, 趁這機會又把 HTML 與 Bootstrap 複習一遍也還不錯. 

二哥機車任意險續保

兩周前接到明台簡訊, 說二哥那台山葉電動車保險 8/13 快到期, 可是我上網續保一直跳出強制險不可重複, 今天仔細看簡訊, 原來去年強制險是保兩年, 但任意險只能一年, 故這次到期的是任意險, 我卻勾選強制險, 難怪一直卡關. 明台的任意險只能選保額 500 萬, 今年保費 1184 元較便宜. 

參考 :

# 明台產物保險

2022年8月7日 星期日

2022 年第 32 周記事

上周完成 GitHub 架站講座簡報後, 覺得既然是要架站, 何不將簡報內容直接以 GitHub 網站呈現? 所以本周我又持續改寫為網頁, 哇, 好久沒這樣手刻網站了, 長久以來寫後端有 template 實在太方便, 手刻靜態網頁覺得好累. 

姊姊周五晚上回到高雄, 我則下班後先回鄉下, 因為水某已訂好新光三越三多店的好正點, 我週六就從鄉下載爸來高雄吃飯, 下午再回鄉下. 好正點家附近自由路就有一家, 但水某說新光三越的較大, 用餐時間兩小時, 但 11:30 坐定位點餐, 大概要 15~20 分才會上菜, 這時飢腸轆轆, 覺得還不如去海港隨到隨吃, 且都一小碟一小碟不夠分啊! 一次點 12 道菜, 要等上一半後才能再點, 感覺不太優. 不過他們的烤雞倒是挺好吃的. 

本周都在寫網頁, 所以儲能型太陽能板安裝進度掛零, 下周五七月半拜拜, 我打算請假回去, 不然讓爸自己一人操辦也挺累的. 這樣週五下午就先來油漆亞角鐵, 放兩天周六應該就可以安裝了. 

2022年8月3日 星期三

Bootstrap 4 學習筆記 (十) : 警示, 面板與手風琴

這幾天因為要準備客家語文學會的 GitHub 架站簡報資料, 把 Bootstrap 筆記複習了一遍, 發現還缺了 alert (警示), panel (面板), 以及 accordion (手風琴) 這幾個內容呈現容器元件還沒測試, 所以就趁這機會做個完結唄. 本系列之前的測試文章參考 :

Bootstrap 4 學習筆記 (一) : 環境配置
Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 4 學習筆記 (三) : 表格
Bootstrap 4 學習筆記 (四) : 圖示與按鈕
Bootstrap 4 學習筆記 (五) : 文字與圖片效果
Bootstrap 4 學習筆記 (六) : 表單
Bootstrap 4 學習筆記 (七) : 按鈕選單
Bootstrap 4 學習筆記 (八) : 導覽頁籤
Bootstrap 4 學習筆記 (九) : 導覽列

Bootstrap 教學文件參考 :

第 10 堂課 - 初探 bootstrap 網頁製作
Bootstrap 初學介紹 #靜態篇


一. Alert (警示) : 

此元件使用具有醒目背景色的 div 區塊來顯示重要訊息, 主要套用 alert 與下列五個樣式類別, 並指定 role="alert" 屬性 :


 樣式類別 說明
 alert 必要的警示區塊樣式
 alert-success 背景為咖啡色之區塊
 alert-info 背景為淡藍色之區塊 
 alert-warning 背景為黃色之區塊 
 alert-danger 背景為黃色之區塊
 alert-dismissible 添加可關閉按鈕 (x)


這些 div 外面再用 class="container" 的 div 區塊包起來, 基本結構如下 :

    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息!
      </div>
    </div>

例如 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息!
      </div>
      <div class="alert alert-info" role="alert">
        這是 alert-info 訊息!
      </div>
      <div class="alert alert-warning" role="alert">
        這是 alert-warning 訊息!
      </div>
      <div class="alert alert-danger" role="alert">
        這是 alert-danger 訊息!
      </div> 
    </div>
  </body>
</html>

結果如下 : 




如果要建立可以關閉的警示, 需要添加 alert-dismissible 樣式類別, 並搭配一個有 close 樣式的 button 物件, 例如 :

      <div class="alert alert-danger alert-dismissible" role="alert">
        <button class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
        這是 alert-danger 訊息!
      </div> 

完整範例如下 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息!
      </div>
      <div class="alert alert-info" role="alert">
        這是 alert-info 訊息!
      </div>
      <div class="alert alert-warning" role="alert">
        這是 alert-warning 訊息!
      </div>
      <div class="alert alert-danger" role="alert">
        這是 alert-danger 訊息!
      </div> 
      <div class="alert alert-danger alert-dismissible" role="alert">
        <button class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
        這是 alert-danger 訊息!
      </div> 
    </div>
  </body>
</html>

結果如下 :




按後面那個 x 按鈕就可以關閉該條警示訊息了. 


二. Panel (面板) : 

面板也是像上面 alert 一樣的區塊, 但它除了主體 (body) 外還多出板首 (heading) 板尾 (footer) 兩部分, 不過首尾都是可有可無的. 基本結構由兩層 div 構成, 外層 div 需套用 panel 與下列四種背景色樣式類別 : 


 面板背景色樣式類別 說明
 panel-default 背景為灰色之預設面板
 panel-primary 背景為藍色之面板
 panel-success 背景為咖啡色之區塊 
 panel-info 背景為淡藍色之區塊
 panel-warning 背景為黃色之區塊
 panel-danger 背景為紅色之區塊


主體要套用 panel-body 樣式類別, 而板尾則套用 panel-footer 樣式類別, 基本結構如下 : 

     <div class="panel panel-default">
        <div class="panel-heading">面板板首</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
     </div>

例如 : 


範例 2-1 : 各種背景色之面板區塊測試 [看原始碼

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">面板板首 (default)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">面板板首 (primary)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">面板板首 (success)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading">面板板首 (info)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">面板板首 (warning)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading">面板板首 (danger)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
    </div>
  </body>
</html>

結果如下 : 









板尾部分若不需要可以去除. 


三. Accordion (手風琴) : 

所謂手風琴效果 (accordion) 就是將網頁內容上下堆疊, 一次只展開一部份, 其餘部分會自動縮合起來的呈現方式, 這種可縮合 (collapse) 結構是在上面介紹的面板 (panel) 上發展出來的, 主要是添加了 a 標籤的頁內錨點 (anchor) 與 panel-collapse, collapse 等樣式類別來控制面板主體區塊的展開與縮合, 基本結構如下 : 

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">內容</div>
        </div>
      </div>

參考 :


可見此組件基本上就是一個加工後的面板, 主要是板首標題改用 a 標籤來控制本體 div 區塊中的錨點 (id='collapse1') 以使其展開或縮合, 並為 a 標籤添加 data-toggle="collapse" 屬性, 另外, 本體 div 區塊也要加上 panel-collapse 與 collapse 兩個樣式類別, 完整網頁碼如下例 : 


 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">內容</div>
        </div>
      </div>
    </div>
  </body>
</html>

結果如下 : 




預設內容是收合起來的, 點標題才會展開. 

如果預設要展開, 可在本體的 div 區塊添加 in 樣式類別 : 

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">內容</div>
        </div>
      </div>

例如 :



結果如下 : 




手風琴 (Accordion) 就是以上面的可收合面板為基礎建構的, 將多個可縮合面板再用一個樣式類別為 panel-group 的 div 區塊包起來並指定一個 id, 每一個可縮合面板添加一個 data-parent 屬性指向此 id 即可, 基本結構 (兩個可收合面板) 如下 : 

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">內容 1</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">內容 2</div>
          </div>
        </div>
      </div>

手風琴群組裡面的每個面板都可以各自指定板首的背景色樣式類別, 例如 panel-primary, panel-info 等, 如下列範例所示  : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">內容 1 (default)</div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">內容 2 (primary)</div>
          </div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">標題 3</a>
            </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">內容 3 (success)</div>
          </div>
        </div>
        <div class="panel panel-info">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">標題 4</a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">內容 4 (info)</div>
          </div>
        </div>
        <div class="panel panel-warning">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">標題 5</a>
            </h4>
          </div>
          <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">內容 5 (warning)</div>
          </div>
        </div>
        <div class="panel panel-danger">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">標題 6</a>
            </h4>
          </div>
          <div id="collapse6" class="panel-collapse collapse">
            <div class="panel-body">內容 6 (danger)</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

注意, 其中面板 1 的主體區塊添加了 in 樣式類別, 所以面板 1 預設是展開的, 結果如下 : 




可見每開啟一個面板, 其餘面板就會自動收合. 不過因板首的標題是 a 超連結, 所以會出現底線, 若不想出現底線可於每個板首 a 標籤添加 style="text-decoration:none;" 的樣式屬性, 或者於 head 標籤內的 style 標籤中, 統一規範所有超連結都步出現底線 :

a {text-decoration:none;} 


2022年8月2日 星期二

2022 年第 31 周記事

本周氣候進入不穩定時期, 但所幸傍晚下班後都沒下雨, 所以都能去健走. 自從居家辦公後, 下班都去河堤健走, 先往南走到大順路繞道對面折返, 再走到新莊仔路折返, 大約走 3.2 公里, 4700 步, 平均時速 4.5 公里. 兩個多月下來已瘦了兩公斤, 從 70 降至 68. 就算以後回辦公室上班, 回到家差不多 17:20, 剛好可以去健走. 

七月最後一周主要在忙 GitHub 架站的簡報, 總算在 7/31 寄出了, 為了編輯簡報也把 Bootstrap 複習了一遍, 還用 iPhone 手機的 Gmail 申請了新的 GitHub 帳號演練一遍, 總算可以把 Bootstrap 學習終結了. 雖然 Bootstrap 已演進到第五版, 但我覺得第三版就很夠用了. 因為編簡報也使太陽能板的安裝作業推遲到這周末再進行. 

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 這種無側邊欄的結構就很適合. 通常會在首頁中配置側邊欄, 而網站中其他資料網頁就不放側邊欄.