README

CodeQ.Link

考虑 Atomic.Fusion 和 Monocle 的 Neos 链接助手

以下是最基本的用法，它将 Monocle 展示组件与集成分离。通过提供传输对象，您可以保持展示组件的整洁，而不使属性混乱。

prototype(YOUR.Site:Presentation.Atom.Link) < prototype(Neos.Fusion:Component) {
    @styleguide {
        title = 'My Link'
        props {
            link = CodeQ.Link:Link {
                link = 'https://github.com/code-q-web-factory/neos-link'
                label = 'CodeQ.Link is awesome'
            }
        }
    }

    link = CodeQ.Link:Link

    renderer = afx`
        <CodeQ.Link:Tag link={props.link} class="link" />
    `
}

prototype(YOUR.Site:Presentation.Molecule.BlogPostTeaser) < prototype(Neos.Fusion:Component) {
    @styleguide {
        title = 'Blog Post Teaser'
        props {
            link = CodeQ.Link:Link {
                label = 'My first blog post'
                link = 'https://example.org/my-first-blog-post'
            }
            description = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam'
        }
    }

    renderer = afx`
        <CodeQ.Link:Tag link={props.link} class="blog-post-teaser">
            <h3>{props.link.label}</h3>
            {props.description}
        </CodeQ.Link:Tag>
    `
}


prototype(YOUR.Site:Content.BlogPostTeaser) < prototype(Neos.Fusion:Component) {
  link = CodeQ.Link:NodeLink {
      node = {node}
      backendLink = false
  }
  description = Neos.Neos:Editable {
      property = 'description'
  }
  
  renderer = YOUR.Site:Presentation.Molecule.BlogPostTeaser {
      @apply.props = ${props}
  }
}

通过分离链接类型和渲染方面，我们可以将这些方面分离到不同的 fusion 组件中。

需要注意的重要事项

如果链接在后台应该是一个链接，可以在集成中使用 backendLink = false 控制
如果组件应该渲染，如果没有提供链接，可以在展示中配置 <CodeQ.Link:Tag renderDefaultTagIfNoLink={true}...
代码易于阅读，没有隐藏的魔法

因此，该软件包提供了更多功能。感兴趣？继续阅读！

安装

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

用法

渲染一个链接

如你所见，渲染一个链接的展示部分很简单

<CodeQ.Link:Tag link={props.link} />
<CodeQ.Link:Tag link={props.link} class="my-class">Read more</CodeQ.Link:Tag>
<CodeQ.Link:Tag link={props.link} renderDefaultTagIfNoLink={true} defaultTagName="span">Link or Span</CodeQ.Link:Tag>

对于集成，我们提供很多助手来实现常见用例

对于 Monocle: CodeQ.Link:DummyLink

自己定义一切

CodeQ.Link:Link {
  link = 'https://codeq.at'
  label = 'Sponsor'
  rel = 'noopener'
  target = '_blank'
}

处理 Neos 节点

CodeQ.Link:NodeLink {
  node = ${node}
  backendLink = false
}

处理 Neos 资产

CodeQ.Link:AssetLink {
  asset = ${asset}
  backendLink = true
}

处理 Neos 带有引用的字符串，如 'node://XXX' 或 'asset://XXX'
```
CodeQ.Link:StringLink {
  link = ${q(node).property('link')}
}
```

渲染一个链接列表和菜单

我们的菜单项受 Neos 核心的启发，具有以下 API

CodeQ.Link:MenuItem {
  link = '#'
  label = 'Page 1'
  state = 'active'
  subItems = Neos.Fusion:DataStructure
}

我们提供以下助手

CodeQ.Link:DummyMenuItems

CodeQ.Link:NeosMenuItems {
  startingPoint = ${site}
  maximumLevels = 2
}

CodeQ.Link:DummyReferences
CodeQ.Link:NodeReferences { nodes = ${q(site).property('nodes')} }

您需要提供自己的代码来渲染它，这通常看起来像

menuItems = CodeQ.Link:DummyMenuItems

renderer = afx`
    <ul class="menu">
        <Neos.Fusion:Loop items={props.menuItems} itemName="menuItem" @children="itemRenderer">
            <li class={'navigation-item ' + (menuItem.state ? 'navigation-item--state-' + menuItem.state : '') }>
                <CodeQ.Link:Tag linkSource={menuItem} />
            </li>
        </Neos.Fusion:Loop>
    </ul>
`

常见问题解答

何时使用 CodeQ.Link，何时使用 Carbon.Link？

Carbon.Link 非常适合渲染带有 <Carbon.Link:Link node={props.node}>阅读更多</Carbon.Link:Link> 的链接，如果您不使用 Sitegeist.Monocle。

如果您想使用 Monocle，Carbon.Link 不可用，因为它在原型中使用内容和节点数据。它也不提供将链接配置提供给 Fusion 渲染的方式。

通过提供传输对象，我们在考虑 Monocle 的情况下实现了 Carbon.Link 功能。这样的传输对象由什么组成

Neos.Fusion:DataStructure {
    link = '/'
    label = 'Home'
    rel = false
    target = '_blank'
}

背景信息

Carbon.Link 在提供吸引人的简单 API 方面做得非常出色，但代价是一些非常复杂且缓慢的请求，通常在使用它 50+ 次时大量减慢渲染速度 - 使用它在一个菜单中很容易达到这个数字。因此，我们选择在一个更明确的 API 中重新实现这些功能。

许可证

根据 MIT 许可证授权，请参阅 LICENSE

赞助商和贡献

本插件的开发得到了 Code Q 的慷慨赞助。

我们乐意接受贡献。请将拉取请求发送给我们。

codeq / link

维护者

详细信息