chore: img attrs

6ebd2f05 · DCloud_LXH · 3f65d2f0 · 6ebd2f05 · 6ebd2f05 · 6ebd2f05
7 changed file
--- a/README.md
+++ b/README.md
@@ -48,7 +48,15 @@
    ```html
    <img class="zooming" src="xxx">
    ```
-
+11. md 支持书写属性（花括号 `{` 与 markdown 语法之间不能有空格）
+    ```md
+    ![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg){.zooming data=abc width=100 height=100}
+    ```
+    渲染为：
+    
+    ```html
+    <img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg" class="zooming" data="abc" width="100" height="100" />
+    ```
 ## 文档 Algolia 使用限额
 Included Quota:
 - Records: 1,000,000

--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -81,8 +81,11 @@ const config = {
        .plugin('normallize-link')
        .use(require('./markdown/normallizeLink'))
        .end()
-				.plugin('img-attrs')
-				.use(require('./markdown/markdowm-it-image-attrs'))
+				.plugin('img-add-attrs')
+				.use(require('./markdown/img-add-attrs'))
+        .end()
+				.plugin('attrs')
+        .use(require('markdown-it-attrs'))
    }
  },
  chainWebpack (config, isServer) {

--- a/docs/.vuepress/markdown/img-add-attrs.js
+++ b/docs/.vuepress/markdown/img-add-attrs.js
+module.exports = function (md, opts) {
+	md.core.ruler.after('inline', 'image-attrs', function (state) {
+		state.tokens.forEach(function (blockToken) {
+			if (blockToken.type === 'html_block') {
+				replaceHTML(blockToken, addLoadingAttr, state.env);
+			}
+			if (blockToken.type === 'inline' && blockToken.children) {
+				blockToken.children.forEach(function (token) {
+					const type = token.type;
+					if (type === 'html_inline') {
+						replaceHTML(token, addLoadingAttr, state.env);
+					}
+					if (type === 'image') {
+						const src = token.attrGet('src');
+						if (!token.attrGet('loading') && matchSrc(src)) {
+							token.attrPush(['loading', 'lazy']);
+						}
+					}
+				});
+			}
+		});
+		return false;
+	});
+};
+
+/**
+ *
+ * @param {Record<string,any>} attribs
+ */
+function addLoadingAttr(attribs) {
+	if (matchSrc(attribs.src) && !attribs.loading) {
+		attribs.loading = 'lazy';
+	}
+}
+
+/**
+ *
+ * @param {string} [src] img src
+ * @returns
+ */
+function matchSrc(src) {
+	return typeof src === 'string'
+		? src.indexOf('qiniu-web-assets.dcloud.net.cn') > -1
+		: false;
+}
+
+function replaceNodes(nodes, replace, env, token) {
+	if (!nodes) return;
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node.attribs) {
+			if (node.name === 'img' && node.attribs.src) {
+				replace(node.attribs);
+			}
+		}
+		replaceNodes(node.children, replace, env, token);
+	}
+}
+
+function replaceHTML(token, replace, env) {
+	const htmlparser = require('htmlparser2');
+	const serializer = require('dom-serializer');
+	const dom = new htmlparser.parseDocument(token.content, {
+		recognizeCDATA: true,
+		recognizeSelfClosing: true,
+	});
+	replaceNodes(dom.children, replace, env, token);
+	token.content = serializer.render(dom, { encodeEntities: 'utf8' });
+}
--- a/docs/.vuepress/markdown/markdowm-it-image-attrs.js
+++ b/docs/.vuepress/markdown/markdowm-it-image-attrs.js
-module.exports = function (md, opts) {
-	md.core.ruler.after('inline', 'image-attrs', function (state) {
-		state.tokens.forEach(function (blockToken) {
-			if (blockToken.type === 'inline' && blockToken.children) {
-				blockToken.children.forEach(function (token) {
-					const type = token.type;
-					if (type === 'image') {
-						const src = token.attrGet('src')
-						if (
-							!token.attrGet('loading') &&
-							src &&
-							src.indexOf('qiniu-web-assets.dcloud.net.cn') > -1
-						) {
-							token.attrPush(['loading', 'lazy'])
-						}
-					}
-				});
-			}
-		});
-		return false;
-	});
-};
--- a/docs/README.md
+++ b/docs/README.md
@@ -131,7 +131,7 @@ pageClass: custom-page-class
 ## 为什么要选择uni-app？

 ```uni-app```在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
-<!-- ![](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190418.png) -->
+
 <div class="uniapp-home-content">
    <div class="uniapp-home-content-item">
      <div class="uniapp-home-content-item-image">
@@ -225,4 +225,4 @@ pageClass: custom-page-class

 实际运行效果如下（点击图片可放大）：

-<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg" loading="lazy" class="zooming"></img>
+![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-multiport.jpg){.zooming}
--- a/package.json
+++ b/package.json
@@ -24,8 +24,11 @@
  "homepage": "https://github.com/dcloudio/unidoc-zh#readme",
  "devDependencies": {
    "cross-env": "^7.0.3",
+    "dom-serializer": "^2.0.0",
    "fs-extra": "^10.0.0",
    "glob": "^7.1.7",
+    "htmlparser2": "^9.0.0",
+    "markdown-it-attrs": "^4.1.6",
    "vuepress-theme-uni-app-test": "^1.3.9"
  },
  "dependencies": {

--- a/yarn.lock
+++ b/yarn.lock
@@ -4188,7 +4188,7 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
  dependencies:
    domelementtype "^2.2.0"

-domhandler@^5.0.1, domhandler@^5.0.2:
+domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
  version "5.0.3"
  resolved "https://registry.npmmirror.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
@@ -4226,6 +4226,15 @@ domutils@^3.0.1:
    domelementtype "^2.3.0"
    domhandler "^5.0.1"

+domutils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-prop@^5.2.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -4330,6 +4339,11 @@ entities@^4.2.0:
  resolved "https://registry.npmmirror.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==

+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 entities@~1.1.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -5336,6 +5350,16 @@ htmlparser2@^6.1.0:
    domutils "^2.5.2"
    entities "^2.0.0"

+htmlparser2@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-9.0.0.tgz#e431142b7eeb1d91672742dea48af8ac7140cddb"
+  integrity sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
 http-cache-semantics@^4.0.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -6295,6 +6319,11 @@ markdown-it-anchor@^5.0.2:
  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz#d549acd64856a8ecd1bea58365ef385effbac744"
  integrity sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==

+markdown-it-attrs@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.npmmirror.com/markdown-it-attrs/-/markdown-it-attrs-4.1.6.tgz#2bc331c7649d8c6396a0613c2bba1093f3e64da9"
+  integrity sha512-O7PDKZlN8RFMyDX13JnctQompwrrILuz2y43pW2GagcwpIIElkAdfeek+erHfxUOlXWPsjFeWmZ8ch1xtRLWpA==
+
 markdown-it-chain@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/markdown-it-chain/-/markdown-it-chain-1.3.0.tgz#ccf6fe86c10266bafb4e547380dfd7f277cc17bc"