Thematic pages are usually short-term pages made for the activities at that time. Some of the topics are just some explanatory information without too many links. At this time, you can directly complete the big picture. There are some special topics to promote their own or other products, often there are many links on the page, and usually, the product is provided to the developer is an Excel file containing many URL addresses and image addresses The link is filled in the page, do you really want to copy and paste one by one? If you really do this, then this matter becomes a physical task. Programmed apes are usually very "lazy", and this mechanical labor certainly does not conform to the style of the programmers.
Let's take a look. To accomplish this, we actually use the data in Excel to generate a static page. We quote a sentence from Fallen King Kong in Transformers:
The Cube was merely a vessel. Its power, its knowledge, can never be destroyed. It can only transform
.
Data is everywhere, the difference is only in the form of storage. We can obtain data from text, database, remote, etc. As long as the data is available, we can do anything that can be done.
The following describes the implementation process, we use nodejs language as an example (similar to other languages).
The first step is to extract the data in Excel, we use node-xlsx
var xlsx = require('node-xlsx');
var xlsxData = xlsx.parse(path.join(__dirname, 'file.xlsx'));
Excel format is
xlsxDataThe data obtained is of the form
{
"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"
}
]
...
The second step is to process the data. Of course, the product will not consider how the developer will use it when filling the Excel form, and we need to process the obtained data into a form that is convenient for us to use. We found that Excel fill in is very regular (thanks to the product sister), each area of the page, first is the text description, then the description of the data type (copy, picture URL, URL address), and then the address data.
We first remove unnecessary data
// 此处仅仅是以我的项目为例，应对应具体情况修改
xlsxData = xlsxData.worksheets[0].data;
xlsxData = xlsxData.map(function(line, index) {
return line.filter(function(td, index) {
return typeof td.value !== 'number';
});
});
Then according to the text description of the area, define a text to key map
var codeMap = {
'火热桑巴（大）': 'huoresangba1',
'火热桑巴（小）': 'huoresangba2',
'火热桑巴（文字链）': 'huoresangbaText',
'官方战服（大）': 'guanfangzhanfu1',
...
};
After that, iterate through each row of data
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);
}
}
}
The end result is an resultobject named .
The last is to use the obtained object to generate a static page, here will use the template engine, we use swig (ejs, jade, nunjucks, etc.)
The general form of the template is as follows:
{% for item in huoresangba1 %}
<a href="{{ item.url|safe }}" target="_blank">
<img src="{{ item.img }}" alt="图片">
</a>
{% endfor %}
Generate page
var tpl = swig.compileFile(path.join(__dirname, 'page.tpl'));
try {
fs.writeFileSync('worldcup2014.html', tpl(result));
} catch (e) {
console.log(e);
}
The resulting worldcup2014.htmlpage is the final page.
The final form of this article ishttp://mai.sogou.com/zhuanti/worldcup2014.html (Expired)
In order to realize self-editing of the product, we can build a samba server on the server, put the excel file on the samba server, and then tell the product to directly edit the Excel file.
We can write the process of generating a page as a nodejs script, which node make.jscan be generated after the product is edited and executed . Or you can be a little more fool and write the process into an http callback function (express get request or native nodejs http method), so that the product can automatically generate a page when accessing a certain URL. Or at the end, the online process is also written into the http callback function, so that all automation from excel to online pages is realized, and the entire process is completely invisible to product personnel.
For pages that often need to be modified, this process can free developers from the boring process of copying and pasting links, and it is completely handed over to the product for self-service. The product is also very convenient to use. Only need to pay attention to Excel editing Save a lot of communication costs. This form is suitable for short-term, frequently modified, but there is no need to make a complete background page.
Generally speaking, a sound department or company should have a special topic production and release system. This method is relatively primitive.