diff --git a/README.md b/README.md
index 175a0ea..c4a37b4 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@ bangumi: # 追番设置
   lazyload: true
   loading:
   showMyComment: false
+  pagination: false
   metaColor:
   color:
   webp:
@@ -78,6 +79,7 @@ cinema: # 追剧设置
 - **progress**: 获取番剧数据时是否显示进度条，默认`true`
 - **extraOrder**: 手动添加的番剧/追剧数据是否优先显示，`1`为优先，其它为不优先
 - **showMyComment**: 使用`bgm`源时显示自己的评价及评论，默认`false`
+- **pagination**: 分页优化，只将第一页的数据渲染到`html`文件中，其余数据将通过异步请求加载，避免番剧过多时html文件过大导致页面加载缓慢，建议番剧较多时使用，默认`false`
 - **extra_options**: 此配置会扩展到Hexo`page`变量中
 
 ## 使用
diff --git a/index.js b/index.js
index cf5a1ff..1df83e0 100644
--- a/index.js
+++ b/index.js
@@ -72,11 +72,26 @@ hexo.extend.console.register('bangumi', 'Generate pages of bangumis for Hexo', o
     if (this.config.bangumi.source === 'bgm') {
       var _this$config$bangumi$;
 
-      getBgmData(this.config.bangumi.vmid, (_this$config$bangumi$ = this.config.bangumi.progress) !== null && _this$config$bangumi$ !== void 0 ? _this$config$bangumi$ : true, this.source_dir, this.config.bangumi.proxy);
+      getBgmData({
+        vmid: this.config.bangumi.vmid,
+        showProgress: (_this$config$bangumi$ = this.config.bangumi.progress) !== null && _this$config$bangumi$ !== void 0 ? _this$config$bangumi$ : true,
+        sourceDir: this.source_dir,
+        extraOrder: this.config.bangumi.extraOrder,
+        pagination: this.config.bangumi.pagination,
+        proxy: this.config.bangumi.proxy
+      });
     } else {
       var _this$config$bangumi$2;
 
-      getBiliData(this.config.bangumi.vmid, 'bangumi', (_this$config$bangumi$2 = this.config.bangumi.progress) !== null && _this$config$bangumi$2 !== void 0 ? _this$config$bangumi$2 : true, this.source_dir, this.config.bangumi.webp);
+      getBiliData({
+        vmid: this.config.bangumi.vmid,
+        type: 'bangumi',
+        showProgress: (_this$config$bangumi$2 = this.config.bangumi.progress) !== null && _this$config$bangumi$2 !== void 0 ? _this$config$bangumi$2 : true,
+        sourceDir: this.source_dir,
+        extraOrder: this.config.bangumi.extraOrder,
+        pagination: this.config.bangumi.pagination,
+        useWebp: this.config.bangumi.webp
+      });
     }
   } else {
     log.info('Unknown command, please use "hexo bangumi -h" to see the available commands');
@@ -105,7 +120,15 @@ hexo.extend.console.register('cinema', 'Generate pages of bilibili cinemas for H
       return;
     }
 
-    getBiliData(this.config.cinema.vmid, 'cinema', (_this$config$cinema$p = this.config.cinema.progress) !== null && _this$config$cinema$p !== void 0 ? _this$config$cinema$p : true, this.source_dir, this.config.cinema.webp);
+    getBiliData({
+      vmid: this.config.cinema.vmid,
+      type: 'cinema',
+      showProgress: (_this$config$cinema$p = this.config.cinema.progress) !== null && _this$config$cinema$p !== void 0 ? _this$config$cinema$p : true,
+      sourceDir: this.source_dir,
+      extraOrder: this.config.cinema.extraOrder,
+      pagination: this.config.cinema.pagination,
+      useWebp: this.config.cinema.webp
+    });
   } else {
     log.info('Unknown command, please use "hexo cinema -h" to see the available commands');
   }
