页面配置

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来把页面导进去?

留着明天开发了。

仿B站项目(3)页面配置的更多相关文章

  1. 仿B站项目——(2)环境配置,文件目录

    环境配置 主要参考入门Webpack,看这篇就够了,webpack入门和webpack实用配置. 实用开发环境 利用下面的webpack.json和webpack.config.js可以搭建一个使用e ...

  2. 仿B站项目——(1)计划,前端工程

    计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...

  3. 仿B站项目(4)webpack打包第三方库jQuery

    概述 在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决. 遇到的问题 一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bun ...

  4. 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  5. vue-cli项目多页面配置

    参考 : https://www.jianshu.com/p/0a30aca71b16

  6. 37 Flutter仿京东商城项目 结算页面布局

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...

  7. 25 Flutter仿京东商城项目 购物车页面布局

    加群452892873 下载对应25课文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...

  8. 15 Flutter仿京东商城项目 搜索页面布局

    Search.dart import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAd ...

  9. 使用Vue-cli搭建多页面应用时对项目结构和配置的调整

    前提:在这里使用的是webpack模板进行搭建 第一步.安装Vue-cli并且进行初始化 首先打开git,在里面使用npm全局安装Vue-cli,并且进行初始化 npm i vue-cli -g 然后 ...

随机推荐

  1. Linux命令:readonly

    readonly [-aAf] [name[=value] ...] or readonly -p -A 表示后面的name变量都是关联数组 -a 表示后面的name变量都是index数组 -f 表示 ...

  2. 项目(五)jumpserver企业开源跳板机搭建

    跳板机是什么?跳板机是运维堡垒主机的另个称呼.作为技术或者运维人员应该不会陌生.企业为了服务器的安全,通常所有的ssh连接都是通过跳板机来完成,以便于对ssh连接进行验证和管理. 接下来,我来讲述一下 ...

  3. easyui datagrid自定义按钮列,即最后面的操作列

    在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class=&q ...

  4. python获取文件夹的大小(即取出所有文件计算大小)

    import os path = r'/Users/authurchen/PycharmProjects/Demo' # print(os.listdir(path)) ls = os.listdir ...

  5. Es6(Symbol,set,map,filter)

    首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...

  6. 用swift写的一款小游戏,模仿的僵尸危机

    https://github.com/123456qwer/WDZombies.git   //git地址

  7. Springboot08-项目单元测试(接口测试)

    Springboot08-项目单元测试(接口测试) 前言 1-本文重点在于源码层面,分析Springboot单元测试的使用,对于其中的注解.方法等,不会仔细分析: 2-本文项目实例相关配置:Java- ...

  8. 386. Lexicographical Numbers 输出1到n之间按lexico排列的数字序列

    [抄题]: Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,1 ...

  9. ie每次登陆出现:Windows安全性 iexplore.exe 正在连接到 记住我的凭证不起作用

    解决方案: ie浏览器--设置--Intenet选项--安全--Internet--自定义级别--用户身份验证--登陆 勾选自动使用当前用户名和密码登陆 确定--确定

  10. Python11/19--MySQL的基本使用

    1.什么是数据库 存放数据的仓库 已学习的文件操作的缺陷 1.IO操作 效率问题 2.多用户竞争数据 3.网络访问 4.用户的验证2.常见的数据库 关系型 数据之间存在某种关联关系 oracle 目前 ...