Responsive design

.travis.yml

@@ -23,8 +23,7 @@ before_install:
   - git clone https://github.com/hexojs/hexojs.github.io .deploy_git
 
 script:
-  - hexo generate
-  - hexo deploy
+  - hexo generate && gulp && hexo deploy
 
 branches:
   only:

_config.yml

@@ -24,6 +24,6 @@ deploy:
 disqus_shortname: hexojs
 google_analytics: UA-4910098-10
 fb_admins: 100000247608790
-swiftype_key: DDvzs7LQ9kdKssQNQLcv
+swiftype_key: EwN4HMy_KMxTK_GMjV1z
 twitter: hexojs
 github: hexojs/hexo

gulpfile.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+
+var htmlMinifierOptions = {
+  removeComments: true,
+  collapseWhitespace: true,
+  collapseBooleanAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+  removeOptionalTags: true,
+  minifyJS: true,
+  minifyCSS: true
+};
+
+gulp.task('useref', function(){
+  var assets = $.useref.assets({
+    searchPath: 'public'
+  });
+
+  return gulp.src('public/**/*.html')
+    .pipe(assets)
+    .pipe($.if('*.css', $.minifyCss()))
+    .pipe($.if('*.js', $.uglify()))
+    .pipe($.rev())
+    .pipe(assets.restore())
+    .pipe($.useref())
+    .pipe($.revReplace({
+      prefix: '/'
+    }))
+    .pipe($.if('*.html', $.htmlMinifier(htmlMinifierOptions)))
+    .pipe(gulp.dest('public'));
+});
+
+gulp.task('default', ['useref']);

package.json

@@ -20,5 +20,17 @@
     "hexo-server": "^0.1.1",
     "lodash": "^3.0.0",
     "lunr": "^0.5.7"
+  },
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-html-minifier": "^0.1.6",
+    "gulp-if": "^1.2.5",
+    "gulp-load-plugins": "^0.8.0",
+    "gulp-minify-css": "^0.4.6",
+    "gulp-minify-html": "^1.0.0",
+    "gulp-rev": "^3.0.1",
+    "gulp-rev-replace": "^0.3.4",
+    "gulp-uglify": "^1.1.0",
+    "gulp-useref": "^1.1.1"
   }
 }

scripts/helpers.js

@@ -42,7 +42,7 @@ hexo.extend.helper.register('page_nav', function(){
   return result;
 });
 