diff --git a/lib/bangumi-generator.js b/lib/bangumi-generator.js
index 1b07cb9..a0af65a 100644
--- a/lib/bangumi-generator.js
+++ b/lib/bangumi-generator.js
@@ -30,7 +30,7 @@ var log = require('hexo-log')({
 
 module.exports = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(locals) {
-    var _config$type, _config$type$lazyload, _config$type$source, _config$type$showMyCo, _config$type2;
+    var _config$type, _config$type$lazyload, _config$type$source, _config$type$showMyCo, _config$type$paginati, _config$type2;
 
     var type,
         config,
@@ -126,6 +126,8 @@ module.exports = /*#__PURE__*/function () {
               lazyload: (_config$type$lazyload = config[type].lazyload) !== null && _config$type$lazyload !== void 0 ? _config$type$lazyload : true,
               source: (_config$type$source = config[type].source) !== null && _config$type$source !== void 0 ? _config$type$source : 'bili',
               showMyComment: (_config$type$showMyCo = config[type].showMyComment) !== null && _config$type$showMyCo !== void 0 ? _config$type$showMyCo : false,
+              pagination: (_config$type$paginati = config[type].pagination) !== null && _config$type$paginati !== void 0 ? _config$type$paginati : false,
+              ejsTemplate: fs.readFileSync(path.join(__dirname, "templates/".concat(config[type].source === 'bgm' ? 'bgm' : 'bili', "-template.ejs"))).toString().replace('class="bangumi-item"', 'class="bangumi-item bangumi-hide"'),
               wantWatch: wantWatch,
               watched: watched,
               watching: watching,
diff --git a/lib/get-bgm-data.js b/lib/get-bgm-data.js
index 615fa72..610e1f7 100644
--- a/lib/get-bgm-data.js
+++ b/lib/get-bgm-data.js
@@ -4,10 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /* eslint-disable no-underscore-dangle */
 var fs = require('hexo-fs');
 
@@ -390,28 +396,30 @@ var getBangumiData = /*#__PURE__*/function () {
 }();
 
 module.exports.getBgmData = /*#__PURE__*/function () {
-  var _getBgmData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(vmid, showProgress, sourceDir, proxy) {
-    var startTime, wantWatch, watching, watched, endTime, bangumis;
+  var _getBgmData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref6) {
+    var vmid, showProgress, sourceDir, extraOrder, pagination, proxy, startTime, wantWatch, watching, watched, endTime, bangumis, allBangumis, _JSON$parse, wantWatchExtra, watchingExtra, watchedExtra;
+
     return _regenerator["default"].wrap(function _callee4$(_context5) {
       while (1) {
         switch (_context5.prev = _context5.next) {
           case 0:
+            vmid = _ref6.vmid, showProgress = _ref6.showProgress, sourceDir = _ref6.sourceDir, extraOrder = _ref6.extraOrder, pagination = _ref6.pagination, proxy = _ref6.proxy;
             log.info('Getting bangumis, please wait...');
             startTime = new Date().getTime();
-            _context5.next = 4;
+            _context5.next = 5;
             return getItemsId(vmid, 'wish', showProgress, sourceDir, proxy);
 
-          case 4:
+          case 5:
             wantWatch = _context5.sent;
-            _context5.next = 7;
+            _context5.next = 8;
             return getItemsId(vmid, 'do', showProgress, sourceDir, proxy);
 
-          case 7:
+          case 8:
             watching = _context5.sent;
-            _context5.next = 10;
+            _context5.next = 11;
             return getItemsId(vmid, 'collect', showProgress, sourceDir, proxy);
 
-          case 10:
+          case 11:
             watched = _context5.sent;
             endTime = new Date().getTime();
             log.info("".concat(wantWatch.length + watching.length + watched.length, " bangumis have been loaded in ").concat(endTime - startTime, " ms"));
@@ -427,22 +435,63 @@ module.exports.getBgmData = /*#__PURE__*/function () {
 
             fs.writeFile(path.join(sourceDir, '/_data/bangumis.json'), JSON.stringify(bangumis), function (err) {
               if (err) {
-                log.info('Failed to write data to bangumis.json');
+                log.info('Failed to write data to _data/bangumis.json');
                 console.error(err);
               } else {
                 log.info('Bangumi bangumis data has been saved');
               }
             });
 
-          case 16:
+            if (pagination) {
+              allBangumis = _objectSpread({}, bangumis); // extra bangumis
+
+              if (fs.existsSync(path.join(sourceDir, '/_data/extra_bangumis.json'))) {
+                _JSON$parse = JSON.parse(fs.readFileSync(path.join(this.source_dir, "/_data/extra_".concat(type, "s.json")))), wantWatchExtra = _JSON$parse.wantWatchExtra, watchingExtra = _JSON$parse.watchingExtra, watchedExtra = _JSON$parse.watchedExtra;
+
+                if (wantWatchExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.wantWatch = [].concat((0, _toConsumableArray2["default"])(wantWatchExtra), (0, _toConsumableArray2["default"])(allBangumis.wantWatch));
+                  } else {
+                    allBangumis.wantWatch = [].concat((0, _toConsumableArray2["default"])(allBangumis.wantWatch), (0, _toConsumableArray2["default"])(wantWatchExtra));
+                  }
+                }
+
+                if (watchingExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.watching = [].concat((0, _toConsumableArray2["default"])(watchingExtra), (0, _toConsumableArray2["default"])(allBangumis.watching));
+                  } else {
+                    allBangumis.watching = [].concat((0, _toConsumableArray2["default"])(allBangumis.watching), (0, _toConsumableArray2["default"])(watchingExtra));
+                  }
+                }
+
+                if (watchedExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.watched = [].concat((0, _toConsumableArray2["default"])(watchedExtra), (0, _toConsumableArray2["default"])(allBangumis.watched));
+                  } else {
+                    allBangumis.watched = [].concat((0, _toConsumableArray2["default"])(allBangumis.watched), (0, _toConsumableArray2["default"])(watchedExtra));
+                  }
+                }
+              }
+
+              fs.writeFile(path.join(sourceDir, '/bangumis.json'), JSON.stringify(allBangumis), function (err) {
+                if (err) {
+                  log.info('Failed to write data to bangumis.json');
+                  console.error(err);
+                } else {
+                  log.info('Bangumi bangumis data has been saved');
+                }
+              });
+            }
+
+          case 18:
           case "end":
             return _context5.stop();
         }
       }
-    }, _callee4);
+    }, _callee4, this);
   }));
 
