README

CodeQ.JumpMarkers

此包允许将内容节点链接为跳转标记并渲染跳转标记导航。

安装

CodeQ.JumpMarkers 通过 Packagist 提供，运行 composer require codeq/jumpmarkers。我们使用语义化版本控制，每次重大更改都会增加主版本号。

配置

1. 扩展内容节点以包含跳转标记属性

将 CodeQ.JumpMarkers:Mixin.SectionConfiguration 混合添加到任何您希望在跳转标记导航中链接的内容节点类型，或者作为带哈希的永久链接。

例如，以下代码为每个内容节点类型添加了此功能

'Neos.Neos:Content':
  superTypes:
    'CodeQ.JumpMarkers:Mixin.SectionConfiguration': true

2. 在后端链接搜索对话框中使内容节点可用

默认情况下，Neos 只在链接搜索对话框中提供文档节点进行选择。您还可以允许设置标题或 ID 的内容节点

要启用此功能，您必须在链接配置的 nodeTypes 选项中允许 SectionConfiguration，如下所示

'YOUR.Site:Content.Text':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Text
    icon: file-text
    position: 200
    inlineEditable: true
  properties:
    text:
      type: string
      defaultValue: ''
      ui:
        inlineEditable: true
        inline:
          editorOptions:
            linking:
              nodeTypes: ['Neos.Neos:Document', 'CodeQ.JumpMarkers:Mixin.SectionConfiguration']
    link:
      type: string
      ui:
        label: 'Link'
        reloadPageIfChanged: false
        inspector:
          group: general
          editor: 'Neos.Neos/Inspector/Editors/LinkEditor'
          editorOptions:
            linking:
              nodeTypes: ['Neos.Neos:Document', 'CodeQ.JumpMarkers:Mixin.SectionConfiguration']

我们的 ServicesNodesControllerAspect 确保只有具有跳转标记标题或部分 ID 的内容节点将显示在列表中。

3. 在前端渲染锚点 ID

您可以使用以下方式在项目本身上渲染 ID：

prototype(Vendor:Site) < prototype(Neos.Neos:ContentComponent) {
    id = CodeQ.JumpMarkers:NodeAnchorId
    renderer = afx`
        <section id={props.id}>
            ...
        </section
    `

或者，您可以通过将 CodeQ.JumpMarkers:AnchorWrapper 处理器添加到同一节点类型的渲染器中，在它之前添加一个锚点。

例如：

prototype(Neos.Neos:Content) {
    @process.prependAnchor = CodeQ.JumpMarkers:AnchorWrapper
}

4. 在前端渲染跳转标记导航

以下是如何渲染跳转标记导航的示例

prototype(YOUR.Site:Integration.Organism.HashMenu) < prototype(Neos.Fusion:Component) {
    items = Neos.Fusion:Map {
        items = ${q(documentNode).children('main').children('[instanceof CodeQ.JumpMarkers:Mixin.SectionConfiguration][jumpMarkerTitle][jumpMarkerTitle!=""][_hidden != TRUE]').get()}
        itemName = 'node'
        itemRenderer = CodeQ.Link:Link {
            link = CodeQ.JumpMarkers:NodeAnchorId {
                node = ${node}
                @process.wrap = ${'#' + value}
            }
            label = ${q(node).property('jumpMarkerTitle')}
        }
    }

    renderer = afx`
        <ul class="hash-menu" @if.hasMultiple={Array.length(props.items) > 1}>
            <Neos.Fusion:Loop items={props.items} itemName="item" @children="itemRenderer">
                <li @if.hasName={String.trim(item.label)}>
                    <CodeQ.Link:Tag linkSource={item}>
                        {item.label}
                    </CodeQ.Link:Tag>
                </li>
            </Neos.Fusion:Loop>
        </ul>
    `
}

如果您的编辑器应该能够选择是否显示跳转标记导航，请将 CodeQ.JumpMarkers:Mixin.PageConfiguration 作为文档的超类型，然后按如下方式渲染菜单： <YOUR.Site:Integration.Organism.HashMenu @if={q(node).property('showJumpMarkersMenu')}/>

编辑器使用方法

创建跳转标记导航

通过设置标题和可选的手动锚点 ID，启用您要在跳转标记导航中渲染的内容节点的跳转标记。

设置内容节点的永久链接

选择您想要链接的内容节点，并在检查器中填写 sectionId 属性。

接下来，您可以通过以下方式设置对内容节点的链接：(a) 在链接搜索对话框中选择节点，或者(b) 通过“复制 Neos 链接”或“复制链接”按钮将内容节点的 URI 复制到剪贴板，并将其粘贴到 Aloha 编辑器的“插入链接”字段中，操作完成！

迁移

从 v2.0 更新到 v3.0

CodeQ.JumpMarkers:Mixin.PageConfiguration 属性 heroHashMenu 已被 showJumpMarkersMenu 替换以提高清晰度。可用的迁移： ./flow node:migrate --version 20230210175800

从 v1.0 更新到 v2.0

属性名称已更改，并且删除了一些回退，因此不应用自动迁移。 CodeQ.JumpMarkers:Mixin.SectionConfiguration.DefaultDisabled 已删除， includeInHashMenu 已删除。 hashMenuTitle 已重命名为 jumpMarkerTitle，可用的迁移： ./flow node:migrate --version 20230213183100

鸣谢

这个包深受Flownative.Anchorlinks v1.2.0的启发，大量代码复制粘贴，但目的不同。非常感谢Flownative提供的包！

codeq / jumpmarkers

维护者

详细信息