会议记录

Question

Been现在停留了一段时间，试图弄清楚这一点并拔出头发，因为它应该很简单，但我似乎无法理解如何正确实施它。

我正在将GatsbyJS和Contentful用作CMS。

我想为管理员提供一种简单的方法，使他们能够使用Contentful添加新文档，并使这些文档显示在网站的部分下（也由管理员添加）。

因此，基本上，管理员将看到诸如“ 会议记录”之类的部分，在此之下，他们将能够首先添加一个新的“ 年”部分，例如 2018 ，然后在该部分下的相应文档（链接到PDF文件）位于发布该文档的月标题下，例如一月。

在网站上，我希望这样显示：

会议记录

2018

1月
二月

等...

2017

1月
二月

等...

因此，管理员可以根据需要在按月标题的12个文件中添加任意数量的年节。

到目前为止，我能做到的最大的努力是能够显示我添加的所有文档的数组，但是我仍无法了解如何最好地将它们拆分为每年的标头

我当前的代码如下：

GrahpQL文档查询：

export const query = graphql`
  query NMODocs {
    allContentfulDocument {
      edges {
        node {
          id
          publishDate(formatString: "MMMM, YYYY")
          title
          file {
            file {
              url
            }
          }
        }
      }
    }
  }
`;

我有一个数组：

    <ul>
      {data.allContentfulDocument.edges.map(({ node }) => (
        <DocListing key={node.id} doc={node} />
      ))}
    </ul>

还有一个DocLising组件：

import React from 'react';

const DocListing = ({ doc }) => (
  <li>
    <a title={doc.title} href={doc.file.file.url}>
      {doc.publishDate}
    </a>
  </li>
);

export default DocListing;

当前，这会生成链接到相应文档文件的日期列表。因此，重申我的问题，我想知道在相关年份部分标题下显示此数据的最佳方法吗？

很抱歉，如果我仍在学习并且试图掌握该项目上对我来说很新鲜的很多东西，那么对此解释不佳。因此，我愿意就如何解决此问题提出任何建议或建议。

Answer 1

假设您有一个具有可访问日期的数组，则可以使用一个小辅助函数对其进行分组。

const list = ['2018-08-12', '2018-07-12', '2017-08-12'];

const groupedList = list.reduce((acc, item) => {
  const year = item.split('-')[0];

  if (!acc[year]) {
    acc[year] = []
  }

  acc[year].push(item);
  return acc;
}, {});

这将导致对象包含每年的密钥。

我不确定使用GraphQL查询是否可行。

另外，如果您过分依赖发布日期，那会有一定的风险，因为我认为当内容更新到上次发布日期时，它会发生变化（请仔细检查）。最好将其拆分为自己的内容类型，以便您可以自己设置日期并确定日期。

希望有帮助。：）

无法显示嵌套数据

会议记录

2018

2017

1 个答案: