docsifyjs / docsifyjs/docsify

Enable pre/post processing on coverpage and sidebar

Đang mở
#2,393 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
enhancement
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.