headless - 导航图标在 layout.html 中加载，但不在撇号无头 api 的片段中

问题描述

我为撇号-headless 创建了一个片段，它加载了我的主导航菜单。

'apostrophe-pages': {
      restApi: true,
      apiTemplates: [ 'leftMenu']
},

这个片段有两个功能：

在views/layout.html我{% include "apostrophe-pages:api/leftMenu.html" %}它

我还通过该片段中的/api/v1/apostrophe-pages/?render=leftMenu.html将它传递到我们的 Angular 应用程序，我构建了我的菜单，包括一些导航图标。

{%- for tab in homeData._children -%}
   {% set imageURL = apos.attachments.url(apos.images.first(tab.navicon), { size: 'one-third' }) or null %}
    {{ apos.log(tab.navicon) }}
    <li><a href="/"><img src="{{ imageURL }}"></a></li>
{% endfor %}

问题：当通过 API 调用这个片段时，这些tab.navicons没有被加载。

tab.navicon的views/layout.html console.log

_docId:"cjiqwpbjb00202zya1uf6wcm8"
_dotPath:"navicon"
_edit:true
items:Array(1) [Object]
type:"area"
__proto__:Object {constructor: , __defineGetter__: , 
__defineSetter__: , …}

/api/v1/apostrophe-pages/?render=leftMenu.html tab.navicon的console.log

items:Array(1) [Object]
type:"area"
__proto__:Object {constructor: , __defineGetter__: , 
__defineSetter__: , …}

有什么想法吗？可能是过滤器/深度问题吗？

标签： headlessapostropheapostrophe-cms

apostrophe-headless目前，这在单个呼叫中是不可能的。获取整个树的根 GET 路由和每页 GET 路由当前都areas(false)为加载子节点时的性能进行了硬编码。

这可以通过添加一个最初为空的方法来解决，该方法有机会在查询发生之前修改该游标对象。然后项目级别的覆盖将成为可能。这将需要一个无头撇号的拉取请求，但这不是一个非常困难的请求。

同时，解决方法是对每个子页面进行额外的无撇号调用。页面本身的响应将始终加载区域（并因此加入图像，填充您正在寻找的数据）。为了提高性能，您可以在客户端代码中缓存这些响应。

我已经为此打开了一个 github 问题。

headless - 导航图标在 layout.html 中加载，但不在撇号无头 api 的片段中

问题描述

解决方案

推荐阅读