README

概述

锚点导航是一个插件，可以从节点中的段落标题创建目录菜单。

使用方法

启用后，编辑器可以选择复选框以触发节点目录的创建。目录将保存为文本字段并可以编辑。编辑器可以更改标签或逐个删除条目。

在添加或修改段落之后，必须再次选择复选框以触发目录的生成。

如果目录不为空，则将渲染元素。

设置

1. 将锚点附加到段落

将 锚点 字段添加到需要提供锚点的段落类型。如果内容类型也附加了锚点导航字段（见下文），则将显示锚点表单。

您可以设置一个回退字段，如果特定段落的锚点标签未填写，则将使用该字段。

确保字段在各自的视图模式下位于段落的开始位置。

2. 配置内容类型

将 锚点导航 字段添加到应显示导航的内容类型。

如果内容类型附加了锚点导航，则才会渲染 锚点 字段（及其表单）。

设置 锚点导航 字段的表单显示和显示模式

在字段格式化程序中，可以选择将字段渲染为字段或块。选择字段时，将将其定位为在实体视图模式下配置的位置。或者，当选择块时，将 锚点导航 块添加到块布局中，以定位元素。无论如何，都必须将字段添加到应渲染的视图模式中（即使选择了块渲染）。

3. 定位锚点

根据您的样式和媒体查询，您必须移动锚点，以便导航跳转到正确的位置。

以下示例将锚点向上移动以处理 Drupal 8 工具栏

 .anchor-navigation__anchor {
   position: relative;
   top: -70px;
 }

 body.toolbar-fixed .anchor-navigation__anchor {
    top: -110px;
 }

 body.toolbar-fixed.toolbar-tray-open.toolbar-horizontal  .anchor-navigation__anchor {
   top: -150px;
 }

4. 样式设置和配置导航显示

更新 anchor_navigation.settings.yml 以配置显示

breakpoints 对象数组您可以设置任意数量的断点，并且对于每个断点

breakpointUp 整数断点开始的像素值 from
display 字符串 [fixed|sticky] 在断点激活时使用哪种显示变体。

highlightColor 字符串任何有效的 CSS 颜色值，将被设置为导航的颜色，默认情况下仅影响图标颜色。

displaySettings 对于每个显示变体（'sticky' 或 'fixed'）您可以设置

offset: 整数窗口（顶部边缘为 sticky，底部为 fixed）的距离像素值
limitToParent: 布尔值是否在滚动超过插入导航的父元素时，导航不应跟随窗口。

示例

breakpoints:
  -
    breakpointUp: 0
    display: fixed
  - 
    breakpointUp: 900
    display: sticky
highlightColor: '#e4003a'
displaySettings:
  sticky:
    offset: 110
    limitToParent: true
  fixed:
    offset: 100
    limitToParent: true

5. 插入社交图标

有一个用于社交图标的菜单，默认情况下是隐藏的。如果您在页面上有社交图标，可以通过设置 social_icons-变量通过预处理钩子将它们附加到锚点导航，例如：YOUR_MODULE_preprocess_anchor_navigation()。

请确保为固定和粘性变体都设置图标样式。

drunomics / anchor_navigation

维护者

详细信息