徐嘉裕(Neil Hsu)的工作心得網誌!

歷經一年多持續開發與優化，neilambilight 3.6 正式版正式登場。本次改版不僅全面強化無障礙AA支援，更導入尼爾自研的「Neil_ISP v2.0 分散式爬蟲攻擊智能防禦安全套件」，大幅提升網站整體安全與流量防護能力。 同時針對介面設計與操作體驗進行全面升級，加入aa-flow 自流動排版機制，可隨瀏覽器縮放自動調整版面，最高支援至400%，並達成TAD模組全面兼容，兼顧美觀、實用、安全、相容與無障礙等多重需求。 本次改版可說是一次從核心到體驗的全面進化，歡迎下載體驗全新升級的 neilambilight！ 下載neilambilight3.6正式版       neilambilight3.6佈景展示站 新增與調整重點 無障礙 AA 全面升級 支援 NVDA 讀報、鍵盤操作優化、焦點管理強化 aa-flow 自流動版面（100%～400% 自適應） AWD 自適應流動排版系統 200% 自動單欄重排 250% / 300% / 400% 完整流動支援 全站 CSS REM 化 Neil_ISP v2.0 安全防護系統 蜜罐誘捕爬蟲 行為判斷封鎖 流量防護與 LOG 管理整合 TAD 模組全面兼容 自動補齊 JS / CSS 依賴 修正 tpl 衝突 Neil / TAD 智能分流機制 介面與操作體驗優化 新版 UI 設計（符合現代與 AA 安全色） 漢堡選單 / 浮動選單優化 字級切換與操作回饋強化 實用功能強化 短網址生成與還原功能 JSON-LD 結構化資料（SEO 強化） 表單與登入流程無障礙優化 GTM、AJAX、安全驗證補強     無論是視覺呈現、操作流暢度，或無障礙設計，neilambilight 3.6 都帶來全面性的升級體驗。 如果您正在使用 XOOPS 2.5.11 正式版，誠摯邀請您下載安裝，親自感受新一代佈景系統所帶來的穩定性與效率提升。 neilambilight3.6更新項目 修正無障礙NVDA讀報系統無法辨識JS的Enter事件，導...

全新登場 neilambilight 3.5 ！此次更新全面配合 Xoops 2.5.11 官方升級，將原有的 Bootstrap 3 提升至 Bootstrap 4.6.2 ，為使用者帶來更佳的視覺體驗與操作流暢度。 新增功能 ： 數字廣告區塊與顯示裝置自訂區塊，靈活配置更方便。 佈景管理->圖片播放器管理->新增加區塊撥放器功能。 無障礙功能強化 ： 導盲磚 (:::) 、 網站導覽 (Site Navigator) 、 鍵盤快速鍵 (Access Key) 功能。 支援 Tab 與 Enter 鍵遍歷操作網站所有功能（含焦點樣式）。 圖片撥放器可自訂播放與暫停設定。 通過 FreeGo 程式檢測 ，符合 WCAG 2.1 無障礙標準。 錯誤修正 ： 解決 neilambilight 3.4 版已知 BUG，提升穩定性。 相容性與效能提升 ： 支援 PHP 8.3 與 MySQL 8 ，確保系統長期穩定運作。 優化後端程式結構，為未來功能擴充奠定基礎。 無論是視覺呈現、功能操作或是無障礙設計， neilambilight 3.5 都為您帶來全面升級的使用體驗。如果您正在使用 Xoops 2.5.11 穩定版，誠摯邀請您下載安裝，親自感受最新功能帶來的便利與效能！ 👉 佈景展示網站 ： https://chongshanli.com/ 立即升級，探索更多可能！ 🚀 neilambilight3.5更新內容 1、修正佈景管理區塊選單，若變更父層按鈕到其他分類，子層的categoryid沒被寫入新分類值的問題。 2、升級災害示警元件套件2.0版，增加AlertModule套件工具包，重構災害示警區塊管理及樣板程式，精簡合併優化去除多餘的結構,並保留示警元件套件1.0版可由區塊管理切換使用。 3、聯絡我們表單管理增加表單設定功能，新增加聯絡地址欄位 啟用/不啟用 必填欄位 啟用/不啟用。 4、聯絡我們表單增加聯絡地址欄位，包含鄉鎮縣市+地址欄位為一陣列組合，可於後台設定啟用或不啟用，增加必填欄位前後台驗證功能(如有啟用欄位必填)。 5、佈景管理->廣告管理->新增加數字廣告管理功能，可以建立文字與滾動數字的廣告組合，可以新增編輯刪除排序等操作。 6、新開發數字廣告區塊，可於區塊後台設定 顯示數量 / 顯示方式 / 橫列數量 ...

