Update README. Add fancyindex webpack config. Add build release shell.

.gitignore

@@ -22,3 +22,4 @@ yarn-error.log*
 
 /public/list.json
 /php/origin.json
+/dist.zip

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Ganlv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,21 +1,84 @@
 # down_52pojie_cn
 
-## Project setup
-```
-npm install
+## 部署
+
+在 GitHub Release 页面，下载 dist 的压缩包，解压到服务器根目录。
+
+在服务器安装 [ngx-fancyindex](https://github.com/aperezdc/ngx-fancyindex)，然后 ngx-fancyindex 配置方法如下。
+
+```nginx
+location / {
+    fancyindex         on;
+    fancyindex_header  "/.fancyindex/header.html";
+    fancyindex_footer  "/.fancyindex/footer.html";
+}
 ```
 
-### Compiles and hot-reloads for development
+推荐将 `scan.php` 移动到服务器的目录以外，防止被他人访问。
+
+修改 `scan.php` 中的配置，示例配置如下，推荐使用绝对路径。
+
+```php
+<?php
+// ==================== config ====================
+
+define('BASE_DIR', '/home/ganlv/Downloads');
+define('OUTPUT_FILE', BASE_DIR . '/list.json');
+$exclude_files = [
+    '/.fancyindex',
+    '/list.json',
+];
 ```
+
+执行 `php scan.php`，即可生成 `list.json`。
+
+用户访问页面时，会请求 `list.json`，请求后面会带一个时间戳参数（例如：`t=153xxxxxxx`），这个时间戳为当天的 UTC 时间 0 点的时间戳，通过这样可以保证浏览器或 CDN 缓存最长是 1 天。
+
+`list.json` 需要放在网站根目录下，可以搜索 `app.js` 中的 `/list.json` 字符串，替换成其他路径。
+
+## 编译
+
+### 开发环境
+
+```bash
+php php/crawl.php
+php php/format.php
+npm install
 npm run serve
 ```
 
-### Compiles and minifies for production
-```
+说明：通过 `php/crawl.php` 爬取爱盘文件列表，通过 `php/format.php` 生成 `list.json`，然后通过 `npm run serve` 启动 Webpack 服务器，Vue Router 使用 hash 方式。
+
+访问 <http://localhost:8080/> 进行调试。
+
+### GitHub Pages 通过 Travis CI 编译
+
+```bash
+php php/crawl.php
+php php/format.php
+npm install
 npm run build
 ```
 
