Comment configurer le thème Point Rouge

Ce guide couvre les options de configuration disponibles dans Point Rouge — des métadonnées du site et des indicateurs de fonctionnalités aux polices, liens sociaux et paramètres de mise en page.

Table des matières

Configuration d’point-rouge.config.ts

Toute la configuration à l’échelle du site réside dans point-rouge.config.ts à la base du projet. Utiliser definePointRougeConfig() pour bénéficier de la prise en charge complète d’IntelliSense :

import { definePointRougeConfig } from "./src/types/config";

export default definePointRougeConfig({
  site: {
    url: "https://example.com", // replace with your deployed URL
    title: "Point Rouge",
    description: "Free, independent media for human common sense.",
    author: "Monsieur Klein",
    profile: "https://www.klein.com",
    ogImage: "default-og.jpg",
    lang: "en",
    timezone: "Asia/Bangkok",
    dir: "ltr",
  },
  posts: {
    perPage: 4,
    perIndex: 4,
    scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
  },
  features: {
    lightAndDarkMode: true,
    dynamicOgImage: true,
    showArchives: true,
    showBackButton: true,
    editPost: {
      enabled: true,
      url: "https://github.com/satnaing/astro-paper/edit/main/",
    },
    search: "pagefind",
  },
  socials: [
    { name: "github", url: "https://github.com/satnaing/astro-paper" },
    { name: "x", url: "https://x.com/username" },
    { name: "linkedin", url: "https://www.linkedin.com/in/username/" },
    { name: "mail", url: "mailto:yourmail@gmail.com" },
  ],
  shareLinks: [
    { name: "whatsapp", url: "https://wa.me/?text=" },
    { name: "facebook", url: "https://www.facebook.com/sharer.php?u=" },
    { name: "x", url: "https://x.com/intent/post?url=" },
    { name: "telegram", url: "https://t.me/share/url?url=" },
    { name: "mail", url: "mailto:?subject=See%20this%20post&body=" },
  ],
});point-rouge.config.ts

site choix

posts choix

features choix

Mettre à jour la largeur de la mise en page

La valeur par défaut max-width pour l’ensemble du blog est 768px (max-w-3xl). Si vous souhaitez le modifier, mettez à jour le max-w-app utilité dans src/styles/global.css:

@utility max-w-app {
  @apply max-w-3xl;
  @apply max-w-4xl xl:max-w-5xl;
}src/styles/global.css

Vous pouvez explorer davantage max-width valeurs dans le Documentation CSS Tailwind.

Configuration du logo ou du titre

Vous pouvez faire 3 options :

Option 1 : Texte du titre du site

C’est l’option la plus simple. Mise à jour site.title dans point-rouge.config.ts.

Option 2 : le composant SVG d’Astro

Vous souhaiterez peut-être utiliser cette option si vous souhaitez utiliser un logo SVG.

• Ajoutez d’abord un SVG à l’intérieur src/assets/ répertoire. (par ex. src/assets/dummy-logo.svg)

• Importez ensuite ce SVG à l’intérieur Header.astro

  ---
  // ...
  import DummyLogo from "@/assets/dummy-logo.svg";
  ---src/components/Header.astro

• Enfin, remplacez {config.site.title} avec logo importé.

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <DummyLogo class="scale-75 dark:invert" />
    <!-- {config.site.title} -->
  </a>

La meilleure partie de cette approche est que vous pouvez personnaliser vos styles SVG selon vos besoins. Dans l’exemple ci-dessus, vous pouvez voir comment la couleur du logo SVG peut être inversée en mode sombre.

Option 3 : le composant Image d’Astro

Si votre logo est une image mais pas SVG, vous pouvez utiliser le composant Image d’Astro.

• Ajoutez votre logo à l’intérieur src/assets/ répertoire. (par ex. src/assets/dummy-logo.png)

• Importer Image et votre logo dans Header.astro

  ---
  // ...
  import { Image } from "astro:assets";
  import dummyLogo from "@/assets/dummy-logo.png";
  ---src/components/Header.astro

