ভূমিকা

সাইডবার কনফিগার করতে ডিফল্ট থিমে sidebar অপশন পাস করুন। সাইডবার সেটআপ করার দুটি উপায় রয়েছে:

  • স্বয়ংক্রিয় — আপনার রাউট ডিরেক্টরি স্ক্যান করে ফাইল স্ট্রাকচার এবং frontmatter থেকে সাইডবার তৈরি করে
  • ম্যানুয়াল — আপনার Vite কনফিগে প্রতিটি সাইডবার আইটেম সুনির্দিষ্টভাবে সংজ্ঞায়িত করুন

স্বয়ংক্রিয় সাইডবার

SveltePress কে আপনার src/routes/ ডিরেক্টরি স্ক্যান করে স্বয়ংক্রিয়ভাবে সাইডবার তৈরি করতে sidebar কে { enabled: true } সেট করুন।

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
} from 'vite'
export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
({
UserConfig.plugins?: PluginOption[] | undefined

Array of vite plugins to use.

plugins
: [
function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({ SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({ DefaultThemeOptions.sidebar?: Record<string, LinkItem[]> | AutoSidebarOptions | undefinedsidebar: { AutoSidebarOptions.enabled: boolean

Enable auto-generated sidebar

enabled
: true,
}, }), }), ], })
ts

SveltePress শীর্ষ-স্তরের রাউট ডিরেক্টরি (যেমন /guide/, /reference/) শনাক্ত করে স্বয়ংক্রিয়ভাবে সাইডবার গ্রুপ তৈরি করবে।

স্বয়ংক্রিয় সাইডবার historical version এড়িয়ে যায়

/v/1.0/-এর মতো historical version snapshot tree (এবং /zh/v/1.0/-এর মতো locale-composed base) বাদ পড়ে, roots-এ স্পষ্টভাবে /v/ থাকলেও। Frozen history তার snapshot metadata-এর সাইডবারই রাখে।

অপশনসমূহ

অপশনটাইপডিফল্টবিবরণ
enabledbooleanস্বয়ংক্রিয় সাইডবার সক্রিয় করতে true সেট করুন
routesDirstring'src/routes'কাস্টম রাউট ডিরেক্টরি পাথ
rootsstring[]স্বয়ংক্রিয় শনাক্তকরণসাইডবার তৈরির জন্য রুট পাথ, যেমন ['/guide/', '/reference/']। নির্দিষ্ট না করলে শীর্ষ-স্তরের রাউট ডিরেক্টরি থেকে স্বয়ংক্রিয়ভাবে শনাক্ত করা হয়
sidebar: {
  enabled: true,
  routesDir: 'src/routes',
  roots: ['/guide/', '/reference/'],
}
txt

Frontmatter নিয়ন্ত্রণ

আপনার +page.md ফাইলে frontmatter ব্যবহার করে স্বয়ংক্রিয় সাইডবারে পেজের প্রদর্শন নিয়ন্ত্রণ করুন।

---
title: শুরু করুন
order: 1
sidebar: true
sidebarTitle: এখান থেকে শুরু
collapsible: true
---
md
ফিল্ডটাইপডিফল্টবিবরণ
titlestringফাইলনাম থেকে অনুমানপেজ শিরোনাম, সাইডবার লেবেল হিসেবেও ব্যবহৃত
sidebarTitlestringসাইডবার লেবেল ওভাররাইড করুন (title এর চেয়ে অগ্রাধিকার পায়)
ordernumber100একই স্তরে সাজানোর ক্রম। ছোট সংখ্যা আগে দেখায়
sidebarbooleantrueসাইডবার থেকে এই পেজ বাদ দিতে false সেট করুন
collapsiblebooleanসাইডবার গ্রুপ ভাঁজযোগ্য কিনা
ফাইল নামকরণ

title বা sidebarTitle না দেওয়া হলে, ডিরেক্টরির নাম পাঠযোগ্য ফরম্যাটে রূপান্তরিত হয় (যেমন getting-startedGetting Started)।

HMR সমর্থন

ডেভ মোডে স্বয়ংক্রিয় সাইডবার ব্যবহার করলে, রাউট ফাইল যোগ বা মুছে ফেললে সাইডবার স্বয়ংক্রিয়ভাবে পুনরায় তৈরি হবে — রিস্টার্টের প্রয়োজন নেই।

ম্যানুয়াল সাইডবার

আপনার Vite কনফিগে সাইডবার কাঠামো ম্যানুয়ালি সংজ্ঞায়িত করুন। এটি শিরোনাম, লিংক, গ্রুপিং এবং ক্রমের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়।

স্বয়ংক্রিয় base

কনফিগ করা লিংকগুলোতে স্বয়ংক্রিয়ভাবে base প্রিফিক্স যোগ হবে

অ্যাবসোলিউট মোড

আপনাকে paths.relative false সেট করতে হবে

svelte.config.js
+
import adapter from '@sveltejs/adapter-static'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    paths: {
      relative: false, 
    },
  },
}

export default config
js
import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
} from 'vite'
export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)

Type helper to make it easier to use vite.config.ts accepts a direct

UserConfig

object, or a function that returns it. The function receives a

ConfigEnv

object.

defineConfig
({
UserConfig.plugins?: PluginOption[] | undefined

Array of vite plugins to use.

plugins
: [
function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({ SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({ DefaultThemeOptions.sidebar?: Record<string, LinkItem[]> | AutoSidebarOptions | undefinedsidebar: { '/foo/': [ { WithTitle.title?: string | undefinedtitle: 'Bar', LinkItem.to?: string | undefinedto: '/foo/bar/', }, { WithTitle.title?: string | undefinedtitle: 'Zoo', LinkItem.collapsible?: boolean | undefinedcollapsible: true, LinkItem.items?: LinkItem[] | undefineditems: [ { WithTitle.title?: string | undefinedtitle: 'Sub item', LinkItem.to?: string | undefinedto: '/sub/item/link', }, ], }, { WithTitle.title?: string | undefinedtitle: 'External github page', LinkItem.to?: string | undefinedto: 'https://github.com', }, ], }, }), }), ], })
ts
Expand code

title

সাইডবার আইটেমের শিরোনাম

to

লিংক ঠিকানা

স্বয়ংক্রিয় বহিরাগত

নেভবার আইটেমের বিপরীতে, সাইডবার আইটেম Link কম্পোনেন্ট ব্যবহার করে। http(s) দিয়ে শুরু হওয়া লিংক স্বয়ংক্রিয়ভাবে বহিরাগত লিংক হিসেবে চিহ্নিত হবে।

collapsible

সাইডবার গ্রুপ ভাঁজযোগ্য কিনা তা নির্ধারণ করে। ডিফল্ট হল false

items

সাব আইটেম

নেস্টেড আইটেম

নেস্টেড আইটেম সমর্থিত