时间戳

首页 > 解决方案 > 社交元标签在 Pico CMS 2.0 中如何工作？

twig - 社交元标签在 Pico CMS 2.0 中如何工作？

问题描述

我看到在 Pico CMS 2.0 中有一些管理社交信息（Facebook 等）的代码，但我找不到任何示例。代码示例在树枝文件中有这个：

{% for social in pages._meta.meta.social %}
    <a href="{{ social.url }}" title="{{ social.title }}" role="button">
        <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
        <span class="sr-only">{{ social.title }}</span>
    </a>
{% endfor %}

但尚不清楚元信息必须去哪里。我在单独的文件调用中看到了一个带有以下代码的示例_meta.md，但它似乎不起作用：

---
social:
  - title: Visit us on Facebook
    url: https://example.com/sallysflowers
    icon: facebook
  - title: Check us out on Twitter
    url: https://example.com/sallyflora
    icon: twitter
  - title: Contact us by Email!
    url: mailto:sallysflowershop@example.com
    icon: mail
---

标签： twig

解决方案

呃，这只是一个复制/粘贴问题。PicoCMS 对元子项前的空格数非常挑剔。

破折号子项之前需要有四个空格，其他子项之前需要六个空格。任何其他值似乎只是使社交项目不起作用。所以答案是：

---
social:
    - title: Visit us on Facebook
      url: https://example.com/sallysflowers
      icon: facebook
    - title: Check us out on Twitter
      url: https://example.com/sallyflora
      icon: twitter
    - title: Contact us by Email!
      url: mailto:sallysflowershop@example.com
      icon: mail
---

请注意，社交图标是使用 Fontello 制作的，并且图标调用在themes/default/css/fontello.css其中也使用themes/default/icon/*文件定义。

推荐阅读