喊改版喊了一年多，前前後後改了超多個版本，終於這幾天下定決心、一鼓作氣的把版面做出來啦(撒花)

可以從這張圖看到我至少做了三個堪稱完整的版本啊 XDDD

最後問世的是第三個版本，但其中有部分元件也融合了前兩個版本的精華，另外因為想不到佈景名稱，持續很弱的用 omegaM Plus 命名 XDD，如果你也喜歡我的新版面，那就來看看我做了哪些設計吧 😀
(太久沒寫部落格了，突然覺得好卡啊 OTL)

新網站全貌

中間有兩塊還是假板，因為寫文章的時候，網址跟部份功能還尚待調整，所以先維持假板面貌 XD

其實在我的部落格介紹中，就有特別提到，這次的設計理念，是想走回傳統的個人風格，不再將 MUKI space* 侷限於單一主題的部落格。不管是技術文章、電影、甚至是自己的日記，我想寫什麼就寫什麼，這才是個人網站(部落格)的初衷吧 XDD。不過因為開始經營手帳寫真的文具社群，所以往後文具類的主題，可能真的會以手帳寫真為主，部落格這裡不一定會發文 QQ

最後特別說明一點，我也把課程整合在自己的網站，以後如果想看我的課程資訊，就可以直接從選單的課程連進去，超方便的吧(整個自以為 XD

接下來按照慣例，改版一定要寫詳細的內容，所以開始分層解析一下自己的設計吧 😀

首頁介紹

首頁上方

首頁上方，大概就是大家常說的黃金版位吧，下廣告很好用，大家快來找我下廣告喔 (招手)，在這我分割成了四個區塊，可以自由增添圖片跟連結！

比較特別的地方是，每個區塊都有自己的狀態設計，例如圖片中的「熱門」三角形裝飾，或是放在圖片上方的「You will love it」，其實目前總共只有三種狀態，但我覺得混搭已經很夠用了，也很能吸引大家的目光唷 ^口^

中間的最新消息只能放一則，我沒有特別為他開個資料庫欄位，紀錄過往的最新消息，因為有時候只是單純想要來個小宣告，所以我設計成只能放一篇的簡單的欄位，也歡迎你們點選首頁的「詳細內容」，可以看到特效喔 😊

首頁中間

中間很多區塊都還沒做好，但主軸不會更動，將透過 paypal 的贊助拉高了，如果你喜歡我的文章，歡迎贊助我，支持我繼續寫下去唷 :D。

來聊聊今日推薦資源吧！因為我習慣在粉絲團分享每天看到的技術文，但是 Facebook 收藏文章真的很不容易，雖然我也同時透過 Evernote 收集，可是 Evernote 沒辦法公開讓大家在網路上瀏覽，因此關於我收集的資源，現在打算透過 MUKI space* 將他們整合在一起。

不過具體的方法我還沒想到，不過層級應該不會大到，特別為他開一個新的 post type 或 category 😓，有可能是每週更新一次文章，把所有資源集合起來吧，如果大家有更好的意見也歡迎提供給我參考喔!

首頁下方

首頁下方就是文章的彙整啦！放了我寫的一些技術教學文，還有最新的電影心得，當然都是丟給程式去判斷，搭配 slick plugin，在手機上可以直接用手拖曳文章，在桌機上可以試著用滑鼠拖曳唷，drag事件寫得非常好，就不用再特別針對手機版做處理的，大家有興趣可以自行研究看看。

光是講完首頁的設計，文章就有一點長度了 (碎嘴木再現)，所以如果你對內頁還有興趣，歡迎你把每一頁都點過一次，體會一下我這次的用心！！

其實卯起來做的時間沒有很久，如果每天都很專注改版，大概一個月以內可以做完，絕對沒有問題，只能說，拖字訣實在恐怖 😓，但成品我非常滿意，所以中間的偷懶就略過不追究啦 XDD。

關於資料的轉移

最後要跟大家說聲抱歉，這次改版還有一個很大的變化，就是連網址都改成：https://muki.tw，以後不會再用 http://mukispace.com 對外宣傳，但這個網址依然會持續續約。

另外原本的 MUKI space* 存了七年的遺毒，從以前不太懂 WordPress 開始就一直亂塞資料，又裝了很多奇怪的外掛，導致資料庫肥厚無比，老實說想優化也很無力，乾脆就重新建一個新的 blog 重新來過！而且按照我的龜毛個性，每一篇文章都要親自改過、潤過，包含消失的圖片，可能也要花時間重新製作，總之是個浩大的工程！！

所以雖然改版完成，但文章還沒有搬完，大家如果是從 Google 搜尋到我的網站，可能會發現兩個網站並存的尷尬情況，不過我會每天抽空搬一些，也會持續寫新文章，希望可以早日完成新家的配置 XDDD。有的舊文章實在年代久遠又沒啥意義的，我就不會再搬到新家囉～

最後老話一句，對新的 MUKI space* 有甚麼感受？歡迎留言告訴我喔 👋，也非常謝謝大家對我的鼓勵，如果可以，也希望你們能夠繼續支持 MUKI space* (https://muki.tw) m(_ _)m

關於這裡介紹

經歷與介紹

經歷與介紹所有的東西都改用 meta box 製作，也就是說全部都可以透過 WordPress 後台更新啦，這樣以後就不用從 php 寫完檔案，然後再上傳到 FTP 了(淚

前面有提到，在「我的部落格」分類中，有跟大家簡單描述改版的理念，然後放上幾個簡單的時間軸介紹，其實中間很多都省略了，因為一些值得高興的事情，例如通過古早以前的藍眼關注，或是 Google Page Rank 曾經到 6，感覺都已經是過往雲煙了啊(茶)

再來下方有「演講/授課經歷」以及我「寫/譯過的書」這兩塊都是用 tab(選項卡)製作，所以大家可以點選標題切換，觀看更細節的內容唷！

服務項目

在服務項目的部分，分門別類的寫出我現在有在接的案子，不管是企業授課，或是回到部落客的寫文 / 開箱，或是從手帳寫真那邊合作都可以唷！
有興趣的話，可以直接點選服務項目進去觀看，右側就有聯絡表單可以直接聯繫我 😀

技術文章

個人覺得技術文章是最沒啥好講的😊，因為他就是一般的部落格形式，只是這次圖文形式有些不同，為了省空間(?)，所以改成一列三篇的配置。
不過現在文章還沒有很齊全，正在努力從舊站一篇一篇搬過來 >Q<，現在還在思考技術文章要不要補上特色圖片，不然每一天特色圖片都長得一樣，大家看久可能會做惡夢吧～

課程介紹

有感於這兩年多點了一個講師的技能，雖然不知道可以開多少(畢竟這塊競爭也很強大)，但為了讓大家資訊更加集中，所以我也規劃了一個課程區域，將我主講的課程統整起來，以後大家要找課程或報名也比較方便！！

課程也是一樣直接從 WordPress 上資料，雖然還沒有辦法自動地做出招生滿額這類的資訊，也沒有串金流，但我想資訊的整合對大家還是有幫助的 XDD

電影介紹

電影也是特別為我的需求量身打造的！所以最後就來好好的談談他的特色吧

如何找到自己想看的電影，是很重要的事情，所以我在這邊用了之前介紹的使用 CSS:not 與 data-index 即時搜尋頁面，讓大家即時搜尋想看的電影。但是這個方法有個壞處，就是他只能搜尋當頁的內容(畢竟是 CSS 的小 trick)，所以假設數量一多，又不能用分頁的情況下，勢必要再做一些調整。

但現在該慶幸的是電影數量沒有很多😓，所以全部顯示出來也不會有啥大問題 XDDD

電影單篇文章也有特別做過排版，大家有興趣也可以點進去看看喔，可以當作是一個小小型的電影資訊站呢:P