2014-11-24

部落格架構更新與狀態

1. 反應速度
2. 額外分頁的建立
3. 主題設定檔
4. Ukagaka

當前使用主題為 hexo-theme-landscape，早期使用 pacman，自己修改成 moman 一個黑色系主題，但是隨著文章數量的增加，pacman 樣板的生成速度越來越慢，更新 hexo 後，發現 landscape 的速度異常地快，於是將整個樣板配色轉移到 landscape。

想打包我嗎？直接至 morris821028/morris821028.github.io 下載即可。還是即時的版本呢，可惜地是無法再用 hexo 繼續產生文章，也就是要新增一篇文章是困難的。這裡有純草稿 morris821028/HexoBlog 提供，偶爾會更新，這偶爾想必是挺久的日子。往後要在其他主題下部屬也不是問題！

反應速度

由於 hexo 本身就是 靜態網頁 的框架，所以不會有資料庫調用問題，反應速度理所當然會快很多。為了增加網頁的反應速度，要把不少重複的框捨去，siderbar 訊息最小化！

原理就當作編寫 markdown，利用 hexo 編譯成 html 後上傳。跟一般寫 cpp 程式很像呢！

將 Tags 搬移到額外的分頁，由於每一個頁面下都會出現在 sidebar，無用訊息量太多導致載入速度拉慢，不要忽視使用者經驗 (UX)！

額外分頁的建立

/blog/source/tags/index.md

1
2
3

title: Tags
layout: tags
---

hexo 配置是採用每一個 markdown 上的參數 layout。接著只需要在主題下寫一個 /themes/landscape/layout/tags.ejs，到時候會直接經過 layout.ejs 呼叫 tags.ejs。

接著就可以在 http://localhost:4000/tags/ 下看到自己想要頁面，一般而言不會有這一頁，會呈現 NOT FOUND 404 狀態。

主題設定檔

既然有用 font awesome ，覺得在默認主題下 Home 顯得不太夠力且明瞭，直接點擊 logo 也是能返回主頁。於是把設定檔案改成以下內容，搭配圖示和文字描述，希望這種方式會更脫離死板的配置。

/themes/landscape/_config.yml

menu:
  - {name: Home, path: /, class: icon-home, layout: 1}
  - {name: About, path: /about, class: icon-user, layout: 2}
  - {name: Archives, path: /archives, class: icon-archive, layout: 2}
  - {name: Tags, path: /tags, class: icon-tags, layout: 2}
  - {name: Pictures, path: /picture, class: icon-camera, layout: 2}
  - {name: Works, path: /works, class: icon-trophy, layout: 2}

接著在 header.ejs 下修改一下內容，畢竟參數上有點調整。

/themes/landscape/layout/_partial/header.ejs

<a id="main-nav-toggle" class="nav-icon"></a>
<% for (var i in theme.menu){ %>
  <% if (theme.menu[i].layout && theme.menu[i].layout == 1) { %>
    <a class="main-nav-link" href="<%- url_for(theme.menu[i].path) %>"><i class=<%= theme.menu[i].class %> title='<%= theme.menu[i].name %>'></i></a>
  <% } else if (theme.menu[i].layout && theme.menu[i].layout == 2) { %>
    <a class="main-nav-link" href="<%- url_for(theme.menu[i].path) %>"><i class=<%= theme.menu[i].class %> title='<%= theme.menu[i].name %>'></i> <%= theme.menu[i].name %></a>
  <% } else { %>
    <a class="main-nav-link" href="<%- url_for(theme.menu[i].path) %>"><%= theme.menu[i].name %></a>
  <% } %>
<% } %>

Ukagaka

由於 史蒂芙 任務結束，現在由 派拉斯 接管，她們的個人照片都可以在 Pictures 中見到哦！

關於 Ukagaka 的製作，目前把音樂坑解決，將可以在功能列表中看到音樂撥放功能！實作採用 HTML5 + js 的方式，並且把圖片部分全部用 font awesome 解決，功能還不夠齊全，希望已經能符合最低需求。

其實很早就用 HTML5 + js 弄過音樂撥放，但遲遲沒有嫁入到 Ukagaka 中。

音樂部份的免空是個問題，目前用容量較小的音樂檔案放置 hexo 中一起部屬。

至於 AIML 的 AI 智能對話部分，之前停留在 JAVA 那邊，暫且還不會去完成她，其一原因是必須轉成比較好跑在 server 上面的版本，並且能應付多人單一的狀態保留。如果不寫 web socket，必然要透過 ip 進行辨識，至少能記住當前使用者的名稱 (如果有教導 Ukagaka 的話)。

根據之前用 nodejs 寫 web socket 完成 chat room 的感想，有一部分是相當難理解的 js，同時存在瀏覽器要解析的 js 中，模組部分很好奇實際運作原理，詳細還沒有理解。

Morris' Blog

部落格架構更新與狀態

contents

反應速度

額外分頁的建立

主題設定檔

Ukagaka