Ajout de nouveaux articles dans le thème Point Rouge

Ce guide couvre les règles et conventions de création de nouvelles publications dans Point Rouge : placement de fichiers, champs de premier plan, images et coloration syntaxique.

Table des matières

Créer un article de blog

Pour rédiger un nouvel article de blog, créez un fichier markdown (ou MDX) dans le src/content/posts/ répertoire.

Vous pouvez organiser les publications dans des sous-répertoires pour faciliter la gestion du contenu. Le nom du sous-répertoire devient une partie de l’URL de la publication. Par exemple, src/content/posts/2025/example-post.md sera disponible à /posts/2025/example-post.

Si vous souhaitez un sous-répertoire pour l’organisation uniquement, sans que cela n’affecte l’URL, préfixez le nom du dossier avec un trait de soulignement (_).

# Example: post file paths and their URLs
src/content/posts/very-first-post.md          -> mysite.com/posts/very-first-post
src/content/posts/2025/example-post.md        -> mysite.com/posts/2025/example-post
src/content/posts/_2026/another-post.md       -> mysite.com/posts/another-post
src/content/posts/docs/_legacy/how-to.md      -> mysite.com/posts/docs/how-to
src/content/posts/Example Dir/Dummy Post.md   -> mysite.com/posts/example-dir/dummy-post

Frontière

Frontmatter est l’endroit principal pour stocker les métadonnées d’un article de blog. Il se trouve en haut du fichier au format YAML. En savoir plus sur le frontmatter et son utilisation dans Documentation Astro.

Voici la liste des propriétés de premier plan pour chaque article :

Seulement title, description, et pubDatetime les champs en première page doivent être spécifiés.

Le titre et la description (extrait) sont importants pour l’optimisation des moteurs de recherche (SEO) et Point Rouge vous encourage donc à les inclure dans tous les articles de blog.

Si vous oubliez tags dans un article de blog (en d’autres termes, si aucune balise n’est spécifiée), la balise par défaut others sera utilisé comme tag pour ce message. Vous pouvez définir la balise par défaut dans src/content.config.ts:

// ...
tags: z.array(z.string()).default(["others"]), // replace "others" with whatever you want
// ...src/content.config.ts

Exemple de présentation

Voici un exemple de texte de présentation pour un article.

---
title: The title of the post
author: your name
pubDatetime: 2022-09-21T05:17:19Z
featured: true
draft: false
tags:
  - some
  - example
  - tags
ogImage: ../../assets/images/example.png # src/assets/images/example.png
# ogImage: "https://example.org/remote-image.png" # remote URL
description: This is the example description of the example post.
canonicalURL: https://example.org/my-article-was-already-posted-here
---src/content/posts/sample-post.md

Extraits de code VS (facultatif)

Point Rouge inclut des extraits d’espace de travail pour accélérer la création de nouvelles publications :

