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

發表文章

目前顯示的是 1月, 2017的文章

使用mod_rewrite將php及變數改為顯示html的教學

由於客戶網站SEO優化需要，需要吧原本網站的PHP檔名及帶有變數的PHP網都址改成html，以利搜尋引擎優先排序，所以需要做一下的設定工作。 1、如果是自己架的xampp伺服器需要找到httpd.conf檔案，用筆記本打開 xampp\apache\conf\httpd.conf 搜尋以下的設定 LoadModule rewrite_module modules/mod_rewrite.so 如果前面有#號吧#拿掉即可，這樣就啟用mod_rewrite功能了，如果是租虛擬主機大部分的mod_rewrite都是啟用的，如果沒有啟用可以寫信請主機商開啟這項設定即可。 2、找到需要轉換成.html的模組資料夾，例如我們需吧 http://test.com/modules/news/index.php的php都顯示為html，那就在news資料夾中建立一個.htaccess檔，然後用筆記本打開編輯假設我們要吧 http://test.com/modules/news/ index.php 讓他顯示為 http://test.com/modules/news/ index.html 可以在.htaccess中輸入 RewriteEngine on RewriteBase /modules/news RewriteRule ^index.html index.php 其中的 RewriteBase 是檔案的位置，如果是根目錄就輸入 RewriteBase / 即可，完成設定後儲存，當然如果就這樣更新瀏覽器是沒用的，還是會顯示http://test.com/modules/news/index.php，必須手動輸入 http://test.com/modules/news/index.html，如果有出現網站內容就表示設定成功了，mod_rewrite已經吧index.php檔名改成index.html 了。 3、如果是遇到有帶變數的的網址，例如http://test.com/modules/news/view.php?id=1,可以這樣設定 RewriteEngine on RewriteBase /modules/news RewriteRule ^view-([0-9]+)\.html$ view.

閱讀完整內容

jQuery+CSS3左側滑動客服選單範例

一個客戶案子剛好需要做一個左側的滑動客服選單，一開始不出現捲軸往下時滑動出現，然後卷軸到底自動消失，捲軸往上又出現，像是這個樣式然後滑鼠滑到按鈕會滑出說明文字像是這樣原本是有這樣的套件，是用javascript寫的程式已經老舊，不利網站SEO優化，上網找了很多jQuery套件也都不是很合用，不然是就跟佈景其他區塊的jQuery衝突導致無法使用，所以決定自己用jQuery+css3寫一個浮動的客服按鈕，簡單又好維護，效果也不錯，以下為範例網頁大家可以參考一下效果。左側滑動客服選單範例網頁以下為製作方法教學 1、先去jQuery官網下載jQuery檔並於<head></head>之間引入 <script type="text/javascript" src="jquery.js"></script> 2、於html樣版中增加以下的結構內容 <div id="fixmenu"> <ul> <li> <div id="skypemenu"> <div id="fmb01">skype線上客服</div> <a title="skype線上客服" href="/">skype線上客服</a></div> </li> <li> <div id="qqmenu"> <div id="fmb02">QQ線上客服</div> <a title="QQ線上客服" href="/">QQ線上客服</a></div> </li> <li> <div id="lin

閱讀完整內容

關閉Ubuntu預設mysql5.7版的strict mode設定方法(嚴格模式)

昨天遇到一個靈異事件事件搞了我一整晚，新開發一個Xoops線上測驗模組有5個資料表欄位的數值要寫入log資料表中，在本地端測試是都正常能寫入的，所以後面的流程也能繼續跑完，結果上傳到客戶端後log資料表怎樣就是無法寫入，後面的程式自然也就無法執行，非常奇怪從來沒遇過這樣的事情，檢查了一下Xoops的資料表寫入語法也沒出錯，為了保險起見改用php的sql語法再寫一次，本地端也是能存入log資料表，但上傳到客戶端就不行，難道是客戶主機卡到陰了嗎???搞了整晚!!算了還去睡覺了!! 就在半夢半醒之間，突然彷彿聽到一個聲音(要加點靈異效果文章才會有張力)，是strict mode沒關阿~笨蛋!~是strict mode沒關阿~笨蛋!~是strict mode沒關阿~笨蛋!~!!然後我就驚醒了!!!這才想到乾!!客戶用的mysql版本是mysql5.7版，mysql5.5版之後預設增加了strict mode模式(嚴謹模式)，如果欄位有空值都需要給一個默認值才行，不能是null，否則會無法寫進資料庫，既然找到問題了，那就要想辦法解決了!!上網查了一下果然找到仙人留下的足跡，按照他媽的方法修改了設定果真取消了strict mode模式，欄位值也能寫進log資料表中了，這一刻我他媽從來沒那麼感動過，真是妖手骨的感動莫名阿!!!終於能跟客戶交差不用被埋到後山了!!!好感動阿!!! 以下為取消mysql5.7的strict mode模式方法教學： 1、SSH連線到伺服器的root，找到以下路徑，並建立一個disable_strict_mode.cnf檔案 /etc/mysql/conf.d/disable_strict_mode.cnf <-建立檔案 2、打開文件並寫入以下語法： [mysqld] sql_mode=IGNORE_SPACE,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 3、輸入指令重新啟用mysql sudo service mysql restart 為了確認strict mode模式是不是已經被關閉了，可以在phpMyAdmin的sql中輸入SELECT

閱讀完整內容

在tadnews的區塊中增加一個新增文章按鈕，並可判斷分類群組是否有新增文章權限然後顯示按鈕