• Ensuite, remplacez {config.site.title} avec logo importé.

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <image src="{dummyLogo}" alt="My Blog" class="dark:invert" />
    <!-- {config.site.title} -->
  </a>

Avec cette approche, vous pouvez toujours ajuster l’apparence de votre image à l’aide de classes CSS. Cependant, cela ne correspond pas toujours à ce que vous souhaitez. Si vous devez afficher différentes images de logo en fonction du mode clair ou sombre, vérifiez comment les icônes claires/sombres sont gérées à l’intérieur du Header.astro composant.

Configurer les liens sociaux

Les liens sociaux sont configurés dans le socials tableau à l’intérieur point-rouge.config.ts. Chaque entrée nécessite un name correspondant à un nom de fichier Radix SVG dans src/assets/radix-icons/socials/ et un url:

export default definePointRougeConfig({
  // ...
  socials: [
    { name: "github", url: "https://github.com/satnaing/astro-paper" },
    { name: "x", url: "https://x.com/username" },
    { name: "linkedin", url: "https://www.linkedin.com/in/username/" },
    { name: "mail", url: "mailto:yourmail@gmail.com" },
  ],
});point-rouge.config.ts

Pour ajouter un réseau social qui ne figure pas dans les paramètres par défaut, ajoutez son icône Radix SVG à src/assets/radix-icons/socials/ et ajoutez une entrée au tableau. Le name doit correspondre au nom du fichier SVG sans le .svg prolongation.

Configuration des liens de partage

Les liens de partage sont configurés dans le shareLinks tableau. Chaque entrée nécessite un name (correspondant à un Radix SVG dans src/assets/radix-icons/socials/) et une base url à laquelle l’URL de la publication est ajoutée :

export default definePointRougeConfig({
  // ...
  shareLinks: [
    { name: "whatsapp", url: "https://wa.me/?text=" },
    { name: "facebook", url: "https://www.facebook.com/sharer.php?u=" },
    { name: "x", url: "https://x.com/intent/post?url=" },
    { name: "telegram", url: "https://t.me/share/url?url=" },
    { name: "mail", url: "mailto:?subject=See%20this%20post&body=" },
  ],
});point-rouge.config.ts

Configuration des polices

Point Rouge utilise Astro API des polices avec Google Sans Code comme police par défaut. Cela fournit une typographie cohérente sur toutes les plates-formes avec des optimisations automatiques des polices, y compris le préchargement et la mise en cache.

Utiliser la police par défaut

La police est automatiquement configurée dans astro.config.ts et chargé dans Layout.astro. Aucune configuration supplémentaire n’est nécessaire pour utiliser la police Google Sans Code par défaut.

Personnalisation de la police

Pour utiliser une police différente, mettez à jour trois emplacements :

1. Mettez à jour la configuration des polices dans astro.config.ts:

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  // ...
  fonts: [
    {
      name: "Your Font Name",
      cssVariable: "--font-your-font",
      provider: fontProviders.google(),
      fallbacks: ["monospace"],
      weights: [300, 400, 500, 600, 700],
      styles: ["normal", "italic"],
    },
  ],
});astro.config.ts

2. Mettez à jour le composant Font dans Layout.astro:

---
import { Font } from "astro:assets";
// ...
---

<head>
  <!-- ... -->
  <Font
    cssVariable="--font-your-font"
    preload={[{ subset: "latin", weight: 400, style: "normal" }]}
  />
  <!-- ... -->
</head>src/layouts/Layout.astro

3. Mettez à jour le mappage des variables CSS dans src/styles/theme.css:

@theme inline {
  --font-app: var(--font-your-font); 
  /* ... */
}src/styles/theme.css

Le --font-app La variable est utilisée tout au long du thème via le font-app Classe utilitaire Tailwind, donc la mise à jour de cette variable unique applique votre police personnalisée partout.

Voir aussi

• Personnalisation des jeux de couleurs du thème Point Rouge - modifier ou ajouter des schémas de couleurs via src/styles/theme.css.
• Ajout de nouveaux messages — les conventions de référence et de fichiers.