-  function getBgmData(_x10, _x11, _x12, _x13) {
+  function getBgmData(_x10) {
     return _getBgmData.apply(this, arguments);
   }
 
diff --git a/lib/get-bili-data.js b/lib/get-bili-data.js
index 55e1053..2fae7c9 100644
--- a/lib/get-bili-data.js
+++ b/lib/get-bili-data.js
@@ -2,12 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _this = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -249,21 +257,14 @@ var processData = /*#__PURE__*/function () {
 }();
 
 module.exports.getBiliData = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(vmid, type, showProgress, sourceDir) {
-    var useWebp,
-        typeNum,
-        startTime,
-        wantWatch,
-        watching,
-        watched,
-        endTime,
-        bangumis,
-        _args4 = arguments;
+  var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref4) {
+    var vmid, type, showProgress, sourceDir, extraOrder, pagination, _ref4$useWebp, useWebp, typeNum, startTime, wantWatch, watching, watched, endTime, bangumis, allBangumis, _JSON$parse, wantWatchExtra, watchingExtra, watchedExtra;
+
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
-            useWebp = _args4.length > 4 && _args4[4] !== undefined ? _args4[4] : true;
+            vmid = _ref4.vmid, type = _ref4.type, showProgress = _ref4.showProgress, sourceDir = _ref4.sourceDir, extraOrder = _ref4.extraOrder, pagination = _ref4.pagination, _ref4$useWebp = _ref4.useWebp, useWebp = _ref4$useWebp === void 0 ? true : _ref4$useWebp;
             typeNum = type === 'cinema' ? 2 : 1;
             log.info("Getting bilibili ".concat(type, ", please wait..."));
             startTime = new Date().getTime();
@@ -296,14 +297,55 @@ module.exports.getBiliData = /*#__PURE__*/function () {
 
             fs.writeFile(path.join(sourceDir, "/_data/".concat(type, "s.json")), JSON.stringify(bangumis), function (err) {
               if (err) {
-                log.info("Failed to write data to ".concat(type, "s.json"));
+                log.info("Failed to write data to _data/".concat(type, "s.json"));
                 console.error(err);
               } else {
                 log.info("Bilibili ".concat(type, "s data has been saved"));
               }
             });
 
-          case 18:
+            if (pagination) {
+              allBangumis = _objectSpread({}, bangumis); // extra bangumis
+
+              if (fs.existsSync(path.join(sourceDir, "/_data/extra_".concat(type, "s.json")))) {
+                _JSON$parse = JSON.parse(fs.readFileSync(path.join(_this.source_dir, "/_data/extra_".concat(type, "s.json")))), wantWatchExtra = _JSON$parse.wantWatchExtra, watchingExtra = _JSON$parse.watchingExtra, watchedExtra = _JSON$parse.watchedExtra;
+
+                if (wantWatchExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.wantWatch = [].concat((0, _toConsumableArray2["default"])(wantWatchExtra), (0, _toConsumableArray2["default"])(allBangumis.wantWatch));
+                  } else {
+                    allBangumis.wantWatch = [].concat((0, _toConsumableArray2["default"])(allBangumis.wantWatch), (0, _toConsumableArray2["default"])(wantWatchExtra));
+                  }
+                }
+
+                if (watchingExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.watching = [].concat((0, _toConsumableArray2["default"])(watchingExtra), (0, _toConsumableArray2["default"])(allBangumis.watching));
+                  } else {
+                    allBangumis.watching = [].concat((0, _toConsumableArray2["default"])(allBangumis.watching), (0, _toConsumableArray2["default"])(watchingExtra));
+                  }
+                }
+
+                if (watchedExtra) {
+                  if (extraOrder === 1) {
+                    allBangumis.watched = [].concat((0, _toConsumableArray2["default"])(watchedExtra), (0, _toConsumableArray2["default"])(allBangumis.watched));
+                  } else {
+                    allBangumis.watched = [].concat((0, _toConsumableArray2["default"])(allBangumis.watched), (0, _toConsumableArray2["default"])(watchedExtra));
+                  }
+                }
+              }
+
+              fs.writeFile(path.join(sourceDir, "/".concat(type, "s.json")), JSON.stringify(bangumis), function (err) {
+                if (err) {
+                  log.info("Failed to write data to ".concat(type, "s.json"));
+                  console.error(err);
+                } else {
+                  log.info("Bilibili ".concat(type, "s data has been saved"));
+                }
+              });
+            }
+
+          case 19:
           case "end":
             return _context4.stop();
         }
