高级功能演示
本页面展示了 rehype-smart-links 插件的高级功能和自定义选项。
自定义链接结构
使用 wrapperTemplate 选项，您可以自定义链接的 HTML 结构。例如，添加图标、状态指示器或其他元素。
自定义链接显示
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
export default defineConfig({
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
// 自定义链接模板
wrapperTemplate: (node, linkType) => {
if (linkType === 'internal') {
// 内部链接添加文档图标
const icon = h('span', { className: 'ml-1' }, '📄');
node.children.push(icon);
node.properties.className = [
...(node.properties.className || []),
'flex',
'items-center'
];
} else if (linkType === 'external') {
// 外部链接添加链接图标
const icon = h('span', { className: 'ml-1' }, '🔗');
node.children.push(icon);
node.properties.className = [
...(node.properties.className || []),
'flex',
'items-center'
];
} else if (linkType === 'broken') {
// 断开链接添加警告图标
const icon = h('span', { className: 'mr-1' }, '⚠️');
node.children = [icon, ...node.children];
node.properties.className = [
...(node.properties.className || []),
'flex',
'items-center'
];
}
return node;
}
}
]]
}
});添加徽章
您可以使用 wrapperTemplate 为链接添加不同样式的徽章：
链接添加徽章
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
export default defineConfig({
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
wrapperTemplate: (node, linkType) => {
let badge;
if (linkType === 'internal') {
badge = h('span', {
className: 'badge badge-primary badge-sm'
}, '内部');
} else if (linkType === 'external') {
badge = h('span', {
className: 'badge badge-secondary badge-sm'
}, '外部');
} else if (linkType === 'broken') {
badge = h('span', {
className: 'badge badge-error badge-sm'
}, '断开');
}
if (badge) {
node.children.push(badge);
node.properties.className = [
...(node.properties.className || []),
'flex',
'items-center',
'gap-2'
];
}
return node;
}
}
]]
}
});链接转换功能
使用 transformLink 选项可以修改链接的属性或内容：
链接转换示例
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
export default defineConfig({
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
transformLink: (node, linkType, url) => {
// 根据链接类型和URL添加特定属性
if (linkType === 'internal') {
// 重定向文档链接
if (url.startsWith('/docs/')) {
node.properties.href = url.replace('/docs/', '/documentation/');
}
// 添加数据属性
if (url.includes('getting-started')) {
node.properties['data-section'] = 'docs';
}
}
else if (linkType === 'external') {
// 为外部链接添加额外属性
node.properties['data-external'] = 'true';
// 为特定站点添加特殊类
if (url.includes('github.com')) {
node.properties.className = [
...(node.properties.className || []),
'github-link'
];
}
}
else if (linkType === 'broken') {
// 为断开链接添加错误信息
node.properties['data-error'] = 'true';
node.properties.title = '此页面不存在';
}
return node;
}
}
]]
}
});自定义配置选项完整示例
以下是一个完整的配置示例，展示了如何组合使用多种自定义选项：
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
export default defineConfig({
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
// 基本样式类
internalLinkClass: 'custom-internal-link',
brokenLinkClass: 'custom-broken-link',
externalLinkClass: 'custom-external-link',
// 路由文件路径（与CLI生成路径一致）
routesFile: './.smart-links-routes.json',
// 是否包含所有文件类型
includeAllFiles: true,
// 外部链接属性
externalLinkAttributes: {
target: '_blank',
rel: 'noopener noreferrer',
'data-external': 'true'
},
// 自定义链接结构
wrapperTemplate: (node, linkType, url) => {
// 为各类链接添加图标和样式
// 实现代码...
return node;
},
// 链接转换函数
transformLink: (node, linkType, url) => {
// 根据URL或类型修改链接属性
// 实现代码...
return node;
}
}
]]
}
});下一步
浏览更多示例：