Reputation: 3530
I am developing a Nuxt content
website for documentation purposes and using the Nuxt Sitemap
in it.
I have created a similar repo as my original project on CodeSandBox. Can someone please have a look and provide some solutions on the automatic generation of sitemap for images in the Nuxt Content project?
I am adding the sitemap
information to my /content/docs
with all the markdown
or .md files such as:
/content/docs/introduction/index.md
:
---
title: "Introduction"
description: My Introduction to content website
sitemap:
loc: /docs/introduction
lastmod: 2024-08-30
changefreq: quaterly
priority: 0.9
___
I can generate the sitemap.xml
file during the npm run generate
but this generates the url
only for the routes that are present in /content/docs
where I have added the sitemap
information to my index.md
files such as this in:
<url>
<loc>https://example.io/docs/introduction</loc>
<lastmod>2024-08-30</lastmod>
<changefreq>quaterly</changefreq>
<priority>0.9</priority>
<xhtml:link rel="alternate" href="https://example.io/docs/introduction" hreflang="x-default" />
<xhtml:link rel="alternate" href="https://example.io/docs/introduction" hreflang="en" />
</url>
I have many images within this index.md
file but these images are for some reason not included in the sitemap.xml
file. I don't want to specify each image in my all .md
files rather want a dynamic approach where Nuxt Content/Sitemap
can automatically scan and include all images in my /content/docs
so it's all included in sitemap.xml
file.
I added the following:
sitemap: {
urls: [
{
loc: '/docs',
images: [
{
loc: 'https://example.io/docs/introduction/image1.png',
caption: 'My image caption',
geoLocation: 'My image geo location',
title: 'My image title',
license: 'My image license',
}
]
}
]
},
This will add only the specified image here to my sitemap.xml
file. However, I have a lot of images in different .md files within my Nuxt content /content/docs
. How to include all dynamically and directly without specifying each of them here in nuxt.config.js
file?
//To support and display the .md files from /content using @nuxt/content
content: {
documentDriven: true,
sitemap: true,
//To get the reading time for each .md file in /content
markdown: {
remarkPlugins: ["remark-reading-time"],
},
//To build the sitemap for SEO automatically using @nuxt/sitemap
strictNuxtContentPaths: true
},
sitemap: {
sources: [
'/api/__sitemap__/urls'
]
},
And a file in /server/api/__sitemap__/urls.ts
but this also does not make any difference and I do not get my images or videos in sitemap.xml file:
import { defineEventHandler } from 'h3'
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
import { serverQueryContent } from '#content/server'
import { asSitemapUrl, defineSitemapEventHandler } from '#imports'
export default defineSitemapEventHandler(async (e) => {
const contentList = (await serverQueryContent(e).find()) as ParsedContent[]
return contentList
.filter(c => c._path.startsWith('docs'))
.map((c) => {
return asSitemapUrl({
loc: `/blog/${c._path.replace('docs', '')}`,
lastmod: updatedAt
})
})
})
layouts/default.vue
with <main>
something like this:<!-- Page Content -->
<div class="w-full flex flex-col flex-grow">
<main>
<slot />
</main>
</div>
Previously I was just using the <slot />
. Even after adding the <main>
when I generate the .output
I don't see image-related things in sitmap.xml
.
References:
Is there any way to achieve this? Still unable to solve the issue any fix would be really appreciated. I am using the nuxt sitemap version v6.0.0-beta.4
Upvotes: 1
Views: 189