@@ -311,7 +353,7 @@ module.exports.getBiliData = /*#__PURE__*/function () {
     }, _callee4);
   }));
 
-  return function (_x14, _x15, _x16, _x17) {
-    return _ref4.apply(this, arguments);
+  return function (_x14) {
+    return _ref5.apply(this, arguments);
   };
 }();
diff --git a/lib/templates/bangumi.ejs b/lib/templates/bangumi.ejs
index 9524450..98ea1be 100644
--- a/lib/templates/bangumi.ejs
+++ b/lib/templates/bangumi.ejs
@@ -3,6 +3,10 @@
     <p><%- quote; %></p>
 </blockquote>
 <% } %>
+<% if (pagination) { %>
+<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.8/ejs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
+<% } %>
 <style>
     <%- include('index.css') %>
 </style>
@@ -19,25 +23,56 @@
 </div>
 <div>
     <div id="bangumi-item1">
+        <% if (pagination) { %>
+        <% wantWatch.slice(0, 10).forEach(function(item){ %>
+        <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
+        <% }); %>
+        <%- include('pagination.ejs', {__: __}) %>
+        <% } else { %>
         <% wantWatch.forEach(function(item){ %>
         <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
         <% }); %>
         <%- include('pagination.ejs', {__: __}) %>
+        <% } %>
     </div>
     <div id="bangumi-item2">
+        <% if (pagination) { %>
+        <% watching.slice(0, 10).forEach(function(item){ %>
+        <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
+        <% }); %>
+        <%- include('pagination.ejs', {__: __}) %>
+        <% } else { %>
         <% watching.forEach(function(item){ %>
         <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
         <% }); %>
         <%- include('pagination.ejs', {__: __}) %>
+        <% } %>
     </div>
     <div id="bangumi-item3">
+        <% if (pagination) { %>
+        <% watched.slice(0, 10).forEach(function(item){ %>
+        <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
+        <% }); %>
+        <%- include('pagination.ejs', {__: __}) %>
+        <% } else { %>
         <% watched.forEach(function(item){ %>
         <%- include((source === 'bgm' ? 'bgm' : 'bili') + '-template.ejs', {item,loading,metaColor,type}) %>
         <% }); %>
         <%- include('pagination.ejs', {__: __}) %>
+        <% } %>
     </div>
 </div>
 <script>
+    <% if (pagination) { %>
+    const ejsTemplate = '<%- ejsTemplate.replace(/\n/g, '') %>';
+    const loading = '<%- loading %>';
+    const metaColor = '<%- metaColor %>';
+    const type = '<%- type %>';
+    const lazyload = <%- lazyload %>;
+    const color = '<%- color %>';
+    const showMyComment = <%- showMyComment %>;
+    const pagenumsPre = <%- JSON.stringify([wantWatch.length, watching.length, watched.length]) %>;
+    <% } %>
     <%- include('index.js') %>
     document.getElementsByClassName('bangumi-tab')[<%- show %>].click();
     <%- include('pagination.js', {__: __}) %>
diff --git a/lib/templates/bgm-template.ejs b/lib/templates/bgm-template.ejs
index a43bfc9..1610922 100644
--- a/lib/templates/bgm-template.ejs
+++ b/lib/templates/bgm-template.ejs
@@ -1,9 +1,9 @@
 <div class="bangumi-item">
-    <div class="bangumi-picture"><img src="<%= lazyload ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : `https:${item.cover}` %>" <%- lazyload ? ` data-src="https:${item.cover}"` : '' %> referrerPolicy="no-referrer" width="110" style="width:110px;margin:20px auto;" />
+    <div class="bangumi-picture"><img src="<%= lazyload ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : `https:${item.cover}` %>" <%- lazyload ? ` data-src="https:${item.cover}"` : "" %> referrerPolicy="no-referrer" width="110" style="width:110px;margin:20px auto;" />
     </div>
     <div class="bangumi-info">
         <div class="bangumi-title">
