From 1457a27fb4f1a6773635d005bbbf3833c891b5b5 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 30 Sep 2021 10:45:55 +0800 Subject: [PATCH] fix(@vant/cli): added markdown link open plugin (#9597) --- packages/vant-cli/package.json | 1 + .../site/desktop/components/Content.vue | 24 ++++++++++--------- packages/vant-cli/src/config/vite.site.ts | 24 ++++++++++++++++++- yarn.lock | 24 +++++++++++++++++++ 4 files changed, 61 insertions(+), 12 deletions(-) diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 753109180..7b6333264 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -34,6 +34,7 @@ "@types/fs-extra": "^9.0.12", "@types/less": "^3.0.3", "@types/lodash": "^4.14.173", + "@types/markdown-it": "^12.2.1", "@types/postcss-load-config": "^3.0.1", "@vue/compiler-sfc": "3.2.12", "vue": "3.2.12" diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue index 26236165b..efab1e91e 100644 --- a/packages/vant-cli/site/desktop/components/Content.vue +++ b/packages/vant-cli/site/desktop/components/Content.vue @@ -1,5 +1,8 @@ @@ -18,19 +21,18 @@ export default { }, }, - mounted() { - const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5')); - anchors.forEach((anchor) => { - anchor.addEventListener('click', this.scrollToAnchor); - }); - }, - methods: { - scrollToAnchor(event) { - if (event.target.id) { + onClick({ target }) { + if (['H2', 'H3', 'H4', 'H5'].includes(target.tagName)) { + this.scrollToAnchor(target); + } + }, + + scrollToAnchor(target) { + if (target.id) { this.$router.push({ name: this.$route.name, - hash: '#' + event.target.id, + hash: '#' + target.id, }); } }, diff --git a/packages/vant-cli/src/config/vite.site.ts b/packages/vant-cli/src/config/vite.site.ts index 481da42c2..aa72f1167 100644 --- a/packages/vant-cli/src/config/vite.site.ts +++ b/packages/vant-cli/src/config/vite.site.ts @@ -13,6 +13,7 @@ import { } from '../common/constant'; import { injectHtml } from 'vite-plugin-html'; import type { InlineConfig } from 'vite'; +import type MarkdownIt from 'markdown-it'; function markdownHighlight(str: string, lang: string) { if (lang && hljs.getLanguage(lang)) { @@ -40,6 +41,24 @@ function markdownCardWrapper(htmlCode: string) { .join(''); } +// add target="_blank" to all links +function markdownLinkOpen(md: MarkdownIt) { + const defaultRender = + md.renderer.rules.link_open || + ((tokens, idx, options, env, self) => + self.renderToken(tokens, idx, options)); + + md.renderer.rules.link_open = (tokens, idx, options, env, self) => { + const aIndex = tokens[idx].attrIndex('target'); + + if (aIndex < 0) { + tokens[idx].attrPush(['target', '_blank']); // add new attribute + } + + return defaultRender(tokens, idx, options, env, self); + }; +} + function getSiteConfig(vantConfig: any) { const siteConfig = vantConfig.site; @@ -96,9 +115,12 @@ export function getViteConfigForSiteDev(): InlineConfig { markdownItOptions: { highlight: markdownHighlight, }, - markdownItSetup(md: any) { + markdownItSetup(md: MarkdownIt) { const { slugify } = require('transliteration'); const markdownItAnchor = require('markdown-it-anchor'); + + markdownLinkOpen(md); + md.use(markdownItAnchor, { level: 2, slugify, diff --git a/yarn.lock b/yarn.lock index faf10ae5f..8ee4b6dad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1605,11 +1605,25 @@ resolved "https://registry.nlark.com/@types/less/download/@types/less-3.0.3.tgz#f9451dbb9548d25391107d65d6401a0cfb15db92" integrity sha1-+UUdu5VI0lOREH1l1kAaDPsV25I= +"@types/linkify-it@*": + version "3.0.2" + resolved "https://registry.nlark.com/@types/linkify-it/download/@types/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9" + integrity sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk= + "@types/lodash@^4.14.173": version "4.14.173" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.173.tgz#9d3b674c67a26cf673756f6aca7b429f237f91ed" integrity sha512-vv0CAYoaEjCw/mLy96GBTnRoZrSxkGE0BKzKimdR8P3OzrNYNvBgtW7p055A+E8C31vXNUhWKoFCbhq7gbyhFg== +"@types/markdown-it@^12.2.1": + version "12.2.1" + resolved "https://registry.nlark.com/@types/markdown-it/download/@types/markdown-it-12.2.1.tgz#ca36e1edce6f15a770f3e99e68622d1d2e2f0c65" + integrity sha1-yjbh7c5vFadw8+meaGItHS4vDGU= + dependencies: + "@types/linkify-it" "*" + "@types/mdurl" "*" + highlight.js "^10.7.2" + "@types/mdast@^3.0.0": version "3.0.10" resolved "https://registry.nlark.com/@types/mdast/download/@types/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af" @@ -1617,6 +1631,11 @@ dependencies: "@types/unist" "*" +"@types/mdurl@*": + version "1.0.2" + resolved "https://registry.nlark.com/@types/mdurl/download/@types/mdurl-1.0.2.tgz?cache=0&sync_timestamp=1629708373717&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fmdurl%2Fdownload%2F%40types%2Fmdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9" + integrity sha1-4s6dg6YTus8oTHvn1JGUXjnh+Ok= + "@types/minimist@^1.2.0": version "1.2.2" resolved "https://registry.nlark.com/@types/minimist/download/@types/minimist-1.2.2.tgz?cache=0&sync_timestamp=1629708337116&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fminimist%2Fdownload%2F%40types%2Fminimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" @@ -4223,6 +4242,11 @@ he@^1.2.0: resolved "https://registry.nlark.com/he/download/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha1-hK5l+n6vsWX922FWauFLrwVmTw8= +highlight.js@^10.7.2: + version "10.7.3" + resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" + integrity sha1-aXJy45kTVuQMPKxWanTu9oF1ZTE= + highlight.js@^11.2.0: version "11.2.0" resolved "https://registry.nlark.com/highlight.js/download/highlight.js-11.2.0.tgz#a7e3b8c1fdc4f0538b93b2dc2ddd53a40c6ab0f0"