本次更新針對Xoops2.5.11穩定版進行了多項優化和改進，包括： 升級樣板結構至Smarty v3.1.48，提升效能和穩定性。優化簡併後端程式，為未來擴充更多功能奠定基礎。修正neilambilight3.3版的bug問題。優化無障礙功能，增加使用aria與alt標籤。優化佈景管理的部分功能，使操作更簡便易於維護。 如果您正在使用Xoops2.5.11穩定版，歡迎下載安裝neilambilight3.4版體驗最新功能！ neilambilight佈景展示網站： https://chongshanli.com/ 注意重要： 如果您的Xoops版本是低於Xoops2.5.11-Final以下版本，因Smarty版本不兼容，請勿下載neilambilight3.4安裝，程式會出錯，請先安裝或升級Xoops2.5.11-Final版，以下提供可正常運作並附有中文語言包的Xoops2.5.11-Final下載點，有需要朋友請自行下載。 下載點： https://drive.google.com/file/d/1z9xJUWbYrUgVZWeEzBcftGQcSzX4mKA-/view?usp=drive_link neilambilight3.4更新內容 佈景手機版介面調整，模組頁面標題取消左方ICON功能，標題高度改為自動，最多可以展開到三欄文字高度，增加瀏覽最適化。 刪除無使用的xo_footerstatic.tpl，instructions.tpl，instructions.php，tadloginblocks.php 完成neilambilight佈景樣板及結構Smarty v3.1.48升級工作。 完成neothemesadmin佈景管理模組樣板及結構Smarty v3.1.48升級工作。 修正佈景管理模組->自訂按鈕->圖片按鈕 自訂排序無效問題。 修正隨機小語管理後台背景取色器失效問題，替換取色器JS套件。 刪除無使用的neillibrary/js/bootstrap4color資料夾 修改布景區塊選單子項目功能，移除UI介面的 按鈕型態選擇/設定模組焦點/按鈕連結類型/輸入網址變數四項欄位功能，移除資料表variableid及sortyn欄位，改由建立子項目時PHP自動判斷析網址型態為內連還是外連，若為內連，自動擷取網址中的modulesID...

本次釋出的neilambilight3.3版主要是針對neilambilight3.2部分樣式BUG進行修正，也增加了新的佈景布局樣式及更換主選單JS套件，採用更優化的smartmenus選單，讓網站運作更為順暢。 neilambilight佈景展示網站： https://chongshanli.com/ neilambilight3.3更新內容 1、佈景版型配置增加->上右四區塊顯示上方功能，可由佈景管理模組中切換版型。 2、更換布景主選單為smartmenus-1.1.1套件，選單CSS樣式調整。 3、修改關於我們區塊結構樣式，針對Xoops->12個位置做最適化調整。 4、彈出廣告增加自訂廣告圖片寬度功能。 5、修正關閉網站自動放大縮小功能->主選單上下位移錯誤問題。 本次更新釋出版本 neilambilight3.3版 neothemesadmin5.6版 neillibrary2.5版 系統環境需求 PHP版本：PHP7.3包含以上，最佳版本PHP8.1， 建議php7.4(因tad模組只兼容到php7.4) Mysql版本：mysql5.55包含以上到10.4.27-MariaDB Xoops版本：Xoops2.5.10包含以上，最佳版本Xoops2.5.11 升級安裝neilambilight3.3如下說明 1、前往下載neilambilight3.2佈景檔 http://neodw.com/neil/modules/tad_uploader/index.php?of_cat_sn=14 2、解壓縮後，吧htdocs資料夾裡面的檔案全部上傳到網站根目錄中覆蓋舊檔(htdocs或www目錄) ->kernel ->modules ->themes ->register.php ->robots.txt 備註說明：htdocs資夾包含Xoops補丁檔，增加表單防機器人驗證機制，以及區塊$show_func增加$this傳參，若無上傳布景將無法正常運作。 3、進到管理後台->點選模組->點選更新neothemesadmin佈景管理模組 (非常重要) 4、進到管理後台->點選模組->點選更新neillibrary函數庫模組 (非常重要) 5、升級後舊版佈景建立資料均會保留。 既完成本次升級...

