yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

fix(theme): incorrect displaying external link icon (#760)

Browse Source
This commit is contained in:
pengzhanbo 2025-12-01 11:27:59 +08:00 committed by GitHub
parent 2bb5c0e2d5
commit e0b972c3cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/plugin-md-power/src/node/enhance/links.ts
View File

@ -44,7 +44,6 @@ export function linksPlugin(md: Markdown): void {
// convert starting tag of internal link
hasOpenInternalLink = true
token.tag = internalTag
token.attrJoin(':no-icon', 'true')
const matched = hrefLink.match(/^([^#?]*?(?:\/|\.md|\.html))([#?].*)?$/)

2
theme/src/client/components/Posts/VPPostItem.vue
View File

@ -116,7 +116,7 @@ const coverStyles = computed(() => {
<div v-if="categoryList.length" class="category-list">
<span class="icon vpi-folder" />
<template v-for="(cate, i) in categoryList" :key="i">
<VPLink :href="categoriesLink ? `${categoriesLink.link}?id=${cate.id}` : undefined">
<VPLink :href="categoriesLink ? `${categoriesLink.link}?id=${cate.id}` : undefined" no-icon>
{{ cate.name }}
</VPLink>
<span v-if="i !== categoryList.length - 1">/</span>

2
theme/src/client/components/VPDocBreadcrumbs.vue
View File

@ -104,7 +104,7 @@ function resolveSidebar(
property="itemListElement"
typeof="ListItem"
>
<VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage" :text="text" />
<VPLink :href="link" class="breadcrumb" :class="{ current }" property="item" typeof="WebPage" :text="text" no-icon />
<span v-if="index !== breadcrumbList.length - 1" class="vpi-chevron-right" />
<meta property="name" :content="text">
<meta property="position" :content="`${index + 1}`">

2
theme/src/client/components/VPFriends.vue
View File

@ -39,7 +39,7 @@ const groups = computed(() => matter.value.groups || [])
<VPLink
class="edit-link-button"
:href="editLink.link"
:no-icon="true"
no-icon
>
<span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
{{ editLink.text }}

13
theme/src/client/components/VPLink.vue
View File

@ -28,7 +28,8 @@ function linkTo(e: Event) {
<template>
<Component
:is="tag" class="vp-link" :class="{ link, 'no-icon': noIcon }"
:is="tag"
class="vp-link" :class="{ link, 'no-icon': noIcon, 'vp-external-link-icon': isExternal }"
:href="link ? isExternalProtocol ? link : isExternal ? link : withBase(link) : undefined"
:target="target ?? (isExternal ? '_blank' : undefined)"
:rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
@ -37,15 +38,5 @@ function linkTo(e: Event) {
<slot>
{{ text || href }}
</slot>
<span v-if="isExternal && !noIcon" class="vpi-external-link" />
</Component>
</template>
<style>
.vp-link .vpi-external-link {
width: 11px;
height: 11px;
margin-top: -1px;
margin-left: 4px;
}
</style>

4
theme/src/client/composables/link.ts
View File

@ -65,6 +65,10 @@ export function useLink(
// 判断是否为不存在的路由
const routePath = link.split(/[?#]/)[0]
const { notFound } = resolveRoute(routePath)
if (__VUEPRESS_DEV__)
notFound && console.warn(`[VuePress Dead Link] "${toValue(href)}" is not found in (${page.value.filePathRelative || page.value.path})`)
return notFound
})

7
theme/src/client/styles/content.css
View File

@ -293,7 +293,7 @@
* -------------------------------------------------------------------------- */
:is(.vp-external-link-icon, .vp-doc a[href*="://"],
.vp-doc a[target=_blank])::after {
--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' %3E %3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E %3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' fill='currentColor' /%3E %3C/svg%3E");
display: inline-block;
flex-shrink: 0;
@ -307,12 +307,13 @@
mask-image: var(--icon);
}
.vp-external-link-icon::after {
.vp-external-link-icon:not(.no-icon)::after {
content: "";
}
/* prettier-ignore */
.external-link-icon-enabled :is(.vp-doc a[href*="://"], .vp-doc a[target=_blank])::after {
.external-link-icon-enabled :is(.vp-doc a[href*='://'],
.vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
color: currentcolor;
content: "";
}