显示侧边栏

标题锚点组件

flux:x-anchor 是 Flux Pro Max 提供的标题锚点组件，自动为页面标题添加可点击的锚点链接，方便用户复制并分享指向特定章节的 URL。和 flux:x-toc 天然搭配，完善文档导航体验。

核心功能

鼠标悬停标题时显示锚点图标（#），平时隐藏
点击锚点自动复制章节链接到剪贴板
复制后显示短暂的"已复制"提示
自动为无 ID 的标题生成语义化 ID
可自定义锚点选择器和图标
完整暗色模式支持
兼容 Livewire 页面导航（livewire:navigated）

基础用法

最简单的用法，在布局文件中引入组件即可。组件会自动扫描 <main> 区域内的 h2 和 h3 标题，并在标题末尾添加锚点链接。

{{-- 在布局文件中引入 --}}
<body>
    {{ $slot }}

    <flux:x-anchor />
</body>

交互说明

鼠标悬停到任意标题上 → 标题末尾出现 # 图标

点击 # → 浏览器地址栏更新为 页面地址#章节id，链接复制到剪贴板

锚点图标上方短暂显示"已复制"提示，1.5 秒后消失

鼠标移开 → # 图标隐藏

自定义选择器

通过 selector 属性指定要添加锚点的标题元素。默认为 main h2, main h3, [data-flux-main] h2, [data-flux-main] h3。

包含 h4 标题

<flux:x-anchor selector="main h2, main h3, main h4" />

指定容器内的标题

<flux:x-anchor selector=".blog-content h2, .blog-content h3" />

与 x-toc 搭配使用

flux:x-anchor 和 flux:x-toc 使用相同的默认选择器，配合使用时确保 selector 一致即可。x-toc 负责侧边导航，x-anchor 负责直接复制分享链接，两者互不冲突。

{{-- 布局文件 --}}
<body>
    {{ $slot }}

    {{-- 回到顶部 --}}
    <flux:x-back-top />

    {{-- 标题锚点（自动为标题添加 # 链接） --}}
    <flux:x-anchor />
</body>

{{-- 文档页面 --}}
<div class="flex items-start max-lg:flex-col">
    <flux:main class="lg:py-12">
        <h2>安装指南</h2>
        <p>...</p>
        <h2>配置选项</h2>
        <p>...</p>
    </flux:main>

    {{-- 目录导航 --}}
    <flux:x-toc />
</div>

属性参考

下面列出了 flux:x-anchor 支持的全部属性。

属性	类型	默认值	说明
selector	string	main h2, main h3, [data-flux-main] ...	CSS 选择器，用于匹配需要添加锚点链接的标题元素。建议与 flux:x-toc 的 selector 保持一致。
icon	string	#	锚点图标的显示内容，默认为 #。也可以使用 SVG 图标或其他符号。
copyText	string	已复制	点击锚点复制后显示的提示文字，1.5 秒后自动消失。