Enable pre/post processing on coverpage and sidebar
- Ngôn ngữ chính
- JavaScript
- Star
- 31.5k
- Fork
- 5.8k
- Merge trung bình
- 9 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 2
Mô tả
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `docsify@4.13.1` for the project I'm working on.
The hooks beforeEach and afterEach are not used for cover neither sidebar rendering, so, any plugins cannot be used.
Here is the diff that solved my problem:
```diff
diff --git a/node_modules/docsify/lib/docsify.js b/node_modules/docsify/lib/docsify.js
index 6e616ad..3bdd961 100644
--- a/node_modules/docsify/lib/docsify.js
+++ b/node_modules/docsify/lib/docsify.js
@@ -9318,18 +9318,38 @@
return null;
}
- this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
- var activeEl = getAndActive(this.router, '.sidebar-nav', true, true);
- if (loadSidebar && activeEl) {
- activeEl.parentNode.innerHTML +=
- this.compiler.subSidebar(subMaxLevel) || '';
- } else {
- // Reset toc
- this.compiler.subSidebar();
- }
+ var that = this;
+ this.callHook('beforeEach', text, function (text) {
+ var html;
+ var callback = function () {
+ if (opt.updatedAt) {
+ html = formatUpdated(
+ html,
+ opt.updatedAt,
+ this$1.config.formatUpdated
+ );
+ }
- // Bind event
- this._bindEventOnRendered(activeEl);
+ that.callHook('afterEach', html, function (hookData) {
+ renderMain.call(that, hookData);
+ next();
+ });
+ };
+
+
+ that._renderTo('.sidebar-nav', that.compiler.sidebar(text, maxLevel));
+ var activeEl = getAndActive(that.router, '.sidebar-nav', true, true);
+ if (loadSidebar && activeEl) {
+ activeEl.parentNode.innerHTML +=
+ that.compiler.subSidebar(subMaxLevel) || '';
+ } else {
+ // Reset toc
+ that.compiler.subSidebar();
+ }
+
+ // Bind event
+ that._bindEventOnRendered(activeEl);
+ });
};
Render.prototype._bindEventOnRendered = function _bindEventOnRendered (activeEl) {
@@ -9400,46 +9420,65 @@
};
Render.prototype._renderCover = function _renderCover (text, coverOnly) {
+ var that = this;
var el = getNode('.cover');
-
toggleClass(
- getNode('main'),
- coverOnly ? 'add' : 'remove',
- 'hidden'
+ getNode('main'),
+ coverOnly ? 'add' : 'remove',
+ 'hidden'
);
+
+ toggleClass(el, 'add', 'show');
if (!text) {
toggleClass(el, 'remove', 'show');
return;
}
+ this.callHook('beforeEach', text, function (text) {
+ var html;
+ var callback = function () {
+ if (opt.updatedAt) {
+ html = formatUpdated(
+ html,
+ opt.updatedAt,
+ this$1.config.formatUpdated
+ );
+ }
- toggleClass(el, 'add', 'show');
+ that.callHook('afterEach', html, function (hookData) {
+ renderMain.call(that, hookData);
+ next();
+ });
+ };
- var html = this.coverIsHTML ? text : this.compiler.cover(text);
+ var html = that.coverIsHTML ? text : that.compiler.cover(text);
- var m = html
- .trim()
- .match('
([^<]*?)
$');+ var m = html
+ .trim()
+ .match('
([^<]*?)
$');- if (m) {
- if (m[2] === 'color') {
- el.style.background = m[1] + (m[3] || '');
- } else {
- var path = m[1];
+ if (m) {
+ if (m[2] === 'color') {
+ el.style.background = m[1] + (m[3] || '');
+ } else {
+ var path = m[1];
- toggleClass(el, 'add', 'has-mask');
- if (!isAbsolutePath(m[1])) {
- path = getPath(this.router.getBasePath(), m[1]);
+ toggleClass(el, 'add', 'has-mask');
+ if (!isAbsolutePath(m[1])) {
+ path = getPath(this.router.getBasePath(), m[1]);
+ }
+
+ el.style.backgroundImage = "url(" + path + ")";
+ el.style.backgroundSize = 'cover';
+ el.style.backgroundPosition = 'center center';
}
- el.style.backgroundImage = "url(" + path + ")";
- el.style.backgroundSize = 'cover';
- el.style.backgroundPosition = 'center center';
+ html = html.replace(m[0], '');
}
- html = html.replace(m[0], '');
- }
- this._renderTo('.cover-main', html);
+ that._renderTo('.cover-main', html);
+ });
+
sticky();
};
```
This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách lần theo mã nguồn tương ứng với node_modules/docsify/lib/docsify.js và so sánh bản vá được đề xuất cho việc render sidebar và cover. Xác minh rằng beforeEach và afterEach có thể xử lý cả hai đường dẫn render và các plugin nhận được nội dung đã xử lý; issue không cung cấp tệp test, vì vậy hãy xác định các test render hoặc hook hiện có liên quan trước khi thay đổi hành vi.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript
- Lĩnh vực
- documentation
- Loại issue
- Tính năng
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100