我们继续博客的内容页，首先我们先创建一个博客内容页面。

在项目筛选器上右键，点击新增文件，

输入博客内容，选择.lhtml，地址不用改，当然，改也可以，但是只能在当前项目文件下面。

我们双击文件，打开，像博客列表页一样引入文件，

ok，准备工作完成，我们看一下博客内容页面的设计图：

除了内容板块的列表部分不同，其它地方是不是都一样，我们是不是可以直接把列表页的html搬过来，改一下列表板块就可以了，（网站的通用板块很多，可以重复利用的就重复用，不要同一种东西写n遍，如头部，尾部等）。

我们把列表页搬过来，编译之后发现从列表页进不去内容页，列表页没有加链接，我们给列表页加上链接

我们要弹窗代码页面的链接，需要前面 @代码_

我们点击列表，进到内容页。

只是给列表页的列表部分删除，用高度撑开了一个layui卡片面板，这个雏形是不是就出来了，我们是不是只需要写内容板块就可以了，我们看一看内容页要怎么写，

 

它是不是从上到下，写下来就行了，这里有个注意的地方，通常内容页的内容部分是不需要加什么样式的，我们只要限制一下里面的图片，表格之类的元素不要超出内容区块就行了（加一个最大宽度100%），然后用一个区块包裹住就行了，因为在编辑内容的时候，编辑器会自动给附上样式。

首先我们先写内容的标题，

<区块 类名="lay-文本">
	<标题1>JS与ES6高级编程学习笔记(一)——JavaScript核心组成</标题1>
</区块>

lay-文本 这个类名是layui的内置类名，它可以让区块里面的列表，文字更加美观。

然后我们在加上内容，内容部分代码直接复制，它是生成出来的，

<标题1 行内样式="背景: 颜色通道(230, 230, 230, 1)"><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 16pt">一、JavaScript概要 </行内元素></标题1>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript（JS）是一种轻量级、解释型、动态类型的高级程序设计语言。它诞生于1995年，是一门基于原型、函数优先的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持，如 Node.js、 Apache CouchDB 和 Adobe Acrobat。它已经由ECMA（欧洲计算机制造商协会）通过ECMAScript实现语言的标准化。</行内元素></段落>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript非常重要。它是一种可以同时运行在服务器端、客户端和桌面应用的跨平台程序语言，当然现在你也可以使用JavaScript进行嵌入式开发。随着Node、V8引擎、React、Angular、Vue、Electron、UnityScript、ECMAScript、HTML5、CSSS3、前端工程化与模块化的出现或升级，JavaScript变得越来越重要,在大前端中JavaScript扮演举足轻重的角色。</行内元素></段落>
<标题2><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 14pt">1.1、JavaScript组成 </行内元素></标题2>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript主要由三部分构成，分别是ECMAScript、DOM与BOM，如图1-1所示。 </行内元素></段落>
<段落>内容......</段落>

再加上，上一篇，下一篇的分页：

<区块 类名="上下一页">
	<段落>« 上一篇：<超链接 链接地址="">JS与ES6高级编程学习笔记（五）——ECMAScript6 代码组织</超链接></段落>
	<段落>» 下一篇：<行内元素>没有了</行内元素></段落>
</区块>

看看效果：

嗯，雏形出来了，我们再加一点样式。

.博客内容 {
	内边距: 20px;
}
.博客内容 .lay-文本 标题1 {
	字体-大小: 22px;
	外边距: 20px 0;
}
.上下一页 {
	内边距: 20px 0;
	字体-大小: 16px;
	行高: 1.8;
	颜色: #999;
}

效果就出来了，内容页是不是就ok了，我们调试一下响应式，

其它端都是正常显示的，ok，内容页做完了。

展示一下：