-hexo.extend.helper.register('doc_sidebar', function(){
+hexo.extend.helper.register('doc_sidebar', function(className){
   var type = this.page.canonical_path.split('/')[0];
   var sidebar = this.site.data.sidebar[type];
   var path = pathFn.basename(this.path);
@@ -51,20 +51,20 @@ hexo.extend.helper.register('doc_sidebar', function(){
   var prefix = 'sidebar.' + type + '.';
 
   _.each(sidebar, function(menu, title){
-    result += '<strong class="sidebar-title">' + self.__(prefix + title) + '</strong>';
+    result += '<strong class="' + className + '-title">' + self.__(prefix + title) + '</strong>';
 
     _.each(menu, function(link, text){
-      var className = 'sidebar-link';
-      if (link === path) className += ' current';
+      var itemClass = className + '-link';
+      if (link === path) itemClass += ' current';
 
-      result += '<a href="' + link + '" class="' + className + '">' + self.__(prefix + text) + '</a>';
+      result += '<a href="' + link + '" class="' + itemClass + '">' + self.__(prefix + text) + '</a>';
     })
   });
 
   return result;
 });
 
-hexo.extend.helper.register('header_menu', function(){
+hexo.extend.helper.register('header_menu', function(className){
   var menu = this.site.data.menu;
   var result = '';
   var self = this;
@@ -74,8 +74,8 @@ hexo.extend.helper.register('header_menu', function(){
   _.each(menu, function(path, title){
     if (!isEnglish && ~localizedPath.indexOf(title)) path = lang + path;
 
-    result += '<li class="main-nav-item">';
-    result += '<a href="' + self.url_for(path) + '" class="main-nav-link">' + self.__('menu.' + title) + '</a>';
+    result += '<li class="' + className + '-item">';
+    result += '<a href="' + self.url_for(path) + '" class="' + className + '-link">' + self.__('menu.' + title) + '</a>';
     result += '</li>';
   });
 

source/_data/sidebar.yml

@@ -38,7 +38,6 @@ api:
     scaffolds: scaffolds.html
     themes: themes.html
   extensions:
-    overview: extensions.html
     console: console.html
     deployer: deployer.html
     filter: filter.html

source/index.jade

@@ -1,6 +1,7 @@
 layout: index
 description: Hexo is a fast, simple & powerful blog framework powered by Node.js.
 subtitle: A fast, simple & powerful blog framework
+comments: false
 ---
 ul#intro-feature-list
   li.intro-feature-wrap

source/plugins/index.md

@@ -2,4 +2,5 @@ layout: plugins
 title: Plugins
 data: plugins
 partial: plugin
+comments: false
 ---

source/themes/index.md

@@ -2,4 +2,5 @@ layout: plugins
 title: Themes
 data: themes
 partial: theme
+comments: false
 ---

source/zh-cn/index.jade

@@ -1,6 +1,7 @@
 layout: index
 description: Hexo is a fast, simple & powerful blog framework powered by Node.js.
 subtitle: 快速、简洁且高效的博客框架
+comments: false
 ---
 ul#intro-feature-list
   li.intro-feature-wrap

source/zh-tw/api/box.md

@@ -2,3 +2,59 @@ title: 箱子（Box）
 ---
 「箱子」是 Hexo 用來處理特定資料夾中的檔案的容器，在 Hexo 中有兩個箱子，分別是 `hexo.source` 和 `hexo.theme`，前者用於處理 `source` 資料夾，而後者用於處理主題資料夾。
 
+## 載入檔案
+
+箱子提供了兩種方法來載入檔案：`process`, `watch`，前者用於載入資料夾內的所有檔案；而後者除了執行 `process` 以外，還會繼續監看檔案變動。
+
+``` js
+box.process().then(function(){
+  // ...
+});
+
+box.watch().then(function(){
+  // 之後可呼叫 box.unwatch() 停止檔案監看
+});
+```
+
+## 路徑比對
+
+箱子提供了多種路徑比對的模式，您可使用正規表達式（regular expression）、函數、或是一種類似於 Express 的路徑字串，例如：
+
+``` plain
+posts/:id => posts/89
+posts/*path => posts/2015/title
+```
+
+您可參考 [util.Pattern] 以獲得更多資訊。
+
+## 處理器（Processor）
+
+處理器（Processor）是箱子中非常重要的元素，它用於處理檔案，您可使用上述的路徑比對來限制該處理器所要處理的檔案類型。使用 `addProcessor` 來註冊處理器。
+
+``` js
+box.addProcessor('posts/:id', function(file){
+  //
+});
+```
+
+箱子在處理時會把目前處理的檔案內容（`file`）傳給處理器，您可透過此參數取得該檔案的資訊。
+
+屬性 | 描述
+--- | ---
+`source` | 檔案完整路徑
+`path` | 檔案相對於箱子的路徑
+`type` | 檔案類型。有 `create`, `update`, `skip`, `delete`。
+`params` | 從路徑比對中取得的資訊
+
+箱子還提供了一些方法，讓您無須自行處理檔案 IO。
+
+方法 | 描述
+--- | ---
+`read` | 讀取檔案
+`readSync` | 同步讀取檔案
+`stat` | 讀取檔案狀態
+`statSync` | 同步讀取檔案狀態
+`render` | 渲染檔案
+`renderSync` | 同步渲染檔案
+
+[util.Pattern]: https://github.com/hexojs/hexo-util#patternrule

source/zh-tw/api/posts.md

@@ -0,0 +1,7 @@
+title: 文章
+---
+## 建立文章
+
+## 發佈草稿
+
+## 渲染

source/zh-tw/api/rendering.md

@@ -0,0 +1,2 @@
+title: 渲染
+---

source/zh-tw/index.jade

@@ -1,6 +1,7 @@
 layout: index
 description: Hexo is a fast, simple & powerful blog framework powered by Node.js.
 subtitle: 快速、簡單且強大的網誌框架
+comments: false
 ---
 ul#intro-feature-list
   li.intro-feature-wrap

themes/navy/layout/archive.swig

@@ -3,9 +3,11 @@
   <div id="content" class="wrapper">
     <div id="content-inner">
       <div class="article-container">
-        {% for post in page.posts %}
-          {{ partial('partial/post', {post: post}) }}
-        {% endfor %}
+        <div class="inner">
+          {% for post in page.posts %}
+            {{ partial('partial/post', {post: post, loop_index: loop.index}) }}
+          {% endfor %}
+        </div>
       </div>
       {{ partial('partial/recent_posts') }}
     </div>

themes/navy/layout/layout.swig

@@ -2,9 +2,13 @@
 <html>
 {{ partial('partial/head') }}
 <body class="{% if is_home() %}home{% endif %}">
-  {{ partial('partial/header') }}
-  {{ body }}
-  {{ partial('partial/footer') }}
+  <div id="container">
+    {{ partial('partial/header') }}
+    {{ body }}
+    {{ partial('partial/footer') }}
+  </div>
+  <div id="mobile-nav-dimmer"></div>
+  {{ partial('partial/mobile_nav') }}
   {{ partial('partial/after_footer') }}
 </body>
 </html>

themes/navy/layout/page.swig

@@ -17,11 +17,11 @@
               {{ partial('partial/comment') }}
             </div>
           </div>
-          <aside class="article-toc" role="navigation">
-            <div class="article-toc-inner">
+          <aside id="article-toc" role="navigation">
+            <div id="article-toc-inner">
               <strong class="sidebar-title">{{ __('page.contents') }}</strong>
               {{ toc(page.content, {list_number: false}) }}
-              <a href="#" class="article-toc-top">{{ __('page.back_to_top') }}</a>
+              <a href="#" id="article-toc-top">{{ __('page.back_to_top') }}</a>
             </div>
           </aside>
         </div>

themes/navy/layout/partial/after_footer.swig

@@ -1,14 +1,17 @@
-<!-- jQuery -->
-<script src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
 <!-- Scripts -->
-{{ js('js/raf-polyfill') }}
-{{ js('js/script') }}
+<!-- build:js js/main.js -->
+{{ js('js/lang_select') }}
+{{ js('js/toc') }}
+{{ js('js/mobile_nav') }}
+<!-- endbuild -->
 {% if page.layout === 'plugins' %}
 <!-- Plugin search -->
 <script src="//cdn.jsdelivr.net/lunr/0.5.7/lunr.min.js"></script>
+<!-- build:js js/plugins.js -->
 {{ js('js/plugins') }}
+<!-- endbuild -->
 {% endif %}
-{% if config.disqus_shortname %}
+{% if page.comments and config.disqus_shortname %}
 <!-- Disqus -->
 <script>
   var disqus_shortname = '{{ config.disqus_shortname }}';
@@ -17,21 +20,17 @@
   {% endif %}
   (function(){
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-    dsq.src = '//go.disqus.com/{% if page.comments %}embed.js{% else %}count.js{% endif %}';
+    dsq.src = '//go.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
 </script>
 {% endif %}
 <!-- Swiftype -->
-<script>
-var Swiftype = window.Swiftype || {};
-(function() {
-  Swiftype.key = '<%- config.swiftype_key %>';
+<script type="text/javascript">
+  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
+  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
+  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
 
-  /** DO NOT EDIT BELOW THIS LINE **/
-  var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
-  script.src = "//s.swiftypecdn.com/embed.js";
-  var entry = document.getElementsByTagName('script')[0];
-  document.getElementsByTagName('script')[0].parentNode.insertBefore(script, entry);
-}());
+  _st('install','{{ config.swiftype_key }}');
 </script>

themes/navy/layout/partial/head.swig

@@ -21,7 +21,9 @@
   <meta name="msapplication-TileColor" content="#2f83cd">
   <meta name="msapplication-TileImage" content="{{ url_for('icon/mstile-144x144.png') }}">
   <!-- CSS -->
+  <!-- build:css css/navy.css -->
   {{ css('css/navy') }}
+  <!-- endbuild -->
   <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <!-- RSS -->

themes/navy/layout/partial/header.swig

@@ -1,11 +1,11 @@
 <header id="header" class="wrapper">
-  <div class="inner">
-    <h1>
+  <div id="header-inner" class="inner">
+    <h1 id="logo-wrap">
       <a href="{{ url_for_lang('') }}" id="logo">Hexo</a>
     </h1>
     <nav id="main-nav">
       <ul>
-        {{ header_menu() }}
+        {{ header_menu('main-nav') }}
         <li class="main-nav-item">
           <a href="https://github.com/{{ config.github }}" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
         </li>
@@ -22,5 +22,11 @@
     <div id="search-btn-wrap" class="main-nav-item">
       <a id="search-btn" class="main-nav-link st-search-launcher"><i class="fa fa-search"></i></a>
     </div>
+    <a id="mobile-nav-toggle">
+      <span class="mobile-nav-toggle-bar"></span>
+      <span class="mobile-nav-toggle-bar"></span>
+      <span class="mobile-nav-toggle-bar"></span>
+    </a>
+    <a id="mobile-search-btn" class="st-search-launcher"></a>
   </div>
 </header>

themes/navy/layout/partial/mobile_nav.swig

@@ -0,0 +1,21 @@
+<nav id="mobile-nav">
+  <div id="mobile-nav-inner">
+    <ul id="mobile-nav-list">
+      {{ header_menu('mobile-nav') }}
+      <li class="mobile-nav-item">
+        <a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
+      </li>
+    </ul>
+    {% if page.layout == 'page' %}
+      {{ doc_sidebar('mobile-nav') }}
+    {% endif %}
+  </div>
+  <div id="mobile-lang-select-wrap">
+    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>{{ site.data.languages[page.lang] }}</span></span>
+    <select id="mobile-lang-select" data-canonical="{{ canonical_path_for_nav() }}">
+      {% for lang in site.data.languages %}
+        <option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang }}</option>
+      {% endfor %}
+    </select>
+  </div>
+</nav>