feat: add icon for external link
This commit is contained in:
parent
42220c3360
commit
a20d4b4835
3 changed files with 13 additions and 8 deletions
|
@ -1,21 +1,26 @@
|
|||
<script lang="ts" setup>
|
||||
import siteConfig from '@/site-config'
|
||||
import { getLinkTarget } from '@/utils/link'
|
||||
import { getLinkTarget, isExternalLink } from '@/utils/link'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="w-full mt-18 pt-6 pb-8 max-w-3xl text-sm flex flex-col gap-4 border-main border-t !border-op-50">
|
||||
<div v-if="siteConfig.footer.navLinks && siteConfig.footer.navLinks.length > 0" class="flex flex-wrap gap-4">
|
||||
<template v-for="(link, index) in siteConfig.footer.navLinks" :key="link.text">
|
||||
<a :aria-label="`${link.text}`" :target="getLinkTarget(link.href)" class="nav-link" :href="link.href">
|
||||
<a
|
||||
:aria-label="`${link.text}`" :target="getLinkTarget(link.href)" class="nav-link flex items-center"
|
||||
:href="link.href"
|
||||
>
|
||||
{{ link.text }}
|
||||
<i v-if="isExternalLink(link.href)" text-sm ml-1 i-carbon-link />
|
||||
</a>
|
||||
<span v-if="index < siteConfig.footer.navLinks.length - 1"> / </span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex text-dark dark:text-white">
|
||||
<a nav-link href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
|
||||
<span op-70> © {{ new Date().getFullYear() }} {{ siteConfig.author }}.</span>
|
||||
<span op-70> © {{ new Date().getFullYear() }} {{ siteConfig.author
|
||||
}}.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
|
|
@ -98,11 +98,7 @@ export const siteConfig = {
|
|||
href: '/md-style',
|
||||
},
|
||||
{
|
||||
text: '404 Page',
|
||||
href: '/404',
|
||||
},
|
||||
{
|
||||
text: 'Astro Page',
|
||||
text: 'Vitesse theme on Astro',
|
||||
href: 'https://astro.build/themes/details/vitesse-theme-for-astro/',
|
||||
},
|
||||
{
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
export function getLinkTarget(link: string) {
|
||||
return link.includes('http') ? '_blank' : '_self'
|
||||
}
|
||||
|
||||
export function isExternalLink(link: string) {
|
||||
return link.includes('http')
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue