仿B站项目(3)页面配置

页面配置

B站有很多页面,比如说首页啊,动画页啊,音乐页啊,舞蹈页啊,那就从首页开始。

通过观察首页,可以看见有很多模块除了内容之外,在布局颜色等方面都是一样的,所以我可以开发一些模板或者插件,到时候直接插进主页里面去就行,然后内容数据就设置为可配置的形式。

模板就用ejs,于是我去了解了webpack中多个ejs生成html文件并且导入数据的方法。总结起来有2种。

ejs-loader

(1)在webpack.config.js中配置用ejs-loader解析ejs文件。(我只写了重要的部分,其它一些配置和插件我都没有写)

  module: {
rules: [
{
test: /\.ejs$/,
use: {
loader: 'ejs-loader?variable=user',
}
}
]
},
plugins: [
//使用模板生成html文件
new HtmlWebpackPlugin({
data: haha,
filename:'index.html',
template: 'src/page/template.html',
title:'this is index',
chunks: ['index']
})
]
};

(2)然后在index.html文件的对应要插入的位置用id标示出来。(比如说我要在下面的id为header的div里面插入一个header.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="header"></div>
</body>
</html>

(3)header.ejs文件是这样的,里面有一些数据需要传进去。

<div><%= user.name %></div>

(4)在index.js里面调用模板,并且插到index.html文件里面去,就完成了。

var indexTpl = require('./header.ejs');
var user = {
name: '我是谁'
};
document.getElementById("header").innerHTML=indexTpl(user);

这样有一个缺点,就是打包出来的html文件里面没有要插入的内容,实际渲染的时候是在页面加载完成后通过js渲染的,这样的话会给浏览器造成一些压力,并且会拖慢页面的显示时间。

我们需要一个在打包前,就把模板加入到index.html文件里面去的方法。就是方法二。

ejs-compiled-loader

(1)在webpack.config.js中不用ejs-loader解析ejs文件,而是直接在HtmlWebpackPlugin插件中用ejs-compiled-loader解析ejs文件。由于没有用ejs-loader,所以后缀不能写成ejs,都改成html。(我只写了重要的部分,其它一些配置和插件我都没有写)

  module: {
rules: [
{
test: /\.ejs$/,
use: {
loader: 'ejs-loader',
}
}
]
},
plugins: [
//使用模板生成html文件
new HtmlWebpackPlugin({
filename:'index.html',
template: 'ejs-compiled-loader!src/page/template.html',
title:'this is index',
chunks: ['index']
})
]
};

(2)然后在index.html文件的对应要插入的位置用ejs语言写出来。(比如说我要在下面的id为header的div里面插入一个header.html)

<% var user = {
name: '我是谁'
} %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% include src/page/header.html %>
</body>
</html>

(3)header.html文件和刚才一样。

<div><%= user.name %></div>

(4)和刚才不一样的是,index.js什么都不需要做。

注意:上面是在html中直接用ejs语言引入数据的,但是也可以用js引入数据。代码需要修改如下:

//新建user.js文件
const user = {
name: '我是谁'
};
module.exports = user; //在webpack.config.js中引入user.js
const user = require('./src/page/user.js');
plugins: [
new HtmlWebpackPlugin({
data: user, //引入user
filename:'index.html',
template: 'ejs-compiled-loader!src/page/template.html',
title:'this is index',
chunks: ['index']
})
] //header.html文件中的变量变一下
<div><%= htmlWebpackPlugin.options.data.name %></div>

一个问题

上面的方法生成了一个完整的html文件,对于小的不需要经常改动的页面来说非常合适。

但是对于大的每天需要更新一次的B站来说呢?每天怎么更新?如果把数据结合写死在页面的话,就需要更新整个页面,显然不合适。

这个时候我脑光一现,想起了单web应用这本书的内容,那么为何不利用SPA的做法,用js来把页面导进去?

留着明天开发了。

上一篇:KStar ----BPM应用框架,K2 的新星


下一篇:【题解】P5018 [NOIP2018 普及组] 对称二叉树