本次升級除修正部分BUG外，也針對功能做了擴充，包括佈景管理後台改用Xoops2.5框架，增加全國據點管理功能，增加簡介區塊管理功能，增加廣告管理功能(GTM代碼管理/彈出廣告功能/右下浮動廣告功能)，並精簡優化佈景的程式，重構部分JS及CSS代碼，加快網站開啟速度及穩定性，提供USER更友善的網站使用環境。 neilambilight佈景展示網站： https://chongshanli.com/ neilambilight3.2更新內容 1、調整因Xoops2.5.11變更模組版本數值，修改佈景管理模組更新通知版本判斷方式。 2、修正布景更新通知無法關閉問題，增加紀錄更新時間及關閉通知後下次通知的間隔時間。 3、佈景管理新增加圖片撥放器間隔秒數設置功能。 4、關於我們區塊->新增加圖片按鈕輸入連結網址功能。 5、優化佈景管理->聯絡我們及聯絡我們管理區塊JS表單驗證功能(合併簡化code)。 6、修正布景開啟搜尋區塊捲軸下拉滑動選單會跑位的問題。 7、修改佈景管理模組首頁->改用Xoops2.5框架。 8、刪除無使用的tplthemescss.php檔 9、佈景管理->新增加全國據點管理功能，後台可新增/編輯/刪除/排序/全國據點，前台增加全國據點區塊功能。 10、佈景管理->新增加簡介區塊管理功能，後台可新增/編輯/刪除/排序/簡介區塊，前台增加簡介區塊功能。 11、佈景管理->新增加廣告管理功能。 ->GTM代碼管理，可按照UI指引貼入GTM追蹤代碼，可設定啟用或不啟用GTM代碼。 ->彈出廣告管理，可建立在首頁彈出的廣告圖片及連結，後台可建立多筆資料，有指定及隨機兩種顯示方式。 ->右下浮動廣告管理，可建立網站右下方浮動廣告圖片及連結，一式廣告分為上下兩組，後台可建立多筆資料，有指定及隨機兩種顯示方式。 12、布景js播放器圖改為png格式，更新模組時執行jpg轉png程式。 13、修正因布景存入cookie更新頁面導致FB分享連結抓不到網站內容資訊的問題(標題/圖片/說明)。 14、升級聯絡我們功能，聯絡內容及回覆內容增加URL自動轉連結及保持原格功能，優化code清除不必要的程式碼。 15、修改布景LOGO主標題文字不隨內容變動! 16、升級電腦版網站隨解析度自動放大縮小功能，捨棄zoom改用tra...

針對neilambilight3.0版用戶回報問題做調整與升級，更新項目如下 neilambilight3.1更新內容 ============================== 1、自訂按鈕->圖片類型區塊，增加顯示及不顯示按鈕文字功能，並重新優化該區塊的布景CSS樣式。 2、布景電腦版->底區塊選單增加第二層收納第三層選單功能(原本為展開結構)，並優化CSS樣式。 3、修正模組更新onUpdate.php->自動刪除腳本，刪除使用中的css檔問題。 4、隨機小語後台增加內容輸入框簡易CK編輯器。 5、調整布景JS套件引入位置解決與部分tad模組衝突問題。 6、聯絡我們顯示未回覆提示框時，自動關閉主選單浮動功能，解決版面變形問題。 7、修正多層自訂按鈕未關閉區塊樣式時字體過大問題。 8、修正多層自訂按鈕編輯時選擇分類會變成空值的問題。 9、調整佈景中間欄位配置區塊標題文字及高度加大。 本次更新釋出版本： neilambilight3.1版 neothemesadmin5.1版 neillibrary2.3版 安裝及升級方法如下neilambilight3.0說明。 歷經一年多的開發，neilambilight佈景已經完全煥然一新，以全新的面貌呈現給大家，本次改版佈景前台介面全部砍掉重練，全新的設計風格與優化結構，更實用的功能與管理便利性及安全性，並增加了視差動畫設計，自訂區塊icon功能，版面布局也更多樣化，可兼容tad最新版模組，目前已完成各項測試正式發佈，歡迎大家下載使用。 neilambilight佈景展示網站： https://chongshanli.com/ neilambilight3.0 更新內容 ============================== 1、升級布景jquery到jquery-3.5.1.min.js。 2，升級布景jquery-migrate到jquery-migrate-3.3.0.min.js 3、調整布景headtpl.tpl中CSS及JS檔引入方式。 4、移動儲存區塊圖片資料夾內容neilambilight->neothemesadmin，修改圖檔路徑 5、隨機小語新增自訂電腦版及手機版寬度高度設定。 6、災害示警新增自訂電腦版及手機版寬度高度設定，修改樣板設定。 7、強化表單防禦機器人程式架...

