定制化MIP接入文档~定制极速阅读器
在MIP页面接入极速小说阅读器分为四步：
- 引用阅读器依赖脚本 mip-shell-xiaoshuo.js
- 每个页面引用通用阅读器组件标签，配置阅读器通用文案及小说目录。每个页面配置内容相同
- 在每个页面头部配置json-ld（mipShellConfig），描述页面的状态。每个页面配置不同。
- 使用小说阅读器扩展方法
- 增加定制化组件
-
使用MIP校验工具确认代码符合MIP规范。
-
由于MIP阅读器是基于MIP2提供的解决方案，需要将页面mip.js、mip.css升级为v2版本：
// css地址修改为v2
https://c.mipcdn.com/static/v1/mip.css //-> MIP1.0 不能配合阅读器使用
https://c.mipcdn.com/static/v2/mip.css //-> MIP2.0 使用这个
// javascript地址修改为v2
https://c.mipcdn.com/static/v1/mip.js //-> MIP1.0 不能配合阅读器使用
https://c.mipcdn.com/static/v2/mip.js //-> MIP2.0 使用这个
在合法MIP页面中引用阅读器脚本：
<!--css提供阅读器样式，在head中引用-->
<link rel="stylesheet" href="https://c.mipcdn.com/static/mag-design/2.0.2/mag-design.min.css">
...
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<!-- 引入极速阅读器脚本 -->
<script src="https://c.mipcdn.com/static/v2/mip-shell-xiaoshuo/mip-shell-xiaoshuo.js"></script>
<!-- 另外需要增加定制化相关组件的引用链接 -->
<script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-custom/mip-custom.js"></script>这个脚本会在页面中创建用户体验友好的阅读器，包括侧边目录，底边设置栏，接管页面变色、字体大小调整等功能。
在body中引用mip-shell-xiaoshuo标签，并增加mip-shell声明和组件id标识。组件id用于在页面中引用组件暴露出来的事件，具体使用方法见本页 4. 使用小说阅读器扩展方法。
<mip-shell-xiaoshuo mip-shell id="xiaoshuo-shell">
<script type="application/json"></script>
</mip-shell-xiaoshuo>小说阅读器接管了侧边目录，底边设置栏，接管页面模式切换、字体大小调整等功能。需要配置侧边目录具体列表，按钮文案等。
以下配置项带有注释，不符合json规范，不能直接使用。所有带有TODO的配置需要重点关注和修改。可直接复制使用的示例见本页 3. 完整配置示例
<mip-shell-xiaoshuo mip-shell id="xiaoshuo-shell">
<script type="application/json">
{
"routes": [{ // 配置页面路由，不需要改
"pattern": "mipx-xiaoshuo-(\\d)+-(\\d)+.html", // TODO: 匹配页面的URL，如这个pattern匹配的就是mipx-xiaoshuo-2-4.html, 可以用来表示第二章第四节
"meta": {
"header": {
"show": true,
"title": "神武天帝" // TODO: 设置栏头部内容，可以填写书名，章节名等消息
},
"pageType": "page", // 用于区分当前页面是属于什么类型，例如是目录页，文章页等。pageType取值：'catalog'目录页，'page'小说内容页，'detail'小说详情页，'bookEnd'小说结尾页，'bookMall'小说书城
"officeId": "160957******0959", // officeId为熊掌号id
"footer": {
"actionGroup": [ // 设置栏底部文字，可以不修改
{"name": "catalog", "text": "目录"},
{"name": "darkmode", "text": "夜间模式", "text2": "白天模式"},
{"name": "settings", "text": "更多设置"}
],
"hrefButton": { // 设置栏底部翻页按钮文字，可以不修改
"previous": "上一页",
"next": "下一页"
}
},
"catalog": [ // TODO: 目录配置，在侧边栏目录显示文字和跳转链接。需要将全部目录配置在页面中
{
"name": "第1章 灵魂重生", // TODO: 章节名
"link": "mipx-xiaoshuo-1-1.html" // TODO: 章节链接，也需要符合routes.pattern
},
{
"name": "第2章 武魂提升",
"link": "mipx-xiaoshuo-2-1.html"
}
]
}
}]}
</script>
</mip-shell-xiaoshuo>可复制到页面中修改，保证<script type="application/json">内容是合法json即可。
<mip-shell-xiaoshuo mip-shell id="xiaoshuo-shell">
<script type="application/json">
{
"routes": [{
"pattern": "mipx-xiaoshuo-(\\d)+-(\\d)+.html",
"meta": {
"header": {
"show": true,
"title": "神武天帝"
},
"pageType": "page",
"officeId": "160957******0959",
"footer": {
"actionGroup": [
{"name": "catalog", "text": "目录"},
{"name": "darkmode", "text": "夜间模式", "text2": "白天模式"},
{"name": "settings", "text": "更多设置"}
],
"hrefButton": {
"previous": "上一页",
"next": "下一页"
}
},
"catalog": [
{
"name": "第1章 灵魂重生",
"link": "mipx-xiaoshuo-1-1.html"
},
{
"name": "第2章 武魂提升",
"link": "mipx-xiaoshuo-2-1.html"
}
]
}
}]}
</script>
</mip-shell-xiaoshuo><html>
<head>
<script type="application/ld+json">
<!-- json-ld用于描述页面内容 -->
</script>
</head>
<body>
<mip-shell-xiaoshuo mip-shell id="xiaoshuo-shell">
<script type="application/json">
<!-- 阅读器配置用于描述整本书内容，配置阅读器文案 -->
</script>
</mip-shell-xiaoshuo>
</body>
</html>如上面的例子：
-
<head>中的json-ld用于描述页面级别的内容，每个页面URL的配置不同。包括- 当前页链接，状态，章节名
- 阅读器标签中的json用于描述整个阅读器通用的内容，每页页面URL的配置相同。包括
- 全书目录，阅读器文案
考虑到部分小说章节较长，目录可能存在上千条的情况，不适合在html中重复声明，未来会在阅读器初次加载时异步获取阅读器配置。
所有带有TODO的配置需要重点关注和修改，配置涉及到页面展现和跳转，请务必保证数据正确性。可直接复制使用的示例见本页 3. 头部json-ld配置完整示例。
<!-- json-ld用于描述页面内容，熊掌号部分参考https://ziyuan.baidu.com/xzh/right/resource 号主页展现 -->
<!-- json-ld用于描述页面内容，书籍部分参考 https://schema.org/Book -->
<!-- json-ld用于描述页面内容，mipShellConfig部分参考 https://github.com/mipengine/mip2-extensions-platform/wiki/万卷计划-极速阅读器接入文档 -->
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", // 百度熊掌号内容，可选
"@id": "https://www.example.com/**", // 百度熊掌号内容，可选
"appid": "1589820413983913", // 百度熊掌号内容，可选
"title": "页面标题******", // 百度熊掌号内容，可选
"images": [ // 百度熊掌号内容，可选
"https://www.example.com/***/pic1.png",
"https://www.example.com/***/pic2.png",
"https://www.example.com/***/pic3.png"
],
"pubDate": "2017-06-15T08:00:01", // 百度熊掌号内容，可选
"name": "神武天帝", // 书籍声明，可选
"mipShellConfig": { // 小数阅读器内容，必选
"currentPage": { // 当前页配置，如：第一章第二节
"chapter": 1, // TODO: 第n章, 填写数字
"page": 2, // TODO: 第n节, 填写数字。如果每章只有一页，则page写1
"isLastPage": false, // TODO: 本页是否为本章的最后一页，用于阅读器、广告行为。如果每章只有一页，则isLastPage写true
"chapterName": "五十六个民族" // TODO: 章名，用于断点续读等功能
},
"previousPage": { // 上一页配置，如：第一章第三节
"url": "mipx-xiaoshuo-1-1.html", // TODO: 上一页链接，如果没有上一页，则置空
"chapter": 1, // TODO: 上一页是第n章
"page": 1 // TODO: 上一页是第n节
},
"nextPage": { // 下一页配置，如：第二章第一节
"url": "mipx-xiaoshuo-1-3.html", // TODO: 下一页链接，如果没有下一页，则置空
"chapter": 1, // TODO: 下一页是第n章
"page": 3 // TODO: 下一页是第n节
}
}
}
</script><!-- json-ld用于描述页面内容，熊掌号部分参考https://ziyuan.baidu.com/xzh/right/resource -->
<!-- json-ld用于描述页面内容，书籍部分参考 https://schema.org/Book -->
<!-- json-ld用于描述页面内容，mipShellConfig部分参考 https://github.com/mipengine/mip2-extensions-platform/wiki/万卷计划-极速阅读器接入文档 -->
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "https://www.example.com/******",
"appid": "1589820413983913",
"title": "页面标题******",
"images": [
"https://www.example.com/***/pic1.png",
"https://www.example.com/***/pic2.png",
"https://www.example.com/***/pic3.png"
],
"pubDate": "2017-06-15T08:00:01",
"name": "神武天帝",
"mipShellConfig": {
"currentPage": {
"chapter": 1,
"page": 2,
"isLastPage": true,
"chapterName": "五十六个民族"
},
"previousPage": {
"url": "mipx-xiaoshuo-1-1.html",
"chapter": 1,
"page": 1
},
"nextPage": {
"url": "mipx-xiaoshuo-1-3.html",
"chapter": 1,
"page": 3
}
}
}
</script>on="click" 方法使用了MIP组件的事件通信机制，xiaoshuo-shell对应的是阅读器DOM的id，配置详见：1. 引用阅读器组件标签
// 设置按钮
<span on="click:xiaoshuo-shell.showShellFooter">打开设置</span>
// 点击所有正文都可以打开设置
<!--小说正文外部包裹DOM-->
<div on="click:xiaoshuo-shell.showShellFooter">
<p>第1段正文</p>
<p>第2段正文</p>
<p>第3段正文</p>
<p>第4段正文</p>
</div>
on="click" 方法使用了MIP组件的事件通信机制，xiaoshuo-shell对应的是阅读器DOM的id，配置详见：1. 引用阅读器组件标签
<span on="click:xiaoshuo-shell.showShellCatalog">打开目录</span>
极速阅读器的翻页调用了mip的核心方法，要求跳转落地页同样符合MIP规范。
<!-- mip-link replace 两个参数用于声明跳转方法，必选 -->
<a href="./mipx-xiaoshuo-1-1.html" mip-link replace>上一页</a>
<a href="./mipx-xiaoshuo-1-3.html" mip-link replace>下一页</a>
在页面中引入 mip-custom 标签，如下示例，需要填写 accid 和 title 参数，目前在小说不走分润账号，所以 accid 值为 16 个字母 f，即ffffffffffffffff，title 一般为小说标题，此组件的具体说明可参考文档
<mip-custom>
<script type="application/json">
{
"accid": "ffffffffffffffff",
"title": "%E8%BF%99%E9%87%8C%E6%98%AF%E6%A0%87%E9%A2%98"
}
</script>
</mip-custom>1、包含小说主体文字内容的 div 标签需要加上 mip-shell-xiaoshuo-container 的 class，如：<div class="mip-shell-xiaoshuo-container" on="click:xiaoshuo-shell.showShellFooter"></div>;
2、上一页与下一页的翻页按钮区域，包含在一个 div 标签里，需要加上 navigator 的 class，如：<div class="navigator"></div>;