-            <a target="_blank" href="https://bangumi.tv/subject/<%= item.id %>"><%= item.title || 'Unknown' %></a>
+            <a target="_blank" href="https://bangumi.tv/subject/<%= item.id %>"><%= item.title || "Unknown" %></a>
         </div>
         <div class="bangumi-meta">
             <span class="bangumi-info-items" <%- metaColor  %>>
diff --git a/lib/templates/bili-template.ejs b/lib/templates/bili-template.ejs
index 29aab4c..53948db 100644
--- a/lib/templates/bili-template.ejs
+++ b/lib/templates/bili-template.ejs
@@ -1,9 +1,9 @@
 <div class="bangumi-item">
-    <div class="bangumi-picture"><img src="<%= lazyload ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : item.cover %>" <%- lazyload ? ` data-src="${item.cover}"` : '' %> referrerPolicy="no-referrer" width="110" style="width:110px;margin:10px auto;" />
+    <div class="bangumi-picture"><img src="<%= lazyload ? (loading || "https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.2.0/lib/img/loading.gif") : item.cover %>" <%- lazyload ? ` data-src="${item.cover}"` : "" %> referrerPolicy="no-referrer" width="110" style="width:110px;margin:10px auto;" />
     </div>
     <div class="bangumi-info">
         <div class="bangumi-title">
-            <a target="_blank" href="https://www.bilibili.com/bangumi/media/md<%= item.id %>/"><%= item.title || 'Unknown' %></a>
+            <a target="_blank" href="https://www.bilibili.com/bangumi/media/md<%= item.id %>/"><%= item.title || "Unknown" %></a>
         </div>
         <div class="bangumi-meta">
             <span class="bangumi-info-items" <%- metaColor  %>>
@@ -22,7 +22,7 @@
                     <span class="bangumi-info-label">总播放</span> <em><%= item.view || "-" %></em>
                 </span>
                 <span class="bangumi-info-item bangumi-follow">
-                    <span class="bangumi-info-label"><%= type === 'bangumi' ? '追番人数' : '追剧人数' %></span> <em><%= item.follow || "-" %></em>
+                    <span class="bangumi-info-label"><%= type === "bangumi" ? "追番人数" : "追剧人数" %></span> <em><%= item.follow || "-" %></em>
                 </span>
                 <span class="bangumi-info-item bangumi-coin">
                     <span class="bangumi-info-label">硬币数</span> <em><%= item.coin || "-" %></em>