Xoops佈景其實可以透過樣板的includeq讀取子樣板傳遞變數，吧11個區塊陣列變數傳到1個樣板檔中執行，可以精簡樣版的使用也方便開發及定義內容樣式，方法如下： 1、先建立一個樣板檔->blockstpl.tpl放到佈景的tpl資料夾裡面 2、在blockstpl.tpl樣板中置如以下的code <div class="<{$site}>box"; <{foreach item=block from=$fromvar}> <aside> <h4 class="block-title"><{$block.title}></h4> <div class="blockcontent"><{$block.content}><div style='clear: both;'></div></div> </aside> <{/foreach}> </div> 3、然後就是佈景的bodytpl.tpl布局，依照設計需求分別引入blockstpl.tpl樣板並傳入$fromvar值 //左區塊 <{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.canvas_left  site=left}> //右區塊 <{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.canvas_right  site=right}> //中間上區塊 <{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_topcenter  site=topcenter}> //中間上左區塊 ...

Xoops2.5.11之後提供了一個讓佈景可以引入Xoops內建Bootstrap4的方法，而且很好用，不會跟佈景原本引入的Bootstrap3衝突，方法如下!! 在佈景的根目錄放置theme_autorun.php檔，內容貼上以下code <?php xoops_load('XoopsFormRendererBootstrap4'); XoopsFormRenderer::getInstance()->set(new XoopsFormRendererBootstrap4()); 來看看效果如何?還沒放置theme_autorun.php之前的profile模組->編輯帳號表單頁面是這樣，原生的Xoops表單樣式。 放置theme_autorun.php之後的profile模組->編輯帳號表單頁面是這樣 很明顯欄位都美化很多，而且不會跟Bootstrap3衝突，有需要的朋友參考看看! 工作心得撰寫： 徐嘉裕 Neil hsu

Xoops佈景預設引入的jquery.js已經很老舊了，如果要引入最新的jquery-3.5.1.min.js則會與$xoops_module_header中預設jquery.js衝突，所以如果佈景要引入jquery-3.5.1.min.js必須做以下修改才行，移除Xoops預設的jquery.js。 1、在佈景樣板的<{$xoops_module_header}>標籤上方引入jquery-3.5.1.min.js，然後再引入jquery-migrate-3.3.0.min.js以便做舊版jquery.js的兼容，若沒引入jquery-migrate-3.3.0.min.js很多舊版的JS功能都會發生異常無法使用。 所以樣板程式就會是以下這樣 <{php}> global $xoopsTpl; //引入jquery-3.5.1.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-3.5.1.min.js' type='text/javascript'></script>"; //引入jquery-migrate-3.3.0.min.js $module_header.="<script src='".XOOPS_URL."/modules/neillibrary/js/jquery-migrate-3.3.0.min.js' type='text/javascript'></script>"; echo $module_header; <{/php}> <!--module_header--> <{$xoops_module_header}> 2、再來解決$xoops_module_header重複引用jquery.js的問題，需要吧Xoops預設的jquery.js拿掉，還有tadtools中較舊版的jquery-migrate-3.0.0.min.js拿掉，這裡需要使用samty的replace功能，程式...

最近開發Xoops佈景時候需要修改瀏覽器原生的卷軸套件樣式，也就是overflow-Y: scroll，需要透過css自定義捲軸的背景顏色，但搞了半天IE可以Google可以Firefox就是不行，上網估狗過所有方法CSS都定義不起來，最後還是透過萬能的jQuery來解決吧，直接以程式來處理比用css搞半天快多了，效果還更美觀。 jQuery custom content scroller 插件網站 http://manos.malihu.gr/jquery-custom-content-scroller/ jQuery custom content scroller 插件效果演示範例 http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html 也可以自行去我的G硬碟中下載已經整理好的套件回去用!! https://drive.google.com/file/d/1sMrp6Tn2zlgyP1bCYowwHYLpTkcil2C0/view?usp=sharing 下載回來後吧scroller.rar解壓縮scroller資料夾看是放到佈景裡面的js資料夾還是模組裡面都可以!! css引入 <link href=" 你的網站網址 /js/scroller/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"> js引入 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src=" 你的網站網址/ js/scroller/js/jquery.mCustomScrollbar.concat.min.js"></script> //定義scroller ...