• matière première: insère le bloc frontmatter recommandé
• modèle: insère un modèle de publication de base (comprenant ## Table of contents)

Ces extraits vivent dans .vscode/astro-paper.code-snippets. Si vous utilisez VS Code (ou Cursor), ils devraient être disponibles automatiquement lorsque vous ouvrez l’espace de travail.

Légendes

Point Rouge a commencé à prendre en charge les légendes dans Point Rouge v6.1. Ils utilisent une simple syntaxe de blockquote optimisée par rehype-callouts (Thème Obsidienne).

Voici les types les plus couramment utilisés :

La liste complète des types pris en charge comprend : NOTE, ABSTRACT, INFO, TODO, TIP, SUCCESS, QUESTION, WARNING, FAILURE, DANGER, BUG, EXAMPLE, QUOTE - chacun avec sa propre icône et sa propre couleur. De nombreux types acceptent également les alias (par ex. HINT et IMPORTANT pour TIP, CAUTION pour WARNING). Voir le documents rehype-callouts pour la référence complète.

Légendes pliables

Ajouter - après le type pour que la légende soit réduite par défaut, ou + pour le rendre agrandi mais pliable :

Titres personnalisés

Remplacez l’étiquette de type par défaut par le titre de votre choix en ajoutant du texte après le type :

Résumé de la syntaxe

> [!NOTE]
> Supplementary information.

> [!WARNING]- Collapsed by default
> Hidden until expanded.

> [!TIP]+ Expanded, but collapsible
> Starts open.

> [!DANGER] Custom title
> Replaces the default heading.

Ajout d’une table des matières

Par défaut, une publication n’inclut aucune table des matières (TOC). Pour en inclure un, écrivez Table of contents comme titre h2 (## dans Markdown) et placez-le là où vous souhaitez qu’il apparaisse :

---
# frontmatter
---

Here are some recommendations, tips & tricks for creating new posts in Point Rouge blog theme.

## Table of contents

<!-- the rest of the post -->

Rubriques

Il y a une chose à noter concernant les titres. Les articles du blog Point Rouge utilisent title (du début) comme titre principal du message. Par conséquent, le reste des titres du message doit utiliser h2 ~ h6.

Cette règle n’est pas obligatoire, mais fortement recommandée à des fins de visuel, d’accessibilité et de référencement.

Mise en évidence de la syntaxe

Point Rouge utilise Shiki comme surligneur de syntaxe par défaut, avec @shikijs/transformateurs pour des blocs de code clôturés améliorés. Si vous ne souhaitez pas utiliser les transformateurs, vous pouvez les supprimer :

pnpm remove @shikijs/transformers

// ...
import {
  transformerNotationDiff,
  transformerNotationHighlight,
  transformerNotationWordHighlight,
} from "@shikijs/transformers";

export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
    shikiConfig: {
      themes: { light: "min-light", dark: "night-owl" },
      defaultColor: false,
      wrap: false,
      transformers: [
        transformerFileName(),
        transformerNotationHighlight(),
        transformerNotationWordHighlight(),
        transformerNotationDiff({ matchAlgorithm: "v3" }),
      ],
    },
  },
  // ...
});astro.config.ts

Stockage d’images pour le contenu du blog

Voici deux méthodes pour stocker des images et les utiliser dans un fichier markdown.

À l’intérieur src/assets/ répertoire (recommandé)

Vous pouvez stocker des images à l’intérieur du src/assets/ répertoire. Ces images seront automatiquement optimisées par Astro via le API du service d’images.

Vous pouvez utiliser un chemin relatif ou un chemin d’alias (@/assets/) pour référencer ces images.

Exemple : supposons que vous souhaitiez afficher example.jpg dont le chemin est src/assets/images/example.jpg.

![something](@/assets/images/example.jpg)

<!-- OR -->

![something](../../assets/images/example.jpg)

<!-- Using img tag or Image component won't work in markdown ❌ -->
<img src="@/assets/images/example.jpg" alt="something">
<!-- ^^ This is wrong -->

À l’intérieur public/ répertoire

Vous pouvez stocker des images à l’intérieur du public/ répertoire. Gardez à l’esprit que les images stockées dans public/ restent intacts par Astro, ce qui signifie qu’ils ne seront pas optimisés et que vous devrez gérer vous-même l’optimisation de l’image.

Pour ces images, utilisez un chemin absolu. Ils peuvent être affichés à l’aide syntaxe de l’image de Markdown ou un HTML img étiquette.

Exemple : supposer example.jpg est situé à public/assets/images/example.jpg.

![something](/assets/images/example.jpg)

<!-- OR -->

<img src="/assets/images/example.jpg" alt="something">

Bonus

Compression d’images

Sites de compression d’images recommandés :

• MinusculePng
• MinusculeJPG

Image originale

L’image OG par défaut sera utilisée si une publication n’en spécifie pas. Bien que cela ne soit pas obligatoire, une image OG pertinente pour le message doit être spécifiée dans le texte de présentation. La taille recommandée pour les images OG est 1200X640 px.