diff --git a/lib/templates/index.js b/lib/templates/index.js
index 770d812..e564f95 100644
--- a/lib/templates/index.js
+++ b/lib/templates/index.js
@@ -1,3 +1,3 @@
 "use strict";/* eslint-disable no-plusplus */(function(){// eslint-disable-next-line func-style
 function a(){this.classList.add("bangumi-active");for(var a=this.siblings(),b=0;b<a.length;b++)a[b].classList.remove("bangumi-active");// 显示对应板块
-var c=this.id.replace("tab","item"),d=document.getElementById(c);d.classList.remove("bangumi-hide"),d.classList.add("bangumi-show"),a=document.getElementById(c).siblings();for(var e=0;e<a.length;e++)a[e].classList.remove("bangumi-show"),a[e].classList.add("bangumi-hide")}Element.prototype.siblings=function(){for(var a=[],b=this.parentNode.children,c=0;c<b.length;c++)b[c]!==this&&a.push(b[c]);return a};for(var b=document.getElementsByClassName("bangumi-tab"),c=0;c<b.length;c++)b[c].onclick=a,b[c].onclick.apply(b[c])})();
+var c=this.id.replace("tab","item"),d=document.getElementById(c);d.classList.remove("bangumi-hide"),d.classList.add("bangumi-show"),a=document.getElementById(c).siblings();for(var e=0;e<a.length;e++)a[e].classList.remove("bangumi-show"),a[e].classList.add("bangumi-hide")}Element.prototype.siblings=function(){for(var a=[],b=this.parentNode.children,c=0;c<b.length;c++)b[c]!==this&&a.push(b[c]);return a};for(var b=document.getElementsByClassName("bangumi-tab"),c=0;c<b.length;c++)b[c].onclick=a,b[c].onclick.apply(b[c]);"undefined"!=typeof pagenumsPre&&axios.get("".concat(window.location.href,"../bangumis.json")).then(function(a){if(a.data){var b={wantWatch:a.data.wantWatch.slice(10).map(function(a){return ejs.render(ejsTemplate,{item:a,loading:loading,metaColor:metaColor,type:type})}).join("\n"),watching:a.data.watching.slice(10).map(function(a){return ejs.render(ejsTemplate,{item:a,loading:loading,metaColor:metaColor,type:type})}).join("\n"),watched:a.data.watched.slice(10).map(function(a){return ejs.render(ejsTemplate,{item:a,loading:loading,metaColor:metaColor,type:type})}).join("\n")};document.querySelectorAll("#bangumi-item1>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin",b.wantWatch),document.querySelectorAll("#bangumi-item2>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin",b.watching),document.querySelectorAll("#bangumi-item3>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin",b.watched)}})})();
diff --git a/lib/templates/pagination.js b/lib/templates/pagination.js
index db8a3f4..6717e8d 100644
--- a/lib/templates/pagination.js
+++ b/lib/templates/pagination.js
@@ -1,2 +1,2 @@
 /* eslint-disable no-plusplus, func-style */(function(){var a=Math.ceil;function b(b,c){return`${b+1} / ${a(0==c.length/10?1:a(c.length/10))}`}function c(){const a=this.parentNode.siblings();g(a,0),this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText=b(0,a)}function d(){const a=this.parentNode.siblings();let c=this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText;c=c.substr(0,c.indexOf("/")-1),c=parseInt(c,10)-1,0<c&&c--,g(a,c),this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText=b(c,a)}function e(){const c=this.parentNode.siblings();let d=this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText;d=d.substr(0,d.indexOf("/")-1),d=parseInt(d,10)-1,d<a(c.length/10)-1&&d++,g(c,d),this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText=b(d,c)}function f(){const c=this.parentNode.siblings();g(c,a(c.length/10)-1),this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText=b(-1==a(c.length/10)-1?0:a(c.length/10)-1,c)}function g(a,b){for(let c=0;c<a.length;c++)if(Math.floor(c/10)===b){a[c].classList.remove("bangumi-hide");const[b]=a[c].getElementsByTagName("img");b.src=b.getAttribute("data-src")}else a[c].classList.add("bangumi-hide")}const h=document.getElementsByClassName("bangumi-firstpage"),j=document.getElementsByClassName("bangumi-previouspage"),k=document.getElementsByClassName("bangumi-nextpage"),l=document.getElementsByClassName("bangumi-lastpage"),m=document.getElementsByClassName("bangumi-pagenum");for(let b=0;b<h.length;b++){h[b].onclick=c,j[b].onclick=d,k[b].onclick=e,l[b].onclick=f;// set page num
-const g=m[b].parentNode.siblings().length;m[b].innerText=`1 / ${0===a(g/10)?1:a(g/10)}`,h[b].click()}})();
+const g="undefined"==typeof pagenumsPre?m[b].parentNode.siblings().length:pagenumsPre[b]??m[b].parentNode.siblings().length;h[b].click(),m[b].innerText=`1 / ${0===a(g/10)?1:a(g/10)}`}})();
diff --git a/package.json b/package.json
index aa6bc8e..8ede666 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-bilibili-bangumi",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "hexo bilibili番剧页",
   "main": "index.js",
   "scripts": {
diff --git a/src/index.js b/src/index.js
index c66724a..6af3a5f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -49,9 +49,24 @@ hexo.extend.console.register('bangumi', 'Generate pages of bangumis for Hexo', o
       return;
     }
     if (this.config.bangumi.source === 'bgm') {
-      getBgmData(this.config.bangumi.vmid, this.config.bangumi.progress ?? true, this.source_dir, this.config.bangumi.proxy);
+      getBgmData({
+        vmid: this.config.bangumi.vmid,
+        showProgress: this.config.bangumi.progress ?? true,
+        sourceDir: this.source_dir,
+        extraOrder: this.config.bangumi.extraOrder,
+        pagination: this.config.bangumi.pagination,
+        proxy: this.config.bangumi.proxy
+      });
     } else {
-      getBiliData(this.config.bangumi.vmid, 'bangumi', this.config.bangumi.progress ?? true, this.source_dir, this.config.bangumi.webp);
+      getBiliData({
+        vmid: this.config.bangumi.vmid,
+        type: 'bangumi',
+        showProgress: this.config.bangumi.progress ?? true,
+        sourceDir: this.source_dir,
+        extraOrder: this.config.bangumi.extraOrder,
+        pagination: this.config.bangumi.pagination,
+        useWebp: this.config.bangumi.webp
+      });
     }
   } else {
     log.info('Unknown command, please use "hexo bangumi -h" to see the available commands');
@@ -75,7 +90,15 @@ hexo.extend.console.register('cinema', 'Generate pages of bilibili cinemas for H
       log.info('Please add vmid to _config.yml');
       return;
     }
-    getBiliData(this.config.cinema.vmid, 'cinema', this.config.cinema.progress ?? true, this.source_dir, this.config.cinema.webp);
+    getBiliData({
+      vmid: this.config.cinema.vmid,
+      type: 'cinema',
+      showProgress: this.config.cinema.progress ?? true,
+      sourceDir: this.source_dir,
+      extraOrder: this.config.cinema.extraOrder,
+      pagination: this.config.cinema.pagination,
+      useWebp: this.config.cinema.webp
+    });
   } else {
     log.info('Unknown command, please use "hexo cinema -h" to see the available commands');
   }