neilambilight2.9正式版發佈了，本次更新完成了 neothemesadmin佈景管理後台介面全部翻新工作，並增加了許多實用的輔助功能，包括聯絡我們觀看內容表單由後台移往前台，增加連結登入後自動帶入頁面功能及指定會員回覆功能，布景增加將頁面連結快速加入佈景選單功能，頁腳三區塊樣式再開發，及新增加了聯絡我們區塊功能與強化網站表單的防機器人功能， 目前neothemesadmin佈景管理後台100%都已翻新完成，各項功能也已開發完善，預計下次改版將針對佈景前台介面樣式作全部翻新設計，所以 neilambilight3.0將會以全新的介面 全新 樣式呈現給大家 。 Xoops免費佈景-Neil佈景測試站 http://demoweb.neodw.com/themesdemo/ neilambilight2.9 更新內容 ============================== 1、修正neothemesadmin佈景管理模組所有用到分頁功能的排序功能在下一頁輸入數值時會吧其他頁的排序數值歸零問題。 2、修正neilambilight佈景CSS樣式導致作業上傳區塊上傳按鈕無法顯示問題。 3、修正neilambilight佈景meta->og:image讀取圖檔路徑判斷功能失效問題(佈景預設圖檔跟上傳代表圖檔) 。 4、neilambilight佈景聯絡我們表單增加防止外部網站傳參判斷功能，只有在相同網址內聯絡我們送出資料才能寫入資料庫，防止機器人大量外部傳參。 5、修改neilambilight佈景聯絡我們表單防機器人驗證機制。 6、修改neilambilight佈景底三區塊顯示方式，改為樣式1：三區塊全開寬度均分,樣式2：左中區塊開啟，左30%中間70%寬度，樣式3：中右區塊開啟，中間70%右30%寬度，樣式4：只開啟一個區塊，寬度滿版，樣式5：左右區塊開啟寬度各50%。 7、修改聯絡我們說明事項欄位使用base64編碼後儲存及讀取，保留原始格式並防止因特殊字元被防護模組阻擋寫入資料表的問題。 8、neothemesadmin佈景管理模組新增加一個聯絡我們區塊，可由Xoops區塊管理中開啟，建議開啟放置在底區塊中。 9、neilambilight佈景模組頁面增加可傳送頁面連結標題到佈景主選單及佈景區塊選單及佈景圖片...

2018年3月12日發布neilambilight2.7更新! 因為今天發現一個問題必須要發佈更新才行，不好意思請好朋友再次下載更新檔案，感恩! neilambilight2.7 更新內容 ============================== neilambilight2.7更新內容 ============================== 1、修正電腦版模組內容頁面左右移動跑馬燈失效問題。 2、修正neothemesadmin模組語系檔PHP常數部分失效問題。 3、修正聯絡我們前端JS驗證漏洞(姓名欄位，說明事項欄位)，增加了去除HTML標籤功能與後端雙重驗證功能，防止被人張貼連結語法送出存入資料表。 1、前往下載neilambilight2.7佈景檔 http://neodw.com/neil/modules/tad_uploader/index.php?of_cat_sn=14#A ==================================================================== neilambilight2.6正式版發佈了，本次發佈更新除neilambilight佈景結構調整升級除與錯外，另外重新開發改了Neil佈景管理後台的/ 關鍵字管理功能/跑馬燈管理功能/聯絡我們管理功能 三個功能的ui介面及程式全部重寫，使用bootstrap3框架增加操作友善度與便利性與程式流程優化，增加更多實用功能，精簡合併與刪除無用檔案，另外開發了neillibrary函數庫模組，吧共用的函數及表單元件與js檔移到函數庫模組，可以減少模組的檔案大小，未來其他的Neil模組也能使用neillibrary函數庫模組。 ※未來將進行Neil佈景管理模組其他功能的逐一改寫升級工作。 neilambilight2.6 更新內容 ============================== 1、修改手機介面會員登入區塊CSS樣式。 2、調整手機介面營養午餐區塊CSS樣式 3、修改手機介面profile模組會員登入畫面CSS樣式 4、修改手機介面neothemesadmin聯絡我們CSS樣式 5、修正布景首頁<tltle>中顯示$xoops_pagetitle側...