CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt-content
Aurore
Aurore

Reputation: 746

How to fetch folder structure from Nuxt content?

I'm trying to fetch my content structure to display the list on the homepage: my folder is like that :

content /
-- | A /
---- | an_article.md
-- | B /
---- | another_one.md
-- | C /
---- | etc.md

And I would like to use these folders as categories for my website. So later they are displayed as a list (A, B, C) on the homepage. I know I can fetch articles but I don't know for folders...

Here is an exemple on how it looks in html, css, jquery. It will look something like that:

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
event.preventDefault();
  $(this).parent(".sub-menu").children("ul").slideToggle(200);
      $(this).parent('.sub-menu').siblings().find('ul').slideUp(200);
});
body {
  font-size: 1em;
  font-family: arial;
}
a {
  text-decoration: none;
}

.menu {
  width: 50%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
}

li:not(.sub-menu):last-child {

}

.sub-menu li {
  border-top: 1px solid black;
}

li.sub-menu {
  margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <ul class="menu">
    <li class='sub-menu'> <a href='#'>A</a>

      <ul>
        <li class='sub-menu'>
          <img src="https://picsum.photos/200/100" alt=""> <br>
          <a href='#'>Project related to A</a>
      </ul>
    </li>
        <li class='sub-menu'> <a href='#'>B</a>

      <ul>
        <li class='sub-menu'>
          <img src="https://picsum.photos/200/200" alt=""> <br>
          <a href='#'>Another project related to B</a>
      </ul>
    </li>
    <li class='sub-menu'> <a href='#'>C</a>

      <ul>
        <li class='sub-menu'> 
                    <img src="https://picsum.photos/210/200" alt=""> <br>
          <a href='#'>Again another project related to C</a>
      </ul>
    </li>
  </ul>
</body>

This is what I use so far to fetch the articles published.

export default {
  async asyncData ({ $content, params }) {
    const articles = await $content('A', params.slug)
      .only(['title', 'description', 'img', 'slug'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      articles
    }
  }
}

Upvotes: 4

Views: 793

Answers (1)

kissu
kissu

Reputation: 46610

I saw that you answer got answered there: https://stackoverflow.com/a/73437532/8816585

With the following code

<template>
  <div class="container">
    <div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey">
      <h2>{{ categoryKey }}</h2>
      <list-item v-for="article in filteredArticles" :key="article.slug">
        <template #title>
          {{ article.title }}
        </template>
        <template #content>
          <div> {{ article.description }}</div>
        </template>
        <br>
      </list-item>
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      .only(['title', 'description', 'img', 'slug', 'cat', 'dir'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  },
  computed: {
    groupedCategories () {
      return this.articles.reduce((finalObject, obj) => {
        const directory = obj.dir
        finalObject[directory] ?? (finalObject[directory] = [])
        finalObject[directory].push(obj)
        return finalObject
      }, {})
    }
  }
}
</script>

Upvotes: 4

Related Questions