diff --git a/src/lib/bangumi-generator.js b/src/lib/bangumi-generator.js
index 0b83c63..5d3f62e 100644
--- a/src/lib/bangumi-generator.js
+++ b/src/lib/bangumi-generator.js
@@ -69,6 +69,9 @@ module.exports = async function (locals, type = 'bangumi') {
     lazyload: config[type].lazyload ?? true,
     source: config[type].source ?? 'bili',
     showMyComment: config[type].showMyComment ?? false,
+    pagination: config[type].pagination ?? false,
+    ejsTemplate: fs.readFileSync(path.join(__dirname, `templates/${config[type].source === 'bgm' ? 'bgm' : 'bili'}-template.ejs`)).toString()
+      .replace('class="bangumi-item"', 'class="bangumi-item bangumi-hide"'),
     wantWatch,
     watched,
     watching,
diff --git a/src/lib/get-bgm-data.js b/src/lib/get-bgm-data.js
index d3b795f..049bca8 100644
--- a/src/lib/get-bgm-data.js
+++ b/src/lib/get-bgm-data.js
@@ -182,7 +182,7 @@ const getBangumiData = async (items, sourceDir, proxy) => (await Promise.allSett
   };
 });
 
-module.exports.getBgmData = async function getBgmData(vmid, showProgress, sourceDir, proxy) {
+module.exports.getBgmData = async function getBgmData({ vmid, showProgress, sourceDir, extraOrder, pagination, proxy }) {
   log.info('Getting bangumis, please wait...');
   const startTime = new Date().getTime();
   const wantWatch = await getItemsId(vmid, 'wish', showProgress, sourceDir, proxy);
@@ -196,10 +196,47 @@ module.exports.getBgmData = async function getBgmData(vmid, showProgress, source
   }
   fs.writeFile(path.join(sourceDir, '/_data/bangumis.json'), JSON.stringify(bangumis), (err) => {
     if (err) {
-      log.info('Failed to write data to bangumis.json');
+      log.info('Failed to write data to _data/bangumis.json');
       console.error(err);
     } else {
       log.info('Bangumi bangumis data has been saved');
     }
   });
+
+  if (pagination) {
+    const allBangumis = { ...bangumis };
+    // extra bangumis
+    if (fs.existsSync(path.join(sourceDir, '/_data/extra_bangumis.json'))) {
+      const { wantWatchExtra, watchingExtra, watchedExtra } = JSON.parse(fs.readFileSync(path.join(this.source_dir, `/_data/extra_${type}s.json`)));
+      if (wantWatchExtra) {
+        if (extraOrder === 1) {
+          allBangumis.wantWatch = [...wantWatchExtra, ...allBangumis.wantWatch];
+        } else {
+          allBangumis.wantWatch = [...allBangumis.wantWatch, ...wantWatchExtra];
+        }
+      }
+      if (watchingExtra) {
+        if (extraOrder === 1) {
+          allBangumis.watching = [...watchingExtra, ...allBangumis.watching];
+        } else {
+          allBangumis.watching = [...allBangumis.watching, ...watchingExtra];
+        }
+      }
+      if (watchedExtra) {
+        if (extraOrder === 1) {
+          allBangumis.watched = [...watchedExtra, ...allBangumis.watched];
+        } else {
+          allBangumis.watched = [...allBangumis.watched, ...watchedExtra];
+        }
+      }
+    }
+    fs.writeFile(path.join(sourceDir, '/bangumis.json'), JSON.stringify(allBangumis), (err) => {
+      if (err) {
+        log.info('Failed to write data to bangumis.json');
+        console.error(err);
+      } else {
+        log.info('Bangumi bangumis data has been saved');
+      }
+    });
+  }
 };
diff --git a/src/lib/get-bili-data.js b/src/lib/get-bili-data.js
index d39d43f..e93db37 100644
--- a/src/lib/get-bili-data.js
+++ b/src/lib/get-bili-data.js
@@ -76,7 +76,7 @@ const processData = async (vmid, status, useWebp, showProgress, typeNum) => {
   console.log(`Get ${typeNum === 1 ? 'bangumi' : 'cinema'} data error:`, page?.data);
   return [];
 };
-module.exports.getBiliData = async (vmid, type, showProgress, sourceDir, useWebp = true) => {
+module.exports.getBiliData = async ({ vmid, type, showProgress, sourceDir, extraOrder, pagination, useWebp = true }) => {
   const typeNum = type === 'cinema' ? 2 : 1;
   log.info(`Getting bilibili ${type}, please wait...`);
   const startTime = new Date().getTime();
@@ -91,10 +91,47 @@ module.exports.getBiliData = async (vmid, type, showProgress, sourceDir, useWebp
   }
   fs.writeFile(path.join(sourceDir, `/_data/${type}s.json`), JSON.stringify(bangumis), (err) => {
     if (err) {
-      log.info(`Failed to write data to ${type}s.json`);
+      log.info(`Failed to write data to _data/${type}s.json`);
       console.error(err);
     } else {
       log.info(`Bilibili ${type}s data has been saved`);
     }
   });
+
+  if (pagination) {
+    const allBangumis = { ...bangumis };
+    // extra bangumis
+    if (fs.existsSync(path.join(sourceDir, `/_data/extra_${type}s.json`))) {
+      const { wantWatchExtra, watchingExtra, watchedExtra } = JSON.parse(fs.readFileSync(path.join(this.source_dir, `/_data/extra_${type}s.json`)));
+      if (wantWatchExtra) {
+        if (extraOrder === 1) {
+          allBangumis.wantWatch = [...wantWatchExtra, ...allBangumis.wantWatch];
+        } else {
+          allBangumis.wantWatch = [...allBangumis.wantWatch, ...wantWatchExtra];
+        }
+      }
+      if (watchingExtra) {
+        if (extraOrder === 1) {
+          allBangumis.watching = [...watchingExtra, ...allBangumis.watching];
+        } else {
+          allBangumis.watching = [...allBangumis.watching, ...watchingExtra];
+        }
+      }
+      if (watchedExtra) {
+        if (extraOrder === 1) {
+          allBangumis.watched = [...watchedExtra, ...allBangumis.watched];
+        } else {
+          allBangumis.watched = [...allBangumis.watched, ...watchedExtra];
+        }
+      }
+    }
+    fs.writeFile(path.join(sourceDir, `/${type}s.json`), JSON.stringify(bangumis), (err) => {
+      if (err) {
+        log.info(`Failed to write data to ${type}s.json`);
+        console.error(err);
+      } else {
+        log.info(`Bilibili ${type}s data has been saved`);
+      }
+    });
+  }
 };
diff --git a/src/lib/templates/index.js b/src/lib/templates/index.js
index 435467a..f07a1fb 100644
--- a/src/lib/templates/index.js
+++ b/src/lib/templates/index.js
@@ -34,4 +34,22 @@
     tabs[i].onclick = tabClick;
     tabs[i].onclick.apply(tabs[i]);
   }
+
+  if (typeof pagenumsPre !== 'undefined') {
+    axios.get(`${window.location.href}../bangumis.json`).then((response) => {
+      if (response.data) {
+        const html = {
+          wantWatch: response.data.wantWatch.slice(10).map((item) => ejs.render(ejsTemplate, { item, loading, metaColor, type }))
+            .join('\n'),
+          watching: response.data.watching.slice(10).map((item) => ejs.render(ejsTemplate, { item, loading, metaColor, type }))
+            .join('\n'),
+          watched: response.data.watched.slice(10).map((item) => ejs.render(ejsTemplate, { item, loading, metaColor, type }))
+            .join('\n')
+        };
+        document.querySelectorAll('#bangumi-item1>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.wantWatch);
+        document.querySelectorAll('#bangumi-item2>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watching);
+        document.querySelectorAll('#bangumi-item3>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watched);
+      }
+    });
+  }
 }());
diff --git a/src/lib/templates/pagination.js b/src/lib/templates/pagination.js
index eaafc83..6213c29 100644
--- a/src/lib/templates/pagination.js
+++ b/src/lib/templates/pagination.js
@@ -67,8 +67,8 @@
     lastpages[i].onclick = lastBtn;
 
     // set page num
-    const size = pagenums[i].parentNode.siblings().length;
-    pagenums[i].innerText = `1 / ${Math.ceil(size / 10) === 0 ? 1 : Math.ceil(size / 10)}`;
+    const size = typeof pagenumsPre !== 'undefined' ? (pagenumsPre[i] ?? pagenums[i].parentNode.siblings().length) : pagenums[i].parentNode.siblings().length;
     firstpages[i].click();
+    pagenums[i].innerText = `1 / ${Math.ceil(size / 10) === 0 ? 1 : Math.ceil(size / 10)}`;
   }
 }());