如果有朋友需要再tadnews模組的區塊中增加一個可以新增文章的按鈕，並且可以判斷分類群組是否有新增文章權限，而不用再進到tadnews模組中去建立文章，可以參考一下以下的方法： 1、於任何一個tadnews模組的樣板中(tadnews/templates/blocks/)用筆記本打開樣板，增加以下的PHP設定! <{php}> global $xoopsDB,$xoopsUser; if ($xoopsUser){ $modulesadmin=$xoopsUser->isAdmin(); foreach($xoopsUser->groups() as $i){ $sql = "select enable_post_group from " . $xoopsDB->prefix('tad_news_cate'); $result = $xoopsDB -> query($sql) or die($sql); while(list($enable_post_group) = $xoopsDB -> fetchRow($result)){ $admingroup=split(',',$enable_post_group); if(in_array("$i",$admingroup)){ $modulesadmin=ture; } } } } $chroneurl=XOOPS_URL.'/'; if($modulesadmin){ $mun="<div id='postmun'><a href='{$chroneurl}modules/tadnews/post.php'>發佈新聞</a></div>"; }else{ $mun="<div id='postmun'><a href='{$chroneurl}modules/tadnews/'>更多新聞</a></div>"

閱讀完整內容

Smarty變數處理方法

Smarty是一個PHP下的網頁模板系統。可以吧PHP中執行的變數函數直接輸出到HTM樣板中使用，使程式與設計端分開處理，而不用PHP的ECHO輸出了，以下為常用的Smarty變數處理內容(很實用)! 主要函數說明： capitalize 英文字首大寫 {$variable|capitalize} 每個單字中若有非英文字母者不轉換 {$variable|capitalize:true} cat 字串合併 {$variable|cat:"字串內容"} count_characters算字串長度 {$variable|count_characters} 不計算空白及標點符號。 {$variable|count_characters:true} count_paragraphs計算段落數 {$variable|count_paragraphs} count_sentences 計算句數 {$variable|count_sentences} count_words 計算單字數 {$variable|count_words} default 設定變數預設值 {$variable|default:"字串內容"} 變數無內容時的預設值 date_format 轉換時間格式 {$variable| date_format:"時間格式字串"} 設定時間的格式 (時間參數請參照官網) string_format 轉換數字格式 {$variable|string_format:"%.2f"} 傳回小數點兩位 {$variable|string_format:"%d"} 傳回整數 escape將字串轉換成編碼 {$variable|escape} 預設為參數"html" {$variable|escape:"html"} 將 & " ' < > 等字元轉換為編

閱讀完整內容

CSS3自訂 type='checkbox'樣式範例可直接套用

說真的原生的 type='checkbox' 真的是醜到爆了，樣式又不好修改，實在很無奈!! 剛好在網上找到有高人寫好CSS3的 type='checkbox' 樣式，套用去後果然美觀好看多了，而且居然不是jQuery寫的，真是神奇阿!! 套用方法很簡單，HTML部分如下 <div id="mycheck"><input id="checkbox1" class="css-checkbox" type='checkbox' name='mycheck' value='test'><label for="checkbox1" class="css-label">文字文字文字文字</span></label> 如果表單有多個type='checkbox'請吧id="checkbox1"編號改成id="checkbox2"然後345編下去，另外for="checkbox1"也是一樣改成for="checkbox2"然後345編下去，接下來貼入CSS3語法如下： #mycheck input[type=checkbox].css-checkbox { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #mycheck input[type=checkbox].css-checkbox + label.css-label { padding-left: 45px; height: 30px; display: inline-block; line-height: 30px; background-repeat: no-re

閱讀完整內容

如何修改Chrome瀏覽器input表單會出現的淡黃底色的方法

用IE跟FF瀏覽器都沒這問題，只有 Chrome 瀏覽器才會出現這個靈異事件，好好一個表單欄位出現這個不協調的淡黃色底能看嗎?一定會被客戶打槍的(暈)，找遍了整個佈景的CSS設定就是沒有關於淡黃色的底的設定阿，見鬼了，還好上網查一下有好心的高人已經解決這問題了，只要在CSS樣式中加一段以下的CSS語法 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } 淡黃色的底就消失了，這樣總算能跟客戶交差了，灑花喔!! 教學撰寫：徐嘉裕Neil hsu

閱讀完整內容

JQuery點選按鈕滑動到錨點特效

現在已經是21世紀又過了17年了，網頁設計上也是需要進步的，尤其是錨點的功能，總不能再用20世紀的html技術，這裡介紹一個好用的 jQuery 滑動頁面到錨點的特效製作方法，ie，Google跟ff瀏覽器都能正常使用喔!! 1、先去 jQuery 官網下載jquery.js檔並且於<head></head>間引入 https://code.jquery.com/ <script type="text/javascript" src="jquery.js"></script> 2、製作按鈕，例如我們有兩個按鈕A跟B分別點了要滑動到區塊A跟區塊B <a href="#" id="b1">按鈕A</a><a href="#" id="b2">按鈕B</a> 3、於區塊A及區塊B上方增加錨點定位區塊A錨點<a id="bn1"></a> <div>區塊A內文區塊A內文區塊A內文區塊A內文區塊A內文區塊A內文</div> 區塊B錨點<a id="bn2"></a> <div>區塊B內文區塊B內文區塊B內文區塊B內文區塊B內文區塊B內文</div> 4、建一個anchor.js檔，一樣於<head></head>間引入 <script type="text/javascript" src="anchor.js"></script> 5、用筆記本打開anchor.js，貼上以下JS語法 $(function(){ $('#b1').click(function() { $('html,body').animate({scrollTop:$('#bn1').offset().top}, "show");

閱讀完整內容