摘要：或者可以更加傻瓜一點(diǎn)，把過程寫到一個(gè)回調(diào)函數(shù)中的請(qǐng)求或者原生的的方法，這樣產(chǎn)品訪問某一個(gè)就可以自動(dòng)生成頁面了。又或者終極一點(diǎn)，把上線過程也寫到回調(diào)函數(shù)中，這樣便實(shí)現(xiàn)了從到線上頁面的全部自動(dòng)化，整個(gè)過程對(duì)產(chǎn)品人員完全不可見。

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

我們看一下，要完成這件事，其實(shí)就是使用Excel中的數(shù)據(jù)生成一個(gè)靜態(tài)頁面，我們引用《變形金剛》里墮落金剛的一句話：

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

  魔方只不過是個(gè)載體，它的能量和知識(shí)永遠(yuǎn)不會(huì)毀滅，只是變換了形態(tài)。

數(shù)據(jù)無處不在，區(qū)別僅在于存儲(chǔ)形式，我們可以從文本、數(shù)據(jù)庫、遠(yuǎn)程等等方式獲取數(shù)據(jù)，只要有了數(shù)據(jù)，便可以做任何可以做的事情了。

下面介紹一下實(shí)現(xiàn)過程，我們以nodejs語言為例說明（其他語言類似）。

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

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

Excel形式為

得到的xlsxData的數(shù)據(jù)形式為

{
    "worksheets": [
        {
            "name": "Sheet1", // sheet
            "data": [ 
                [ // 每一個(gè)array為表格中的一行數(shù)據(jù)
                    { // 每一個(gè)obj為表格中的一個(gè)單元格
                        "value": "火熱桑巴（大）",
                        "formatCode": "General"
                    },
                    {
                        "value": null,
                        "formatCode": "General"
                    },
                    {
                        "value": null,
                        "formatCode": "General"
                    }
                ],
                [
                    {
                        "value": "文案",
                        "formatCode": "General"
                    },
                    {
                        "value": "圖片URL",
                        "formatCode": "General"
                    },
                    {
                        "value": "轉(zhuǎn)化后鏈接",
                        "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"
                    }
                ]
                ...

第二步就是處理數(shù)據(jù)，產(chǎn)品在填寫Excel表格時(shí)當(dāng)然不會(huì)考慮開發(fā)人員會(huì)怎么使用，而我們就需要把得到的數(shù)據(jù)處理成我們方便使用的形式。我們發(fā)現(xiàn)，Excel的填寫還是非常有規(guī)律的（感謝產(chǎn)品妹子），頁面的每一個(gè)區(qū)域，首先是文字說明，然后是數(shù)據(jù)類型的說明（文案、圖片URL、URL地址），然后就是地址數(shù)據(jù)了。

我們首先剔除不需要的數(shù)據(jù)

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

然后根據(jù)區(qū)域的文字說明，定義一個(gè)文字到key的map

var codeMap = {
    "火熱桑巴（大）": "huoresangba1",
    "火熱桑巴（小）": "huoresangba2",
    "火熱桑巴（文字鏈）": "huoresangbaText",
    "官方戰(zhàn)服（大）": "guanfangzhanfu1",
    ...
};

之后就是遍歷每一行的數(shù)據(jù)

    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);
            }
        }
    }

最終得到的是一個(gè)名為result的object。

最后就是使用得到的對(duì)象生成靜態(tài)頁面，這里將會(huì)用到模板引擎，我們使用的是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(已失效)

為了實(shí)現(xiàn)產(chǎn)品的自助編輯，我們可以在服務(wù)器上搭建一個(gè)samba服務(wù)器，把excel文件放到samba服務(wù)器上，然后告訴產(chǎn)品直接編輯Excel文件即可。

我們可以把生成頁面的這個(gè)過程寫成一個(gè)nodejs的腳本，產(chǎn)品編輯完之后執(zhí)行node make.js即可生成頁面。或者可以更加傻瓜一點(diǎn)，把過程寫到一個(gè)http回調(diào)函數(shù)中（express的get請(qǐng)求或者原生的nodejs的http方法），這樣產(chǎn)品訪問某一個(gè)URL就可以自動(dòng)生成頁面了。又或者終極一點(diǎn)，把上線過程也寫到http回調(diào)函數(shù)中，這樣便實(shí)現(xiàn)了從excel到線上頁面的全部自動(dòng)化，整個(gè)過程對(duì)產(chǎn)品人員完全不可見。

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

一般來說，一個(gè)健全的部門或者公司應(yīng)該都有一個(gè)專門的專題制作、發(fā)布系統(tǒng)。這種方法相對(duì)來說還是較為原始的。