Changez la destination de la copie Vault en racine avec le plugin starlight-obsidian

Par défaut, Obsidian Vault est copié dans src/content/docs/notes par le plugin starlight-obsidian.

Par conséquent, l’affichage de la barre latérale de l’interface utilisateur et la description du chemin de l’URL se trouvent un niveau en dessous de la racine, ce qui entraîne une différence d’un niveau dans la structure des répertoires par rapport à l’affichage sur Obsidian.

Ce que je veux réaliser

• Définissez la destination de copie Vault directement sous src/content/docs
• Aligner la barre latérale avec la hiérarchie Obsidian Vault

Définissez la destination de la copie Vault directement sous src/content

C’est relativement facile.

Tout d’abord, videz la zone sous src/content/docs.

rm -rf ./src/content/docs/**/*

Ensuite, modifiez les paramètres en jouant avec astro.config.mjs.

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightObsidian, { obsidianSidebarGroup } from 'starlight-obsidian'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightObsidian({
          output: '.'
        }),
      ],
      title: 'My Docs',
    }),
  ],
})

En spécifiant output: '.', il sera copié directement sous la racine.

Alignez la barre latérale avec la hiérarchie d’Obsidian Vault

Un ticket GitHub a été ouvert pour cela, mais afin de se conformer aux spécifications de @astrojs/starlight, la politique est de ne pas le prendre en charge en tant que plugin pour le moment.

Option pour faire d’Obsidian la barre latérale entière sans nécessiter de nœud racine. · Numéro 5 · HiDeoo/starlight-obsidian

Par conséquent, au lieu d’utiliser obsidianSidebarGroup généré par starlight-obsidian, nous allons créer la structure de répertoires avec notre propre implémentation.

touch sidebar.config.mjs

import path from 'node:path';
import fs from 'node:fs/promises';

const CONTENT_DIR = path.resolve(process.cwd(), 'src/content/docs');

export async function generateSidebar() {
  const entries = await fs.readdir(CONTENT_DIR, { withFileTypes: true });
  const dirs = entries.filter(v => v.isDirectory() && !v.name.startsWith("."));

  /** @type {import('@astrojs/starlight/types').StarlightUserConfig} */
  const config = {
    sidebar: dirs.map(v => ({
      label: v.name,
      autogenerate: {
        directory: v.name
      }
    }))
  }

  return config.sidebar
}

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightObsidian from 'starlight-obsidian'
import { generateSidebar } from './sidebar.config.mjs'

const sidebar = await generateSidebar();

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightObsidian({
          output: '.'
        }),
      ],
      title: 'My Docs',
      sidebar
    }),
  ],
})

résumé

En modifiant le comportement par défaut du plugin starlight-obsidian, la structure hiérarchique d’Obsidian Vault peut être directement reflétée sur le site Starlight.

Les barres latérales générées automatiquement vous permettent de maintenir une structure cohérente entre Obsidian et Starlight.