-### Lints and fixes files
-```
-npm run lint
+说明：通过 `php/crawl.php` 爬取爱盘文件列表，通过 `php/format.php` 生成 `list.json`，然后通过 `npm run build` 构建页面，此时 `dist` 文件夹直接部署到 GitHub Pages 即可，Vue Router 使用 hash 方式。
+
+具体可以参考 `.travis.yml`。
+
+### ngx-fancyindex 版本
+
+构建过程
+
+```bash
+npm install
+echo "VUE_APP_ROUTER_MODE=history" > .env.local
+echo "USE_FANCY_INDEX=true" >> .env.local
+echo "FANCY_INDEX_DIR=.fancyindex" >> .env.local
+npm run build
 ```
+
+说明：通过 `npm run build` 构建页面，此时 `dist` 文件夹直接放到网站根目录即可。Vue Router 使用 history 方式。
+
+具体可以参考 `build_release.sh`。
+
+## LICENSE
+

build_release.sh

@@ -0,0 +1,12 @@
+npm install
+echo "VUE_APP_ROUTER_MODE=history" > .env.local
+echo "USE_FANCY_INDEX=true" >> .env.local
+echo "FANCY_INDEX_DIR=.fancyindex" >> .env.local
+npm run build
+rm .env.local
+rm dist/index.html
+rm dist/list.json
+cp LICENSE dist/
+cp php/scan.php dist/
+cp README.md dist/
+zip dist.zip -r dist

php/scan.php

@@ -1,26 +1,47 @@
 <?php
 
+// ==================== config ====================
+
+define('BASE_DIR', dirname(__DIR__) . '\dist');
+define('OUTPUT_FILE', dirname(__DIR__) . '\public\list.json');
 // define('BASE_DIR', '/home/ganlv/Downloads');
-define('BASE_DIR', "C:\Users\Ganlv\Downloads");
-$list = scan(BASE_DIR);
-file_put_contents(dirname(__DIR__) . '/public/list.json', json_encode($list, JSON_UNESCAPED_UNICODE));
+// define('OUTPUT_FILE', BASE_DIR . '/list.json');
+$exclude_files = [
+    '/.fancyindex',
+    '/list.json',
+];
+
+
+
+// ==================================================
+
+date_default_timezone_set('Asia/Shanghai');
 
-function scan($dir)
+foreach ($exclude_files as &$file) {
+    $file = BASE_DIR . $file;
+}
+$list = scan(BASE_DIR, $exclude_files);
+file_put_contents(OUTPUT_DIR, json_encode($list, JSON_UNESCAPED_UNICODE));
+
+function scan($dir, $exclude_files = [])
 {
     return [
         'name' => '/',
-        'children' => scanRecursive($dir),
+        'children' => scanRecursive($dir, $exclude_files),
     ];
 }
 
-function scanRecursive($dir)
+function scanRecursive($dir, $exclude_files = [])
 {
     $result = [];
     foreach (scandir($dir) as $name) {
         if ($name[0] === '.') {
             continue;
         }
-        $path = $dir . DIRECTORY_SEPARATOR . $name;
+        $path = $dir . '/' . $name;
+        if (in_array($path, $exclude_files)) {
+            continue;
+        }
         if (is_dir($path)) {
             $result[] = [
                 'name' => $name,

public/index.html

@@ -63,9 +63,7 @@
     <div class="highlight alert alert-warning no-select">
         <div class="container">
             <p>
-                爱盘服务器带宽资源由
-                <a href="https://www.newdun.com/?down.52pojie.cn" target="_blank"><img class="newdun-logo" src="https://www.newdun.com/static/images/logo1.svg" alt="牛盾"></a>
-                赞助！
+                爱盘服务器带宽资源由<a href="https://www.newdun.com/?down.52pojie.cn" target="_blank"><img class="newdun-logo" src="https://www.newdun.com/static/images/logo1.svg" alt="牛盾"></a>赞助！
             </p>
         </div>
     </div>

src/components/FilePath.vue

@@ -2,7 +2,7 @@
     <div>
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <router-link to="/">{{ process.env.VUE_APP_DOWNLOAD_BASE_URL }}</router-link>
+                <router-link to="/">{{ baseUrl }}</router-link>
             </li>
             <li v-for="part in parts" :key="part.i" :class="{active: part.active}" class="breadcrumb-item">
                 <router-link :to="part.file.path">{{ part.file.name }}</router-link>
@@ -59,6 +59,9 @@
                     }
                 }
                 return _.reverse(parts);
+            },
+            baseUrl() {
+                return process.env.VUE_APP_DOWNLOAD_BASE_URL;
             }
         }
     };

src/main.js

@@ -13,7 +13,7 @@ Vue.config.productionTip = false;
 Vue.use(Router);
 
 const router = new Router({
-    mode: 'history',
+    mode: process.env.VUE_APP_ROUTER_MODE || 'hash',
     base: '/',
     routes: [
         {path: '(.*)', name:'home', component: Home}

src/styles/index.scss

@@ -70,9 +70,9 @@ $navbar-dark-color: #fff;
     margin-bottom: 0;
 
     .newdun-logo {
+      margin: -4px .5em 0;
       height: 1em;
       vertical-align: middle;
-      margin-top: -4px;
     }
   }
 

vue.config.js

@@ -1,7 +1,52 @@
+const path = require('path');
+const fs = require('fs');
+
+function FancyIndexPlugin(options) {
+}
+
+FancyIndexPlugin.prototype.apply = function (compiler) {
+    compiler.plugin('emit', function (compilation, callback) {
+        for (let filename in compilation.assets) {
+            if (filename === 'index.html') {
+                const file = compilation.assets[filename];
+                const html = file.source();
+                console.debug(html);
+                const splitted = html.split('</h1>');
+                const header = splitted[0];
+                const footer = splitted[1];
+                compilation.assets[`${process.env.FANCY_INDEX_DIR}/header.html`] = {
+                    source: function () {
+                        return header;
+                    },
+                    size: function () {
+                        return header.length;
+                    }
+                };
+                compilation.assets[`${process.env.FANCY_INDEX_DIR}/footer.html`] = {
+                    source: function () {
+                        return footer;
+                    },
+                    size: function () {
+                        return footer.length;
+                    }
+                };
+            }
+        }
+        callback();
+    });
+};
+
 module.exports = {
     lintOnSave: process.env.NODE_ENV !== 'production',
     productionSourceMap: false,
     css: {
         extract: true
+    },
+    assetsDir: process.env.USE_FANCY_INDEX ? process.env.FANCY_INDEX_DIR : undefined,
+    chainWebpack: config => {
+        if (process.env.USE_FANCY_INDEX) {
+            config.plugin('fancy-index-plugin').use(FancyIndexPlugin)
+        }
+        config.optimization.splitChunks({});
     }
 };