摘要：或者可以更加傻瓜一點，把過程寫到一個回調函數中的請求或者原生的的方法，這樣產品訪問某一個就可以自動生成頁面了。又或者終極一點，把上線過程也寫到回調函數中，這樣便實現了從到線上頁面的全部自動化，整個過程對產品人員完全不可見。

專題頁面通常是一些為了當時的活動而做的一些短期的頁面，有的專題，僅僅是一些說明信息，沒有過多的鏈接，此時直接切大圖就可以完成。而有一些專題是為了推廣自家或者其他方的產品，常常會有很多鏈接在頁面中，而通常情況下，產品提供給開發人員的是一個包含很多URL地址和圖片地址的Excel文件，要把這些鏈接填到頁面中，難道真要一個個復制粘貼嗎？如果真這么做，那么這件事就變成了一件體力活。程序猿通常是很“懶”的，這種機械的勞動當然不符合程序猿的風格。

我們看一下，要完成這件事，其實就是使用Excel中的數據生成一個靜態頁面，我們引用《變形金剛》里墮落金剛的一句話：

  
The Cube was merely a vessel.Its power, its knowledge, can never be destroyed.It can only transform.

  魔方只不過是個載體，它的能量和知識永遠不會毀滅，只是變換了形態。

數據無處不在，區別僅在于存儲形式，我們可以從文本、數據庫、遠程等等方式獲取數據，只要有了數據，便可以做任何可以做的事情了。

下面介紹一下實現過程，我們以nodejs語言為例說明（其他語言類似）。

第一步就是把Excel中的數據提取出來，我們使用node-xlsx

var xlsx = require("node-xlsx");
var xlsxData = xlsx.parse(path.join(__dirname, "file.xlsx"));

Excel形式為

得到的xlsxData的數據形式為

{
    "worksheets": [
        {
            "name": "Sheet1", // sheet
            "data": [ 
                [ // 每一個array為表格中的一行數據
                    { // 每一個obj為表格中的一個單元格
                        "value": "火熱桑巴（大）",
                        "formatCode": "General"
                    },
                    {
                        "value": null,
                        "formatCode": "General"
                    },
                    {
                        "value": null,
                        "formatCode": "General"
                    }
                ],
                [
                    {
                        "value": "文案",
                        "formatCode": "General"
                    },
                    {
                        "value": "圖片URL",
                        "formatCode": "General"
                    },
                    {
                        "value": "轉化后鏈接",
                        "formatCode": "General"
                    }
                ],
                [
                    {
                        "value": 1,
                        "formatCode": "General"
                    },
                    {
                        "value": "http://p5.123.sogoucdn.com/imgu/2014/06/20140619140300_884.jpg",
                        "formatCode": "General"
                    },
                    {
                        "value": "http://xxxxx",
                        "formatCode": "General"
                    }
                ]
                ...

第二步就是處理數據，產品在填寫Excel表格時當然不會考慮開發人員會怎么使用，而我們就需要把得到的數據處理成我們方便使用的形式。我們發現，Excel的填寫還是非常有規律的（感謝產品妹子），頁面的每一個區域，首先是文字說明，然后是數據類型的說明（文案、圖片URL、URL地址），然后就是地址數據了。

我們首先剔除不需要的數據

// 此處僅僅是以我的項目為例，應對應具體情況修改
xlsxData = xlsxData.worksheets[0].data;
xlsxData = xlsxData.map(function(line, index) {
    return line.filter(function(td, index) {
        return typeof td.value !== "number";
    });
});

然后根據區域的文字說明，定義一個文字到key的map

var codeMap = {
    "火熱桑巴（大）": "huoresangba1",
    "火熱桑巴（?。?: "huoresangba2",
    "火熱桑巴（文字鏈）": "huoresangbaText",
    "官方戰服（大）": "guanfangzhanfu1",
    ...
};

之后就是遍歷每一行的數據

    var result = {},
        index = 0,
        obj = null,
        arr = null,
        item = null,
        currTitle = "";
    while (item = xlsxData.shift()) {
        if (item[0]) {
            if (codeMap[item[0].value]) {
                var pinyin = codeMap[item[0].value];
                currTitle = item[0].value;
                result[pinyin] = arr = [];
            } else if (item[0].value !== "文案") {
                obj = {};
                obj.txt = item[0].value;
                obj.url = item[1].value;
                arr.push(obj);
            }
        }
    }

最終得到的是一個名為result的object。

最后就是使用得到的對象生成靜態頁面，這里將會用到模板引擎，我們使用的是swig（ejs,jade,nunjucks等等都可以）

模板的大致形式如下：

{% for item in huoresangba1 %}

    

{% endfor %}

生成頁面

var tpl = swig.compileFile(path.join(__dirname, "page.tpl"));
try {
   fs.writeFileSync("worldcup2014.html", tpl(result));
} catch (e) {
   console.log(e);
}

生成的worldcup2014.html頁面就是最終的頁面了。

此文章的最終形式為http://mai.sogou.com/zhuanti/worldcup2014.html(已失效)

為了實現產品的自助編輯，我們可以在服務器上搭建一個samba服務器，把excel文件放到samba服務器上，然后告訴產品直接編輯Excel文件即可。

我們可以把生成頁面的這個過程寫成一個nodejs的腳本，產品編輯完之后執行node make.js即可生成頁面。或者可以更加傻瓜一點，把過程寫到一個http回調函數中（express的get請求或者原生的nodejs的http方法），這樣產品訪問某一個URL就可以自動生成頁面了。又或者終極一點，把上線過程也寫到http回調函數中，這樣便實現了從excel到線上頁面的全部自動化，整個過程對產品人員完全不可見。

對于經常需要修改的頁面，這個過程可以使得開發人員從枯燥的復制粘貼鏈接的過程中解放出來，完全交給產品自助完成，而產品使用起來也是十分方便，僅需要關注Excel的編輯即可，可以節省大量的交流成本。這種形式適合于短期的，需要經常修改的，而又沒必要做一個完整后臺的頁面。

一般來說，一個健全的部門或者公司應該都有一個專門的專題制作、發布系統。這種方法相對來說還是較為原始的。