233 | ``` 234 | 235 | Besides, to modify how the Markdown is translated to Vue components for rendering, create the specific Prose elements within the `/components/content` folder. Nuxt will automatically use those elements to render out the Markdown content instead. The list of available overrides includes `ProseCode`, `ProseH1`, `ProseA` etc. The full list can be inspected in the official [GitHub repo](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose). 236 | 237 | For your reference, examples of the overridden Prose element in this template are `ProseCode`, `ProseH2` and `ProseH3` that can be found in the `/components/content` folder. 238 | 239 | ### Custom Components 240 | 241 | Nuxt Content allows the creation of custom components that can be embedded to the Markdown script and render it as HTML altogether. There are a couple of syntax that can be used to feature custom components in the Markdown. The first way to do so is by using the MDC syntax. 242 | 243 | For **inline components**, it can be used by prepending a colon in front of the component's name. This will render the component that takes in no props nor children into the page. 244 | 245 | ``` 246 | :my-component 247 | ``` 248 | 249 | For **block components**, it can be used by prefixing the component's name with a double colon, followed by another closing double colon to signify the end of the component. Block component is the component that can accept Markdown content or another component as it's slot content. 250 | 251 | ``` 252 | ::card 253 | Hello world 254 | :: 255 | ``` 256 | 257 | **Nesting** is supported for the block component as such. 258 | 259 | ``` 260 | ::hero 261 | :::card 262 | A nested card 263 | ::card 264 | A super nested card 265 | :: 266 | ::: 267 | :: 268 | ``` 269 | 270 | To render for a custom **named slot** inside the component, use the `#slot-name` pattern to outline which content to be rendered within which slot. 271 | 272 | ``` 273 | ::card 274 | The slot default text 275 | 276 | #description 277 | This will be rendered within the `description` slot in the component. 278 | :: 279 | ``` 280 | 281 | For a custom component that accepts **props**, simply enclose the desired key-value pairs within a pair of curly braces immediately after the component's name. 282 | 283 | ``` 284 | ::alert{type="warning" color="default"} 285 | The **alert** component 286 | :: 287 | ``` 288 | 289 | Another way of passing props to a custom component is by using the **YAML method** that is demonstrated as below. 290 | 291 | ``` 292 | ::alert 293 | --- 294 | type: warning 295 | color: default 296 | --- 297 | The **alert** component 298 | :: 299 | ``` 300 | 301 | Here is a small example on using the custom component with the MDC syntax. The custom component named `Card.vue` is used for the following demo. 302 | 303 | ``` 304 | ::card{title="Awesome title!" footer="This is an inconspicuous footer"} 305 | This is a sample paragraph that is **passed** into the custom card's **default slot** for rendering. 306 | :: 307 | ``` 308 | 309 | The code snippet above will have it's content rendered as below. 310 | 311 | ::card{title="Awesome title!" footer="This is an inconspicuous footer"} 312 | This is a sample paragraph that is **passed** into the custom card's **default slot** for rendering. 313 | :: 314 | 315 | ### Dark Theme 316 | 317 | This template uses Tailwind's class-based Dark Mode for theming. A ready to use theme switching component is already provided. It uses the Nuxt Color Mode's [useColorMode](https://color-mode.nuxtjs.org/) composable to take care of the theme switching and persisting the theme preference through the browser's Local Storage API. It is incredibly convenient. 318 | 319 | ```ts 320 | const colorMode = useColorMode(); 321 | 322 | colorMode.preference = "dark"; 323 | colorMode.preference = "light"; 324 | colorMode.preference = "system"; 325 | ``` 326 | 327 | ### Code Blocks 328 | 329 | The style of the code blocks can be modified to suits your liking by heading over to the `content` section in the `nuxt.config.ts` configuration file. 330 | 331 | ```ts [nuxt.config.ts] 332 | export default defineNuxtConfig({ 333 | content: { 334 | documentDriven: true, 335 | highlight: { 336 | theme: { 337 | default: "github-light", 338 | dark: "github-dark", 339 | }, 340 | preload: ["cpp", "csharp", "rust", "wenyan"], 341 | }, 342 | }, 343 | }); 344 | ``` 345 | 346 | In the `highlight` section, you can choose the theme that will render out the code blocks for both light and dark mode. Nuxt Content uses [Shiki](https://github.com/shikijs/shiki) as their code highlighter and it comes along with a wide array of [popular themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md) ready to be used. 347 | 348 | The syntax highlighting support are only available for a limited set of languages by default such as HTML, JavaScript, TypeScript and Vue. To enable highlighting for the language of choice, just add in the [language identifier](https://github.com/shikijs/shiki/blob/main/docs/languages.md) into the `preload` array. 349 | 350 | ### Tailwind in Markdown 351 | 352 | Since Tailwind has been configured to watch for styles in `.md` files in the `tailwind.config.js`, it can be used freely anywhere in the file. For example, if you want to style a particular word with a `text-pink-400` Tailwind class, just wrap it inside a HTML span tag and assign the class name to it. 353 | 354 | ```md 355 | ## My Superfluous Title 356 | 357 | Lorem ipsum dolor sit amet, adispicing elit. 358 | ``` 359 | 360 | Another way to style an inline text is by using the syntax as shown below. It is simpler and neat than the previous example. 361 | 362 | ```md 363 | Lorem [ipsum]{.text-pink-400} dolor sit amet, adispicing elit. 364 | ``` 365 | 366 | > https://tailwindcss.nuxtjs.org/examples/content 367 | 368 | ## Internationalization 369 | 370 | Internationalization is already baked into this template with the help of [Nuxt i18n](https://v8.i18n.nuxtjs.org/). The language switcher component is also provided that allows easy transition between the languages that is available (in this case English and French) seamlessly. 371 | 372 | The url of the non-default locale will be prefixed with it's code whereas the default locale does not require prefixing. 373 | 374 | ### Defining Words 375 | 376 | To define a word for the intended languages, there is a section in `nuxt.config.ts` named `vueI18n` within the `i18n` object to define them. For instance, to define the world "welcome" for both English and French, create a property called `welcome` within their respective locales object inside `messages` with their corresponding value will do. 377 | 378 | ```ts [nuxt.config.ts] 379 | export default defineNuxtConfig({ 380 | i18n: { 381 | vueI18n: { 382 | messages: { 383 | en: { 384 | welcome: "Welcome", 385 | }, 386 | fr: { 387 | welcome: "Bienvenue", 388 | }, 389 | }, 390 | }, 391 | }, 392 | }); 393 | ``` 394 | 395 | The newly defined word can be used anywhere within the project inside the `templates` tag by interpolating with the `$t` function that takes in the key of the defined word. 396 | 397 | ```vue 398 | 401 | ``` 402 | 403 | With this in place, Nuxt is smart enough to render out "Welcome" or "Bienvenue" correctly when the language context changed. 404 | 405 | ### Locales File Definition 406 | 407 | While the above solution of adding new definition of words in the `nuxt.config.ts` file works, it can pose a real problem when the **vocabulary grows** as the file become cumbersome to maintain. 408 | 409 | Fortunately, there is another preferred way to store the language definitions in their own, separate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files. 410 | 411 | Here is how it is configured in `nuxt.config.ts`. 412 | 413 | ```ts [nuxt.config.ts] 414 | export default defineNuxtConfig({ 415 | i18n: { 416 | langDir: "locales", 417 | locales: [ 418 | { 419 | code: "en", 420 | file: "en.json", 421 | }, 422 | { 423 | code: "fr", 424 | file: "fr.json", 425 | }, 426 | ], 427 | }, 428 | }); 429 | ``` 430 | 431 | The above code tells Nuxt to locate English definition in `en.json` file and French definition in `fr.json` file inside the `locales` folder. 432 | 433 | ### I18n in Nuxt Content 434 | 435 | To support internationalization for Markdown based contents from Nuxt Content, create a corresponding folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder. 436 | 437 | For example, given I have the following file structure that has English contents, the French contents can be housed in the following manner. 438 | 439 | From: 440 | 441 | ```[Directory Structure] 442 | ├─ content 443 | │ ├─ blogs 444 | │ │ ├─ blog1.md 445 | │ │ └─ blog2.md 446 | │ ├─ demo.md 447 | │ └─ guide.md 448 | ``` 449 | 450 | To: 451 | 452 | ```[Directory Structure] 453 | ├─ content 454 | │ ├─ blogs 455 | │ │ ├─ blog1.md (English) 456 | │ │ └─ blog2.md (English) 457 | │ ├─ fr 458 | │ │ ├─ blogs 459 | │ │ │ ├─ blog1.md (French) 460 | │ │ │ └─ blog2.md (French) 461 | │ │ ├─ demo.md (French) 462 | │ │ └─ guide.md (French) 463 | │ ├─ demo.md (English) 464 | │ └─ guide.md (English) 465 | ``` 466 | 467 | By doing this, we are utilizing the behaviour of the prefixed URL for non-default locale and it does the trick. Not the most elegant solution but it works for now. 468 | 469 | ### Internationalized Links 470 | 471 | To make sure that every links in the website corresponds to its language counterparts, we have to preprocess the links with the `useLocalePath` composable. Here is how it looks like in code. 472 | 473 | ```vue 474 | 477 | 478 | 483 | ``` 484 | 485 | This will ensures when you are in the English context, the link will redirect you to the normal `/careers` page whereas if you are in the French context, it will points to `/fr/careers` for its French version. 486 | 487 | ## APA Style References 488 | 489 | Additionally, this template also comes with a simple APA style citation component that can be utilized in the Markdown file using the MDC syntax. The examples and styles are crafted base on this [Scribbr article](https://www.scribbr.com/apa-examples/website/). 490 | 491 | ``` 492 | ::apa-reference 493 | --- 494 | authors: 495 | - Greenhouse, S 496 | date: 2020, July 30 497 | title: The coronavirus pandemic has intensified systemic economic racism against black Americans 498 | publisher: The New Yorker 499 | url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans 500 | source: newspaper 501 | --- 502 | :: 503 | ``` 504 | 505 | ### Examples 506 | 507 | 508 | ::apa-reference 509 | --- 510 | authors: 511 | - Greenhouse, S 512 | date: 2020, July 30 513 | title: The coronavirus pandemic has intensified systemic economic racism against black Americans 514 | publisher: The New Yorker 515 | url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans 516 | source: newspaper 517 | --- 518 | :: 519 | 520 | ::apa-reference 521 | --- 522 | authors: 523 | - Lee, C 524 | date: 2020, February 19 525 | title: A tale of two reference formats 526 | publisher: APA Style Blog 527 | url: https://apastyle.apa.org/blog/two-reference-formats 528 | source: blogs 529 | --- 530 | :: 531 | 532 | ::apa-reference 533 | --- 534 | authors: 535 | - Rowlatt, J 536 | date: 2020, October 19 537 | title: Could cold water hold a clue to a dementia cure? 538 | publisher: BBC News 539 | url: https://www.bbc.com/news/health-54531075 540 | source: online-news 541 | --- 542 | :: 543 | 544 | ::apa-reference 545 | --- 546 | organization: Scribbr 547 | date: n.d. 548 | title: How to cite a website in APA style 549 | url: https://www.scribbr.com/apa-examples/website/ 550 | source: websites 551 | --- 552 | :: 553 | 554 | ::apa-reference 555 | --- 556 | date: 2020, October 19 557 | title: "The countdown: A prophecy, crowds and a TikTok takedown" 558 | publisher: BBC News 559 | url: https://www.bbc.com/news/election-us-2020-54596667 560 | source: online-news 561 | --- 562 | :: 563 | 564 | -------------------------------------------------------------------------------- /content/fr/guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Commencer 3 | description: Tout ce que vous devez savoir pour commencer avec ce modèle génial 4 | topic: Guide 5 | category: Guide 6 | authors: 7 | - name: Shaun 8 | avatar: shaun.png 9 | tags: 10 | - didacticiel 11 | - guide 12 | updatedAt: 2023-11-18T11:37:49.432Z 13 | createdAt: 2023-11-18T11:37:49.432Z 14 | --- 15 | 16 | > Remarque: Cette page est traduite à l'aide de Google Traduction 17 | 18 | ## Aperçu 19 | 20 | Ce modèle est mieux utilisé pour les sites statiques tels que la **documentation** et la **vitrine de portefeuille** qui peuvent bénéficier de l'utilisation de Markdown. 21 | 22 | La pile est composée de Vue.js et Nuxt.js comme technologie de base pour la création du modèle, Nuxt Content pour la gestion de contenu et complétée par Tailwind CSS comme bibliothèque de style. 23 | 24 | ## Installation 25 | 26 | Pour commencer, clonez le modèle de projet depuis GitHub. 27 | 28 | ``` 29 | git clone https://github.com/data-miner00/nuxt-content-template.git 30 | ``` 31 | 32 | Ensuite, installez les dépendances avec [Pnpm](https://pnpm.io). 33 | 34 | ``` 35 | pnpm i 36 | ``` 37 | 38 | Il est crucial d'utiliser le gestionnaire de packages Pnpm avec le fichier `pnpm-lock.yaml` actuel pour le moment car il existe des incompatibilités dans la nouvelle version de Nuxt et Nuxt Content. Cependant, si vous avez réussi à courir avec [Npm](https://npmjs.com/) ou [Yarn](https://yarnpkg.com/), bien sûr. 39 | 40 | Une fois l'installation terminée, démarrez le serveur de développement en exécutant la commande `dev`. 41 | 42 | ``` 43 | pnpm dev 44 | ``` 45 | 46 | ## Pré-écriture 47 | 48 | Avant d'écrire des articles dans le fichier `.md`, il est conseillé d'ajouter le code frontmatter qui décrit l'article afin qu'il puisse être utilisé lors de la mise en page de la page individuelle. L'exemple de frontmatter peut être trouvé dans le fichier `/templates/frontmatter.yml`. Il s'agit essentiellement d'un assortiment de propriétés personnalisées liées à l'article. 49 | 50 | ```yaml 51 | title: Titre de l'article 52 | description: Le sous-titre décrivant le titre plus en détail, doit être écrit en casse-phrase 53 | topic: Topic 54 | category: Category 55 | authors: 56 | - name: Contributor 1 57 | avatar: contrib_1.png 58 | - name: Contributor 2 59 | avatar: contrib_2.png 60 | tags: 61 | - tutorial 62 | - guide 63 | - cheatsheet 64 | updatedAt: 2022-11-18T11:37:49.432Z 65 | createdAt: 2022-11-18T11:37:49.432Z 66 | ``` 67 | 68 | Les propriétés recommandées sont répertoriées comme suit: 69 | 70 | - `title`: Le titre (h1) de l'article/sujet. 71 | - `description`: Une définition plus longue qui décrit l'intention et l'objectif de l'article. 72 | - `category`: Le sujet principal de l'article. 73 | - `tags`: Une liste de balises liées à l'article. 74 | - `createdAt`: L'horodatage de la création de l'article. 75 | - `updatedAt`: L'horodatage de la modification de l'article. 76 | 77 | Cependant, n'hésitez pas à ajouter d'autres champs personnalisés qui vous conviennent le mieux. 78 | 79 | Pour accéder aux champs, ils peuvent être obtenus à partir des composables `useAsyncData` comme suit. 80 | 81 | ```vue 82 | 87 | 88 | 91 | ``` 92 | 93 | L'exemple ci-dessus illustre l'accès de l'attribut personnalisé `title` à partir du frontmatter de l'article. D'autres valeurs définies peuvent être récupérées de la même manière. 94 | 95 | ## Writing Content 96 | 97 | Dans Nuxt, chaque fichier `.vue` dans le dossier `/pages` correspond directement au chemin du nom de fichier à partir de la racine en conséquence. Par exemple, le `pages/home.vue` correspond à `/home` dans l'application. 98 | 99 | Avec Nuxt Content, il est également possible de mapper le fichier `.md` dans le dossier `/content` directement à la racine. Cela nécessitera qu'un fichier `[...slug].vue` soit placé dans le dossier `/pages` pour fonctionner. 100 | 101 | S'il y a des conflits de noms entre le fichier `.md` et le fichier `.vue` dans les dossiers `/content` et `/pages`, le fichier `.vue` dans le dossier `/pages` aura la priorité et annulant la déclaration du fichier `.md`. 102 | 103 | Pour mémoire, cette page (`/guide`) est écrite en `.md` dans le dossier `/content` qui est ensuite rendu avec des styles et une mise en page prédéfinis. 104 | 105 | ### Table des matières 106 | 107 | Par défaut, le contenu Nuxt rend `

` et `

` uniquement dans la table des matières et ignorera tout `

` présent dans le démarquage car `

` est reconnu comme le titre principal de la article ou page. Tous les titres suivants de l'article devront commencer sémantiquement à partir de `

`. Par conséquent, il est recommandé d'utiliser les en-têtes `

` et supérieurs lors de l'écriture. 108 | 109 | Ce modèle n'affiche que les balises `

` dans la table des matières. Pour visualiser cela, considérez l'exemple suivant de structure de titre dans un article. 110 | 111 | ``` 112 | ├─ Titre 1 113 | │ ├─ Sous-titre A 114 | │ ├─ Sous-titre B 115 | │ └─ Sous-titre C 116 | ├─ Titre 2 117 | │ ├─ Sous-titre A 118 | │ ├─ Sous-titre B 119 | │ └─ Sous-titre C 120 | ├─ Titre 3 121 | └─ Titre 4 122 | ``` 123 | 124 | Dans la table des matières, le contenu généré sera le suivant. 125 | 126 | ``` 127 | ├─ Titre 1 128 | ├─ Titre 2 129 | ├─ Titre 3 130 | └─ Titre 4 131 | ``` 132 | 133 | Pour personnaliser ce comportement afin d'inclure également le sous-titre, rendez-vous sur `/pages/[...slug].vue` et décommentez les codes qui généreront le sous-titre. 134 | 135 | ### Commander du contenu 136 | 137 | Le classement par défaut est par ordre alphabétique. Pour personnaliser les commandes, faites précéder le nom du fichier de nombres suivis d'un `.` immédiat tel que `1.Introduction.md` et incrémentez le nombre pour les fichiers suivants. 138 | 139 | ```[Structure du répertoire] {1} 140 | content/ 141 | 1.frameworks/ 142 | 1.vue.md 143 | 2.nuxt.md 144 | 2.examples/ 145 | 1.vercel.md 146 | 2.netlify.md 147 | 3.heroku.md 148 | index.md 149 | ``` 150 | 151 | ### Images 152 | 153 | ![ma belle image](/images/demo.png) 154 | 155 | Voici à quoi ressemble une image de portrait dans la prose. Il est aligné à gauche et s'étendra jusqu'à la largeur maximale disponible dans la prose. Les images qui seront diffusées avec l'application peuvent être placées dans le répertoire "public". Par exemple, les images du dossier `/public/images` sont accessibles via le chemin `/images/img.jpg` directement. 156 | 157 | ```md 158 | ![ma belle image](/images/demo.png) 159 | ``` 160 | 161 | L'image de paysage occupera très probablement toute la largeur du conteneur si elle a une résolution suffisamment large. 162 | 163 | ![mon image de paysage cool](/images/demo_landscape.png) 164 | 165 | Pour les images situées dans le dossier `/assets/images`, elles devront être traitées par les outils de construction en les référençant à partir du code source en utilisant `require` ou toute forme d'importation avant qu'elles ne soient incluses dans la sortie finale de la construction. . 166 | 167 | ```vue 168 | 171 | ``` 172 | 173 | ### Tableau 174 | 175 | Voici à quoi ressemble le tableau par défaut. 176 | 177 | | Âge | Personne 1 | Personne 2 | Personne 3 | Moyenne | 178 | | --- | ---------- | ---------- | ---------- | ------- | 179 | | 8 | 6 | 7 | 5 | 6 | 180 | | 10 | 6.5 | 7.5 | 8.5 | 7.5 | 181 | | 12 | 8 | 9 | 10 | 9 | 182 | 183 | ### Clavier 184 | 185 | Les touches du clavier peuvent être représentées par la balise HTML `` telle que Esc, Entrée et Ctrl. 186 | 187 | ### Prise en charge de LaTeX 188 | 189 | Ce modèle est également livré avec le support de $\LaTeX$. Écrivez facilement de belles équations dans le Markdown ! 190 | 191 | ```latex [Équation de Schrödinger] 192 | \begin{equation} 193 | i \hbar \frac{\partial}{\partial t} \Psi \big(\textbf{r}, t) = \left[- \frac{\hbar^2}{2m}\nabla^2 + V(\textbf{r})\right]\Psi(\textbf{r}, t) 194 | \end{equation} 195 | ``` 196 | 197 | Le code $\LaTeX$ pour l'équation de Schrödinger affiché rendra la sortie riche comme indiqué ci-dessous. 198 | 199 | $$ 200 | \begin{equation} 201 | i \hbar \frac{\partial}{\partial t} \Psi \big(\textbf{r}, t) = \left[- \frac{\hbar^2}{2m}\nabla^2 + V(\textbf{r})\right]\Psi(\textbf{r}, t) 202 | \end{equation} 203 | $$ 204 | 205 | Voici un autre exemple de matrice rendue avec $\LaTeX$. 206 | 207 | ```latex 208 | \begin{pmatrix}[r] 209 | -1 & 2 & 3 \\ 210 | 4 & -5 & 6 \\ 211 | 7 & 8 & -9 212 | \end{pmatrix} 213 | ``` 214 | 215 | $$ 216 | \begin{pmatrix}[r] 217 | -1 & 2 & 3 \\ 218 | 4 & -5 & 6 \\ 219 | 7 & 8 & -9 220 | \end{pmatrix} 221 | $$ 222 | 223 | ## Coiffant 224 | 225 | Ce modèle ouvre beaucoup de possibilités de personnalisation en plus de ce qui est actuellement fourni par Nuxt, Nuxt Content, TailwindCSS et certaines de mes touches pour le rendre génial. 226 | 227 | ### Content 228 | 229 | Le contenu de l'article a été stylisé à l'aide du plugin Typography de Tailwind (`@tailwindcss/typography`) qui offre un ensemble de styles prédéfinis suffisants pour rendre l'article élégant et attrayant à lire. Le style peut être personnalisé sur la balise `` dans `/pages/[...slug].vue` en utilisant le mot clé `prose`. 230 | 231 | Pour styliser un `` à l'intérieur du bloc d'article, préfixez le style avec `prose-h2:` dans le bloc d'article où `prose` est défini dans la classe. 232 | 233 | ```html 234 | 235 | ``` 236 | 237 | En outre, pour modifier la façon dont le Markdown est traduit en composants Vue pour le rendu, créez les éléments Prose spécifiques dans le dossier `/components/content`. Nuxt utilisera automatiquement ces éléments pour restituer le contenu Markdown à la place. La liste des remplacements disponibles comprend `ProseCode`, `ProseH1`, `ProseA` etc. La liste complète peut être consultée dans le référentiel [GitHub officiel](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose). 238 | 239 | Pour votre information, des exemples d'éléments Prose remplacés dans ce modèle sont `ProseCode`, `ProseH2` et `ProseH3` qui se trouvent dans le dossier `/components/content`. 240 | 241 | ### Composants personnalisés 242 | 243 | Nuxt Content permet la création de composants personnalisés qui peuvent être intégrés au script Markdown et le restituer en HTML. Il existe quelques syntaxes qui peuvent être utilisées pour présenter des composants personnalisés dans le Markdown. La première façon de le faire est d'utiliser la syntaxe MDC. 244 | 245 | Pour les composants en ligne, il peut être utilisé en ajoutant deux-points devant le nom du composant. Cela rendra le composant qui ne prend aucun accessoire ni enfant dans la page. 246 | 247 | ``` 248 | :my-component 249 | ``` 250 | 251 | Pour les composants de bloc, il peut être utilisé en préfixant le nom du composant avec un double deux-points, suivi d'un autre double-virgule fermant pour signifier la fin du composant. Le composant de bloc est le composant qui peut accepter le contenu Markdown ou un autre composant comme contenu d'emplacement. 252 | 253 | ``` 254 | ::card 255 | Bonjour le monde 256 | :: 257 | ``` 258 | 259 | L'imbrication est prise en charge pour le composant de bloc en tant que tel. 260 | 261 | ``` 262 | ::hero 263 | :::card 264 | Une carte imbriquée 265 | ::card 266 | Une carte super imbriquée 267 | :: 268 | ::: 269 | :: 270 | ``` 271 | 272 | Pour effectuer le rendu d'un emplacement nommé personnalisé à l'intérieur du composant, utilisez le modèle `#slot-name` pour indiquer quel contenu doit être rendu dans quel emplacement. 273 | 274 | ``` 275 | ::card 276 | Le texte par défaut de l'emplacement 277 | 278 | #description 279 | Cela sera rendu dans l'emplacement `description` du composant. 280 | :: 281 | ``` 282 | 283 | Pour un composant personnalisé qui accepte les props, placez simplement les paires clé-valeur souhaitées dans une paire d'accolades immédiatement après le nom du composant. 284 | 285 | ``` 286 | ::alert{type="warning" color="default"} 287 | Le composant alerte 288 | :: 289 | ``` 290 | 291 | Une autre façon de transmettre des accessoires à un composant personnalisé consiste à utiliser la méthode YAML illustrée ci-dessous. 292 | 293 | ``` 294 | ::alert 295 | --- 296 | type: warning 297 | color: default 298 | --- 299 | Le composant alerte 300 | :: 301 | ``` 302 | 303 | Voici un petit exemple d'utilisation du composant personnalisé avec la syntaxe MDC. Le composant personnalisé nommé "Card.vue" est utilisé pour la démonstration suivante. 304 | 305 | ``` 306 | ::card{title="Titre génial!" footer="Ceci est un pied de page discret"} 307 | Ceci est un exemple de paragraphe qui est passé dans l'emplacement par défaut de la carte personnalisée pour le rendu. 308 | :: 309 | ``` 310 | 311 | L'extrait de code ci-dessus aura son contenu rendu comme ci-dessous. 312 | 313 | ::card{title="Titre génial!" footer="Ceci est un pied de page discret"} 314 | Ceci est un exemple de paragraphe qui est passé dans l'emplacement par défaut de la carte personnalisée pour le rendu. 315 | :: 316 | 317 | ### Thème sombre 318 | 319 | Ce modèle utilise le mode sombre basé sur les classes de Tailwind pour la thématisation. Un composant de changement de thème prêt à l'emploi est déjà fourni. Il utilise le composable [useColorMode](https://color-mode.nuxtjs.org/) du mode de couleur Nuxt pour prendre en charge le changement de thème et la persistance de la préférence de thème via l'API de stockage local du navigateur. C'est incroyablement pratique. 320 | 321 | ```ts 322 | const colorMode = useColorMode(); 323 | 324 | colorMode.preference = "dark"; 325 | colorMode.preference = "light"; 326 | colorMode.preference = "system"; 327 | ``` 328 | 329 | ### Blocs de code 330 | 331 | Le style des blocs de code peut être modifié à votre guise en vous rendant dans la section `content` du fichier de configuration `nuxt.config.ts`. 332 | 333 | ```ts [nuxt.config.ts] 334 | export default defineNuxtConfig({ 335 | content: { 336 | documentDriven: true, 337 | highlight: { 338 | theme: { 339 | default: "github-light", 340 | dark: "github-dark", 341 | }, 342 | preload: ["cpp", "csharp", "rust", "wenyan"], 343 | }, 344 | }, 345 | }); 346 | ``` 347 | 348 | Dans la section `highlight`, vous pouvez choisir le thème qui affichera les blocs de code pour les modes clair et sombre. Le contenu Nuxt utilise [Shiki](https://github.com/shikijs/shiki) comme surligneur de code et il est accompagné d'un large éventail de [thèmes populaires](https://github.com/shikijs/shiki/blob/main/docs/themes.md) prêt à être utilisé. 349 | 350 | La prise en charge de la coloration syntaxique n'est disponible que pour un ensemble limité de langages par défaut tels que HTML, JavaScript, TypeScript et Vue. Pour activer la mise en surbrillance de la langue de votre choix, ajoutez simplement l'[identifiant de langue](https://github.com/shikijs/shiki/blob/main/docs/languages.md) dans le tableau "preload". 351 | 352 | ### Tailwind dans Markdown 353 | 354 | Étant donné que Tailwind a été configuré pour surveiller les styles dans les fichiers `.md` dans `tailwind.config.js`, il peut être utilisé librement n'importe où dans le fichier. Par exemple, si vous souhaitez styliser un mot particulier avec une classe Tailwind `text-pink-400`, encapsulez-le simplement dans une balise HTML span et attribuez-lui le nom de la classe. 355 | 356 | ```md 357 | ## Mon titre superflu 358 | 359 | Lorem ipsum dolor sit amet, adispicing elit. 360 | ``` 361 | 362 | Une autre façon de styliser un texte en ligne consiste à utiliser la syntaxe indiquée ci-dessous. Il est plus simple et soigné que l'exemple précédent. 363 | 364 | ```md 365 | Lorem [ipsum]{.text-pink-400} dolor sit amet, adispicing elit. 366 | ``` 367 | 368 | > https://tailwindcss.nuxtjs.org/examples/content 369 | 370 | ## Internationalisation 371 | 372 | L'internationalisation est déjà intégrée à ce modèle à l'aide de [Nuxt i18n](https://v8.i18n.nuxtjs.org/). Le composant de changement de langue est également fourni pour permettre une transition facile entre les langues disponibles (dans ce cas, l'anglais et le français) de manière transparente. 373 | 374 | L'URL de la locale non par défaut sera préfixée avec son code alors que la locale par défaut ne nécessite pas de préfixe. 375 | 376 | ### Définition des mots 377 | 378 | Pour définir un mot pour les langues prévues, il existe une section dans `nuxt.config.ts` nommée `vueI18n` dans l'objet `i18n` pour les définir. Par exemple, pour définir le monde "welcome" pour l'anglais et le français, créez une propriété appelée `welcome` dans leurs objets régionaux respectifs à l'intérieur de `messages` avec leur valeur correspondante. 379 | 380 | ```ts [nuxt.config.ts] 381 | export default defineNuxtConfig({ 382 | i18n: { 383 | vueI18n: { 384 | messages: { 385 | en: { 386 | welcome: "Welcome", 387 | }, 388 | fr: { 389 | welcome: "Bienvenue", 390 | }, 391 | }, 392 | }, 393 | }, 394 | }); 395 | ``` 396 | 397 | Le mot nouvellement défini peut être utilisé n'importe où dans le projet à l'intérieur de la balise `templates` en interpolant avec la fonction `$t` qui prend la clé du mot défini. 398 | 399 | ```vue 400 | 403 | ``` 404 | 405 | Avec cela en place, Nuxt est assez intelligent pour restituer correctement "Bienvenue" ou "Bienvenue" lorsque le contexte de la langue a changé. 406 | 407 | ### Définition du fichier de paramètres régionaux 408 | 409 | Bien que la solution ci-dessus consistant à ajouter une nouvelle définition de mots dans le fichier `nuxt.config.ts` fonctionne, elle peut poser un réel problème lorsque le vocabulaire s'agrandit à mesure que le fichier devient lourd à maintenir. 410 | 411 | Heureusement, il existe un autre moyen préféré de stocker les définitions de langage dans leur propre fichier JSON séparé. Avec cette approche, non seulement il atteint le principe de responsabilité unique, mais il améliore également considérablement la maintenabilité des fichiers. 412 | 413 | Voici comment il est configuré dans `nuxt.config.ts`. 414 | 415 | ```ts [nuxt.config.ts] 416 | export default defineNuxtConfig({ 417 | i18n: { 418 | langDir: "locales", 419 | locales: [ 420 | { 421 | code: "en", 422 | file: "en.json", 423 | }, 424 | { 425 | code: "fr", 426 | file: "fr.json", 427 | }, 428 | ], 429 | }, 430 | }); 431 | ``` 432 | 433 | Le code ci-dessus indique à Nuxt de localiser la définition anglaise dans le fichier "en.json" et la définition française dans le fichier "fr.json" dans le dossier "locales". 434 | 435 | ### I18n dans le contenu Nuxt 436 | 437 | Pour prendre en charge l'internationalisation des contenus basés sur Markdown à partir de Nuxt Content, créez un dossier correspondant dans le dossier `content` avec le code de la locale non par défaut et imitez la structure du dossier de base. 438 | 439 | Par exemple, étant donné que j'ai la structure de fichiers suivante qui a un contenu en anglais, le contenu en français peut être hébergé de la manière suivante. 440 | 441 | De: 442 | 443 | ```[Structure du répertoire] 444 | ├─ content 445 | │ ├─ blogs 446 | │ │ ├─ blog1.md 447 | │ │ └─ blog2.md 448 | │ ├─ demo.md 449 | │ └─ guide.md 450 | ``` 451 | 452 | En: 453 | 454 | ```[Structure du répertoire] 455 | ├─ content 456 | │ ├─ blogs 457 | │ │ ├─ blog1.md (Anglais) 458 | │ │ └─ blog2.md (Anglais) 459 | │ ├─ fr 460 | │ │ ├─ blogs 461 | │ │ │ ├─ blog1.md (Français) 462 | │ │ │ └─ blog2.md (Français) 463 | │ │ ├─ demo.md (Français) 464 | │ │ └─ guide.md (Français) 465 | │ ├─ demo.md (Anglais) 466 | │ └─ guide.md (Anglais) 467 | ``` 468 | 469 | En faisant cela, nous utilisons le comportement de l'URL préfixée pour les paramètres régionaux non par défaut et cela fait l'affaire. Ce n'est pas la solution la plus élégante mais ça marche pour l'instant. 470 | 471 | ### Liens internationalisés 472 | 473 | Pour nous assurer que chaque lien du site Web correspond à ses homologues linguistiques, nous devons prétraiter les liens avec le composable `useLocalePath`. Voici à quoi cela ressemble dans le code. 474 | 475 | ```vue 476 | 479 | 480 | 485 | ``` 486 | 487 | Cela garantira que lorsque vous êtes dans le contexte anglais, le lien vous redirigera vers la page normale `/careers` alors que si vous êtes dans le contexte français, il pointera vers `/fr/careers` pour sa version française. 488 | 489 | ## Références de style APA 490 | 491 | De plus, ce modèle est également livré avec un simple composant de citation de style APA qui peut être utilisé dans le fichier Markdown à l'aide de la syntaxe MDC. Les exemples et les styles sont conçus sur la base de cet [article Scribbr](https://www.scribbr.com/apa-examples/website/). 492 | 493 | ``` 494 | ::apa-reference 495 | --- 496 | authors: 497 | - Greenhouse, S 498 | date: 2020, July 30 499 | title: The coronavirus pandemic has intensified systemic economic racism against black Americans 500 | publisher: The New Yorker 501 | url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans 502 | source: newspaper 503 | --- 504 | :: 505 | ``` 506 | 507 | ### Exemples 508 | 509 | 510 | ::apa-reference 511 | --- 512 | authors: 513 | - Greenhouse, S 514 | date: 2020, July 30 515 | title: The coronavirus pandemic has intensified systemic economic racism against black Americans 516 | publisher: The New Yorker 517 | url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans 518 | source: newspaper 519 | --- 520 | :: 521 | 522 | ::apa-reference 523 | --- 524 | authors: 525 | - Lee, C 526 | date: 2020, February 19 527 | title: A tale of two reference formats 528 | publisher: APA Style Blog 529 | url: https://apastyle.apa.org/blog/two-reference-formats 530 | source: blogs 531 | --- 532 | :: 533 | 534 | ::apa-reference 535 | --- 536 | authors: 537 | - Rowlatt, J 538 | date: 2020, October 19 539 | title: Could cold water hold a clue to a dementia cure? 540 | publisher: BBC News 541 | url: https://www.bbc.com/news/health-54531075 542 | source: online-news 543 | --- 544 | :: 545 | 546 | ::apa-reference 547 | --- 548 | organization: Scribbr 549 | date: n.d. 550 | title: How to cite a website in APA style 551 | url: https://www.scribbr.com/apa-examples/website/ 552 | source: websites 553 | --- 554 | :: 555 | 556 | ::apa-reference 557 | --- 558 | date: 2020, October 19 559 | title: "The countdown: A prophecy, crowds and a TikTok takedown" 560 | publisher: BBC News 561 | url: https://www.bbc.com/news/election-us-2020-54596667 562 | source: online-news 563 | --- 564 | :: 565 | 566 | -------------------------------------------------------------------------------- /logs/3.8.1-generate-error.txt: -------------------------------------------------------------------------------- 1 | Nuxt 3.8.1 with Nitro 2.8.1 6:24:19 pm 2 | ℹ Using Nitro server preset: static 6:24:19 pm 3 | ℹ Using Tailwind CSS from ~/assets/css/styles.scss nuxt:tailwindcss 6:24:21 pm 4 | 5 | WARN Using inside app.vue will cause unwanted layout shifting in your application.Consider removing from app.vue and using it in your pages. @nuxt/content 6:24:22 pm 6 | 7 | ℹ Building client... 6:24:23 pm 8 | ℹ vite v4.5.2 building for production... 6:24:23 pm 9 | ℹ ✓ 354 modules transformed. 6:24:26 pm 10 | Inspect report generated at D:/Workspace/Templates/nuxt-content-template/.nuxt/analyze/.vite-inspect 11 | ℹ .nuxt/dist/client/manifest.json 25.13 kB │ gzip: 1.75 kB 6:24:27 pm 12 | ℹ .nuxt/dist/client/_nuxt/ProsePre.e63e49c6.css 0.05 kB │ gzip: 0.07 kB 6:24:27 pm 13 | ℹ .nuxt/dist/client/_nuxt/_...slug_.6e839d22.css 0.38 kB │ gzip: 0.18 kB 6:24:27 pm 14 | ℹ .nuxt/dist/client/_nuxt/Landing.b1d935a1.css 0.77 kB │ gzip: 0.36 kB 6:24:27 pm 15 | ℹ .nuxt/dist/client/_nuxt/default.7755e198.css 2.69 kB │ gzip: 0.81 kB 6:24:27 pm 16 | ℹ .nuxt/dist/client/_nuxt/ProseCode.0212109b.js 0.10 kB │ gzip: 0.11 kB 6:24:27 pm 17 | ℹ .nuxt/dist/client/_nuxt/ContentRendererMarkdown.33317df3.js 0.11 kB │ gzip: 0.12 kB 6:24:27 pm 18 | ℹ .nuxt/dist/client/_nuxt/ProseHr.a2264c89.js 0.15 kB │ gzip: 0.14 kB 6:24:27 pm 19 | ℹ .nuxt/dist/client/_nuxt/DocumentDrivenNotFound.a3afbb64.js 0.16 kB │ gzip: 0.15 kB 6:24:27 pm 20 | ℹ .nuxt/dist/client/_nuxt/ProseTr.6903a2e3.js 0.18 kB │ gzip: 0.16 kB 6:24:27 pm 21 | ℹ .nuxt/dist/client/_nuxt/ProseP.2c1268a1.js 0.19 kB │ gzip: 0.16 kB 6:24:27 pm 22 | ℹ .nuxt/dist/client/_nuxt/ProseTh.69540786.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 23 | ℹ .nuxt/dist/client/_nuxt/ProseTd.bf38d7ba.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 24 | ℹ .nuxt/dist/client/_nuxt/ProseUl.badbe6a3.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 25 | ℹ .nuxt/dist/client/_nuxt/ProseOl.556aebe5.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 26 | ℹ .nuxt/dist/client/_nuxt/ProseLi.be4a0f2b.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 27 | ℹ .nuxt/dist/client/_nuxt/ProseEm.3aba9784.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 28 | ℹ .nuxt/dist/client/_nuxt/ProseCodeInline.0b7ead86.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 29 | ℹ .nuxt/dist/client/_nuxt/ProseTbody.ae8f1dbf.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 30 | ℹ .nuxt/dist/client/_nuxt/ProseTable.7d12e618.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 31 | ℹ .nuxt/dist/client/_nuxt/ProseThead.c00732b0.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 32 | ℹ .nuxt/dist/client/_nuxt/ProseBlockquote.8604ccf0.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 33 | ℹ .nuxt/dist/client/_nuxt/ProseStrong.c5929c7d.js 0.19 kB │ gzip: 0.17 kB 6:24:27 pm 34 | ℹ .nuxt/dist/client/_nuxt/DocumentDrivenEmpty.a40eeb22.js 0.29 kB │ gzip: 0.24 kB 6:24:27 pm 35 | ℹ .nuxt/dist/client/_nuxt/Landing.087c7dda.js 0.30 kB │ gzip: 0.24 kB 6:24:27 pm 36 | ℹ .nuxt/dist/client/_nuxt/Markdown.82d6d3a0.js 0.33 kB │ gzip: 0.26 kB 6:24:27 pm 37 | ℹ .nuxt/dist/client/_nuxt/ProseA.c955e08e.js 0.36 kB │ gzip: 0.26 kB 6:24:27 pm 38 | ℹ .nuxt/dist/client/_nuxt/ProseH1.9feeb826.js 0.44 kB │ gzip: 0.32 kB 6:24:27 pm 39 | ℹ .nuxt/dist/client/_nuxt/ProseH5.247fb783.js 0.45 kB │ gzip: 0.32 kB 6:24:27 pm 40 | ℹ .nuxt/dist/client/_nuxt/ProseH4.f0cd7ea0.js 0.45 kB │ gzip: 0.32 kB 6:24:27 pm 41 | ℹ .nuxt/dist/client/_nuxt/ProseH6.cfcc991f.js 0.45 kB │ gzip: 0.32 kB 6:24:27 pm 42 | ℹ .nuxt/dist/client/_nuxt/Card.fedb4eb2.js 0.54 kB │ gzip: 0.34 kB 6:24:27 pm 43 | ℹ .nuxt/dist/client/_nuxt/ProseImg.9c1d1cee.js 0.62 kB │ gzip: 0.37 kB 6:24:27 pm 44 | ℹ .nuxt/dist/client/_nuxt/ProseH2.084d8df2.js 0.63 kB │ gzip: 0.44 kB 6:24:27 pm 45 | ℹ .nuxt/dist/client/_nuxt/ProseH3.125d1a15.js 0.63 kB │ gzip: 0.44 kB 6:24:27 pm 46 | ℹ .nuxt/dist/client/_nuxt/ProsePre.fe086fa8.js 0.68 kB │ gzip: 0.36 kB 6:24:27 pm 47 | ℹ .nuxt/dist/client/_nuxt/ContentNavigation.d6372af9.js 0.86 kB │ gzip: 0.51 kB 6:24:27 pm 48 | ℹ .nuxt/dist/client/_nuxt/ContentList.7b721388.js 0.87 kB │ gzip: 0.48 kB 6:24:27 pm 49 | ℹ .nuxt/dist/client/_nuxt/ContentRenderer.e80e0192.js 1.21 kB │ gzip: 0.61 kB 6:24:27 pm 50 | ℹ .nuxt/dist/client/_nuxt/ContentSlot.6156ef30.js 1.86 kB │ gzip: 0.88 kB 6:24:27 pm 51 | ℹ .nuxt/dist/client/_nuxt/client-db.31f81804.js 1.91 kB │ gzip: 0.98 kB 6:24:27 pm 52 | ℹ .nuxt/dist/client/_nuxt/ContentDoc.bfc9321a.js 2.01 kB │ gzip: 0.94 kB 6:24:27 pm 53 | ℹ .nuxt/dist/client/_nuxt/client-db.5a4b2d83.js 2.10 kB │ gzip: 1.05 kB 6:24:27 pm 54 | ℹ .nuxt/dist/client/_nuxt/ContentQuery.9cfd2e0a.js 2.46 kB │ gzip: 1.02 kB 6:24:27 pm 55 | ℹ .nuxt/dist/client/_nuxt/asyncData.d4a3aa2d.js 2.60 kB │ gzip: 1.12 kB 6:24:27 pm 56 | ℹ .nuxt/dist/client/_nuxt/en.3ac83c28.js 2.79 kB │ gzip: 0.85 kB 6:24:27 pm 57 | ℹ .nuxt/dist/client/_nuxt/fr.2e6ad269.js 2.87 kB │ gzip: 0.94 kB 6:24:27 pm 58 | ℹ .nuxt/dist/client/_nuxt/_...slug_.9dc53ac0.js 4.31 kB │ gzip: 1.91 kB 6:24:27 pm 59 | ℹ .nuxt/dist/client/_nuxt/ProseCode.vue.f79e9970.js 4.40 kB │ gzip: 2.17 kB 6:24:27 pm 60 | ℹ .nuxt/dist/client/_nuxt/index.0937e233.js 5.29 kB │ gzip: 2.15 kB 6:24:27 pm 61 | ℹ .nuxt/dist/client/_nuxt/pipeline.0e6c0421.js 18.48 kB │ gzip: 7.71 kB 6:24:27 pm 62 | ℹ .nuxt/dist/client/_nuxt/default.1fb0ad15.js 18.51 kB │ gzip: 6.24 kB 6:24:27 pm 63 | ℹ .nuxt/dist/client/_nuxt/ContentRendererMarkdown.vue.e7626398.js 23.29 kB │ gzip: 8.26 kB 6:24:27 pm 64 | ℹ .nuxt/dist/client/_nuxt/entry.9af7032e.js 248.21 kB │ gzip: 89.42 kB 6:24:27 pm 65 | ℹ ✓ built in 3.70s 6:24:27 pm 66 | ✔ Client built in 3715ms 6:24:27 pm 67 | ℹ Building server... 6:24:27 pm 68 | ℹ vite v4.5.2 building SSR bundle for production... 6:24:27 pm 69 | ℹ ✓ 253 modules transformed. 6:24:29 pm 70 | Inspect report generated at D:/Workspace/Templates/nuxt-content-template/.nuxt/analyze/.vite-inspect 71 | ℹ .nuxt/dist/server/_nuxt/entry-styles.5c601762.mjs 0.08 kB 6:24:30 pm 72 | ℹ .nuxt/dist/server/_nuxt/ProseCode-styles.93005832.mjs 0.08 kB 6:24:30 pm 73 | ℹ .nuxt/dist/server/_nuxt/_...slug_-styles.839964f7.mjs 0.08 kB 6:24:30 pm 74 | ℹ .nuxt/dist/server/_nuxt/ProsePre-styles.9d8d359a.mjs 0.15 kB 6:24:30 pm 75 | ℹ .nuxt/dist/server/_nuxt/default-styles.c42bfaec.mjs 0.22 kB 6:24:30 pm 76 | ℹ .nuxt/dist/server/styles.mjs 0.75 kB 6:24:30 pm 77 | ℹ .nuxt/dist/server/_nuxt/ProsePre-styles-1.mjs-2476b8a8.js 0.22 kB │ map: 0.12 kB 6:24:30 pm 78 | ℹ .nuxt/dist/server/_nuxt/ProseCode-styles-1.mjs-ef625421.js 0.23 kB │ map: 0.12 kB 6:24:30 pm 79 | ℹ .nuxt/dist/server/_nuxt/_...slug_-styles-1.mjs-45ba723b.js 0.57 kB │ map: 0.12 kB 6:24:30 pm 80 | ℹ .nuxt/dist/server/_nuxt/DocumentDrivenNotFound-df9d55f8.js 0.67 kB │ map: 0.60 kB 6:24:30 pm 81 | ℹ .nuxt/dist/server/_nuxt/default-styles-2.mjs-c3a57979.js 0.69 kB │ map: 0.11 kB 6:24:30 pm 82 | ℹ .nuxt/dist/server/_nuxt/default-styles-1.mjs-91c4490c.js 0.81 kB │ map: 0.11 kB 6:24:30 pm 83 | ℹ .nuxt/dist/server/_nuxt/DocumentDrivenEmpty-2a708a54.js 0.85 kB │ map: 0.99 kB 6:24:30 pm 84 | ℹ .nuxt/dist/server/_nuxt/Landing-a8f52e2a.js 1.02 kB │ map: 1.29 kB 6:24:30 pm 85 | ℹ .nuxt/dist/server/_nuxt/Markdown-f08a5fe5.js 1.04 kB │ map: 0.13 kB 6:24:30 pm 86 | ℹ .nuxt/dist/server/_nuxt/ProseHr-b38a2f0c.js 1.16 kB │ map: 0.35 kB 6:24:30 pm 87 | ℹ .nuxt/dist/server/_nuxt/Card-df4572ac.js 1.23 kB │ map: 0.12 kB 6:24:30 pm 88 | ℹ .nuxt/dist/server/_nuxt/ProseP-ebfd7041.js 1.25 kB │ map: 0.48 kB 6:24:30 pm 89 | ℹ .nuxt/dist/server/_nuxt/ProseTd-dcac05bd.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 90 | ℹ .nuxt/dist/server/_nuxt/ProseLi-ead71b75.js 1.26 kB │ map: 0.48 kB 6:24:30 pm 91 | ℹ .nuxt/dist/server/_nuxt/ProseUl-f53b0d25.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 92 | ℹ .nuxt/dist/server/_nuxt/ProseTr-504e7dd9.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 93 | ℹ .nuxt/dist/server/_nuxt/ProseOl-9f9bd375.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 94 | ℹ .nuxt/dist/server/_nuxt/ProseTh-12469609.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 95 | ℹ .nuxt/dist/server/_nuxt/ProseEm-e69a562d.js 1.26 kB │ map: 0.49 kB 6:24:30 pm 96 | ℹ .nuxt/dist/server/_nuxt/ProseThead-9538ab16.js 1.28 kB │ map: 0.50 kB 6:24:30 pm 97 | ℹ .nuxt/dist/server/_nuxt/ProseTbody-da1b77fc.js 1.28 kB │ map: 0.50 kB 6:24:30 pm 98 | ℹ .nuxt/dist/server/_nuxt/ProseTable-eb30ded9.js 1.28 kB │ map: 0.50 kB 6:24:30 pm 99 | ℹ .nuxt/dist/server/_nuxt/ProseStrong-a4c7e101.js 1.28 kB │ map: 0.51 kB 6:24:30 pm 100 | ℹ .nuxt/dist/server/_nuxt/ProseBlockquote-fd32c62b.js 1.31 kB │ map: 0.52 kB 6:24:30 pm 101 | ℹ .nuxt/dist/server/_nuxt/ProseCodeInline-d8074b11.js 1.31 kB │ map: 0.52 kB 6:24:30 pm 102 | ℹ .nuxt/dist/server/_nuxt/island-renderer-10a535c2.js 1.37 kB │ map: 1.87 kB 6:24:30 pm 103 | ℹ .nuxt/dist/server/_nuxt/default-styles-3.mjs-c6d95b22.js 1.80 kB │ map: 0.11 kB 6:24:30 pm 104 | ℹ .nuxt/dist/server/_nuxt/ProseH1-779a17d2.js 1.87 kB │ map: 0.85 kB 6:24:30 pm 105 | ℹ .nuxt/dist/server/_nuxt/ProseH4-ce466927.js 1.88 kB │ map: 0.86 kB 6:24:30 pm 106 | ℹ .nuxt/dist/server/_nuxt/ProseH6-d277c447.js 1.88 kB │ map: 0.86 kB 6:24:30 pm 107 | ℹ .nuxt/dist/server/_nuxt/ProseH5-fa4ee0db.js 1.88 kB │ map: 0.86 kB 6:24:30 pm 108 | ℹ .nuxt/dist/server/_nuxt/ProseA-d390ca00.js 1.89 kB │ map: 0.16 kB 6:24:30 pm 109 | ℹ .nuxt/dist/server/_nuxt/ProseH2-9b258021.js 1.95 kB │ map: 0.98 kB 6:24:30 pm 110 | ℹ .nuxt/dist/server/_nuxt/ProseH3-a30baf9d.js 1.95 kB │ map: 0.98 kB 6:24:30 pm 111 | ℹ .nuxt/dist/server/_nuxt/ProseImg-d0414787.js 2.13 kB │ map: 1.50 kB 6:24:30 pm 112 | ℹ .nuxt/dist/server/_nuxt/ProsePre-b1d95840.js 2.20 kB │ map: 0.17 kB 6:24:30 pm 113 | ℹ .nuxt/dist/server/_nuxt/ProseCode-d0319663.js 2.62 kB │ map: 2.68 kB 6:24:30 pm 114 | ℹ .nuxt/dist/server/_nuxt/ContentList-45ff97a8.js 2.83 kB │ map: 2.99 kB 6:24:30 pm 115 | ℹ .nuxt/dist/server/_nuxt/ContentNavigation-4e9398c4.js 2.84 kB │ map: 3.42 kB 6:24:30 pm 116 | ℹ .nuxt/dist/server/_nuxt/OgImageBasic.island-e24bc524.js 3.01 kB │ map: 3.04 kB 6:24:30 pm 117 | ℹ .nuxt/dist/server/_nuxt/ContentRenderer-4d799447.js 3.27 kB │ map: 3.55 kB 6:24:30 pm 118 | ℹ .nuxt/dist/server/_nuxt/asyncData-57a4c648.js 4.15 kB │ map: 10.33 kB 6:24:30 pm 119 | ℹ .nuxt/dist/server/_nuxt/client-db-34111973.js 4.70 kB │ map: 7.14 kB 6:24:30 pm 120 | ℹ .nuxt/dist/server/_nuxt/ContentSlot-b2d47a38.js 4.78 kB │ map: 7.94 kB 6:24:30 pm 121 | ℹ .nuxt/dist/server/_nuxt/client-db-fec8da3f.js 5.18 kB │ map: 8.21 kB 6:24:30 pm 122 | ℹ .nuxt/dist/server/_nuxt/en-d484eaa4.js 5.33 kB │ map: 7.17 kB 6:24:30 pm 123 | ℹ .nuxt/dist/server/_nuxt/fr-4afea3ee.js 5.41 kB │ map: 7.33 kB 6:24:30 pm 124 | ℹ .nuxt/dist/server/_nuxt/ContentQuery-1f38045c.js 6.36 kB │ map: 9.08 kB 6:24:30 pm 125 | ℹ .nuxt/dist/server/_nuxt/ContentDoc-fa7fd49d.js 7.65 kB │ map: 11.04 kB 6:24:30 pm 126 | ℹ .nuxt/dist/server/_nuxt/pipeline-c5c54ecd.js 10.52 kB │ map: 20.68 kB 6:24:30 pm 127 | ℹ .nuxt/dist/server/_nuxt/_...slug_-eabce24f.js 10.82 kB │ map: 5.05 kB 6:24:30 pm 128 | ℹ .nuxt/dist/server/_nuxt/index-8e1a702a.js 12.46 kB │ map: 9.83 kB 6:24:30 pm 129 | ℹ .nuxt/dist/server/_nuxt/ContentRendererMarkdown-4683471c.js 13.35 kB │ map: 21.06 kB 6:24:30 pm 130 | ℹ .nuxt/dist/server/_nuxt/default-6ad6a4d6.js 31.05 kB │ map: 26.56 kB 6:24:30 pm 131 | ℹ .nuxt/dist/server/_nuxt/entry-styles-1.mjs-285f94ee.js 39.44 kB │ map: 0.11 kB 6:24:30 pm 132 | ℹ .nuxt/dist/server/server.mjs 260.21 kB │ map: 607.07 kB 6:24:30 pm 133 | ℹ ✓ built in 3.09s 6:24:30 pm 134 | ✔ Server built in 3145ms 6:24:30 pm 135 | ℹ Initializing prerenderer nitro 6:24:30 pm 136 | 137 | ERROR The requested module 'file://D:/Workspace/Templates/nuxt-content-template/node_modules/.pnpm/h3@1.7.1/node_modules/h3/dist/index.mjs' does not provide an export named 'removeResponseHeader' 6:24:34 pm 138 | 139 | globalThis._importMeta_=globalThis._importMeta_||{url:"/_entry.js",env:process.env};import { defineEventHandler, handleCacheHeaders, splitCookiesString, isEvent, createEvent, getRequestHeader, eventHandler, setHeaders, sendRedirect, proxyRequest, setResponseStatus, setResponseHeader, send, getRequestHeaders, removeResponseHeader, createError, getResponseHeader, getQuery as getQuery$1, setHeader, getCookie, lazyEventHandler, createApp, createRouter as createRouter$1, toNodeListener, fetchWithEvent } from 'file://D:/Workspace/Templates/nuxt-content-template/node_modules/.pnpm/h3@1.7.1/node_modules/h3/dist/index.mjs'; 140 | ^^^^^^^^^^^^^^^^^^^^ 141 | SyntaxError: The requested module 'D:/Workspace/Templates/nuxt-content-template/node_modules/.pnpm/h3@1.7.1/node_modules/h3/dist/index.mjs' does not provide an export named 'removeResponseHeader' 142 | at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) 143 | at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) 144 | 145 | 146 | 147 | ERROR The requested module 'file://D:/Workspace/Templates/nuxt-content-template/node_modules/.pnpm/h3@1.7.1/node_modules/h3/dist/index.mjs' does not provide an export named 'removeResponseHeader' --------------------------------------------------------------------------------

4 | {{ $t("error.title") }} 5 |

11 | 16 | # 17 | 18 | 19 |

11 | 16 | # 17 | 18 | 19 |

22 | {{ $t("errorPage.message") }} 23 |

54 | {{ title }} 55 |

66 | {{ data?.title }} 67 |

16 | Nuxt 20 | Content Template 21 |

99 | {{ $t("homePage.sitemap.heading") }} 100 |

Nuxt Content Template

{{ data?.title }}

` and `

` only in the ToC and will skip any `

` that is present to the markdown because `

` is recognized as the main title of the article or page. Any subsequent headings in the article will have to start from `

` semantically. Hence, it is recommended to use headings `

` and above when writing. 106 | 107 | This template only renders out the `