ইন্সটল

npm install --save @sveltepress/theme-default
sh
yarn add @sveltepress/theme-default
sh
pnpm install @sveltepress/theme-default
sh
bun add @sveltepress/theme-default
sh

আপনার vite config এ যুক্ত করুন

vite.config.(js|ts)
+
+
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'
const const config: UserConfigconfig = 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(/** theme options */) }) ], }) export default const config: UserConfigconfig
ts

এক নজরে Types

/// <reference types="vite/client" />
/// <reference types="@sveltepress/vite/types" />
/// <reference types="@sveltejs/kit/vite" />

declare module 'virtual:sveltepress/theme-default' {
  import type { import DocSearchPropsDocSearchProps } from '@sveltepress/docsearch/types'
  import type { import CreateTwoslashSvelteOptionsCreateTwoslashSvelteOptions } from '@sveltepress/twoslash'
  import type { import LoadThemeLoadTheme } from '@sveltepress/vite'
  import type { import SvelteKitPWAOptionsSvelteKitPWAOptions } from '@vite-pwa/sveltekit'
  import type { import BundledThemeBundledTheme } from 'shiki'
  import type { import BundledLanguageBundledLanguage } from 'shiki/langs'
  import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
export interface WithTitle { WithTitle.title?: string | undefinedtitle?: string } export interface LinkItem extends WithTitle { LinkItem.icon?: string | undefinedicon?: string LinkItem.to?: string | undefinedto?: string LinkItem.external?: boolean | undefinedexternal?: boolean LinkItem.collapsible?: boolean | undefinedcollapsible?: boolean LinkItem.items?: LinkItem[] | undefineditems?: LinkItem[] } export interface AutoSidebarOptions { /** * Enable auto-generated sidebar */ AutoSidebarOptions.enabled: boolean

Enable auto-generated sidebar

enabled
: boolean
/** * Routes directory, default 'src/routes' */ AutoSidebarOptions.routesDir?: string | undefined

Routes directory, default 'src/routes'

routesDir
?: string
/** * Root paths to generate sidebar for, e.g. ['/guide/', '/reference/'] * If not specified, auto-detect from top-level route directories */ AutoSidebarOptions.roots?: string[] | undefined

Root paths to generate sidebar for, e.g. ['/guide/', '/reference/'] If not specified, auto-detect from top-level route directories

roots
?: string[]
} export interface DefaultThemeOptions { DefaultThemeOptions.navbar?: LinkItem[] | undefinednavbar?: interface Array<T>Array<LinkItem> DefaultThemeOptions.github?: string | undefinedgithub?: string DefaultThemeOptions.logo?: string | undefinedlogo?: string DefaultThemeOptions.sidebar?: AutoSidebarOptions | Record<string, LinkItem[]> | undefinedsidebar?: type Record<K extends keyof any, T> = { [P in K]: T; }

Construct a type with a set of properties K of type T

Record
<string, LinkItem[]> | AutoSidebarOptions
DefaultThemeOptions.editLink?: string | undefinededitLink?: string DefaultThemeOptions.discord?: string | undefineddiscord?: string DefaultThemeOptions.ga?: string | undefinedga?: string
DefaultThemeOptions.pwa?: (SvelteKitPWAOptions & {
    darkManifest?: string;
    precachePages?: boolean | string[];
    precacheClient?: boolean;
}) | undefined
pwa
?: import SvelteKitPWAOptionsSvelteKitPWAOptions & {
darkManifest?: string | undefineddarkManifest?: string /** * Which prerendered HTML pages to put in the Workbox precache. * * Default `false` only precaches the homepage so service-worker * install/update stays fast on sites with many versions and locales. * * - `false`: homepage only * - `true`: all prerendered HTML (historical versions are still ignored) * - `string[]`: URL prefixes, e.g. `['/zh/', '/v/2026-08-27/']` */ precachePages?: boolean | string[] | undefined

Which prerendered HTML pages to put in the Workbox precache.

Default false only precaches the homepage so service-worker install/update stays fast on sites with many versions and locales.

  • false: homepage only
  • true: all prerendered HTML (historical versions are still ignored)
  • string[]: URL prefixes, e.g. ['/zh/', '/v/2026-08-27/']
precachePages
?: boolean | string[]
/** * Which client files to put in the Workbox precache. * * Default `false` only precaches the app shell (SvelteKit entry, * hashed CSS/fonts, and root icons) so service-worker install/update * stays fast on sites with many pages. Per-route nodes and chunks * are fetched on demand. * * - `false`: app shell only * - `true`: every matching client file (the previous catch-all glob) */ precacheClient?: boolean | undefined

Which client files to put in the Workbox precache.

Default false only precaches the app shell (SvelteKit entry, hashed CSS/fonts, and root icons) so service-worker install/update stays fast on sites with many pages. Per-route nodes and chunks are fetched on demand.

  • false: app shell only
  • true: every matching client file (the previous catch-all glob)
precacheClient
?: boolean
} DefaultThemeOptions.docsearch?: Omit<DocSearchProps, "theme" | "container"> | undefineddocsearch?: type Omit<T, K extends keyof any> = { [P in Exclude<keyof T, K>]: T[P]; }

Construct a type with the properties of T except for those in type K.

Omit
<import DocSearchPropsDocSearchProps, 'container' | 'theme'>
DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch?: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
| string | boolean
DefaultThemeOptions.themeColor?: {
    light: string;
    dark: string;
    primary?: string;
    primaryDeep?: string;
    hover?: string;
    gradient?: {
        start: string;
        end: string;
    };
} | undefined
themeColor
?: {
light: stringlight: string dark: stringdark: string primary?: string | undefinedprimary?: string /** * Darker variant of primary, used for accent text on light backgrounds * where the primary color alone lacks contrast. * Defaults to `#e11d48` when primary is not customized, otherwise falls back to primary. */ primaryDeep?: string | undefined

Darker variant of primary, used for accent text on light backgrounds where the primary color alone lacks contrast. Defaults to #e11d48 when primary is not customized, otherwise falls back to primary.

primaryDeep
?: string
hover?: string | undefinedhover?: string
gradient?: {
    start: string;
    end: string;
} | undefined
gradient
?: {
start: stringstart: string end: stringend: string } }
DefaultThemeOptions.highlighter?: {
    languages?: BundledLanguage[];
    themeLight?: BundledTheme;
    themeDark?: BundledTheme;
    twoslash?: boolean | CreateTwoslashSvelteOptions;
    codeCollapseLines?: number;
} | undefined
highlighter
?: {
languages?: BundledLanguage[] | undefinedlanguages?: import BundledLanguageBundledLanguage[] themeLight?: anythemeLight?: import BundledThemeBundledTheme themeDark?: anythemeDark?: import BundledThemeBundledTheme twoslash?: anytwoslash?: boolean | import CreateTwoslashSvelteOptionsCreateTwoslashSvelteOptions /** * Code blocks taller than this many lines start collapsed with an * "Expand code" bar. Set to 0 to disable collapsing. * @default 30 */ codeCollapseLines?: number | undefined

Code blocks taller than this many lines start collapsed with an "Expand code" bar. Set to 0 to disable collapsing.

@default30
codeCollapseLines
?: number
}
DefaultThemeOptions.i18n?: {
    navbarMenu?: string;
    heroCode?: {
        title?: string;
        messageBefore?: string;
        messageStrong?: string;
        messageAfter?: string;
        tipLabel?: string;
        counterLabel?: string;
    };
    onThisPage?: string;
    suggestChangesToThisPage?: string;
    lastUpdateAt?: string;
    previousPage?: string;
    nextPage?: string;
    expansionTitle?: string;
    expandCode?: string;
    pwa?: {
        tip?: string;
        reload?: string;
        close?: string;
        appReadyToWorkOffline?: string;
        newContentAvailable?: string;
    };
    ... 22 more ...;
    searchClear?: string;
} | undefined
i18n
?: {
navbarMenu?: string | undefinednavbarMenu?: string
heroCode?: {
    title?: string;
    messageBefore?: string;
    messageStrong?: string;
    messageAfter?: string;
    tipLabel?: string;
    counterLabel?: string;
} | undefined
heroCode
?: {
title?: string | undefinedtitle?: string messageBefore?: string | undefinedmessageBefore?: string messageStrong?: string | undefinedmessageStrong?: string messageAfter?: string | undefinedmessageAfter?: string tipLabel?: string | undefinedtipLabel?: string counterLabel?: string | undefinedcounterLabel?: string } onThisPage?: string | undefinedonThisPage?: string suggestChangesToThisPage?: string | undefinedsuggestChangesToThisPage?: string lastUpdateAt?: string | undefinedlastUpdateAt?: string previousPage?: string | undefinedpreviousPage?: string nextPage?: string | undefinednextPage?: string expansionTitle?: string | undefinedexpansionTitle?: string /** Label of the expand bar on collapsed long code blocks */ expandCode?: string | undefined

Label of the expand bar on collapsed long code blocks

expandCode
?: string
pwa?: {
    tip?: string;
    reload?: string;
    close?: string;
    appReadyToWorkOffline?: string;
    newContentAvailable?: string;
} | undefined
pwa
?: {
tip?: string | undefinedtip?: string reload?: string | undefinedreload?: string close?: string | undefinedclose?: string appReadyToWorkOffline?: string | undefinedappReadyToWorkOffline?: string newContentAvailable?: string | undefinednewContentAvailable?: string } footnoteLabel?: string | undefinedfootnoteLabel?: string /** Label of the language switcher trigger. */ localeSwitcher?: string | undefined

Label of the language switcher trigger.

localeSwitcher
?: string
/** Notice shown after switching locale fell back to that locale's home. */ localePageUnavailable?: string | undefined

Notice shown after switching locale fell back to that locale's home.

localePageUnavailable
?: string
versionSelector?: string | undefinedversionSelector?: string versionPageUnavailable?: string | undefinedversionPageUnavailable?: string versionDeprecated?: string | undefinedversionDeprecated?: string versionEol?: string | undefinedversionEol?: string versionViewCurrent?: string | undefinedversionViewCurrent?: string versionDeprecatedLabel?: string | undefinedversionDeprecatedLabel?: string versionEolLabel?: string | undefinedversionEolLabel?: string versionSearchUnavailable?: string | undefinedversionSearchUnavailable?: string /** Template for page and section badges. Use `{version}` for the version label. */ versionNewLabel?: string | undefined

Template for page and section badges. Use {version} for the version label.

versionNewLabel
?: string
/** Compact badge shown beside changed sidebar pages and table-of-contents sections. */ versionNavigationNewLabel?: string | undefined

Compact badge shown beside changed sidebar pages and table-of-contents sections.

versionNavigationNewLabel
?: string
versionChangesSelector?: string | undefinedversionChangesSelector?: string versionChangesNewPages?: string | undefinedversionChangesNewPages?: string versionChangesUpdatedPages?: string | undefinedversionChangesUpdatedPages?: string versionChangesNoBaseline?: string | undefinedversionChangesNoBaseline?: string versionChangesEmpty?: string | undefinedversionChangesEmpty?: string searchPlaceholder?: string | undefinedsearchPlaceholder?: string searchNoResults?: string | undefinedsearchNoResults?: string searchDevNotice?: string | undefinedsearchDevNotice?: string searchClose?: string | undefinedsearchClose?: string searchClear?: string | undefinedsearchClear?: string }
DefaultThemeOptions.preBuildIconifyIcons?: {
    [iconSetName: string]: string[];
} | undefined
preBuildIconifyIcons
?: {
[iconSetName: stringiconSetName: string]: string[] } } export type type ThemeDefault = LoadTheme<DefaultThemeOptions>ThemeDefault = import LoadThemeLoadTheme<DefaultThemeOptions> const const options: DefaultThemeOptionsoptions: DefaultThemeOptions export default const options: DefaultThemeOptionsoptions } declare module '@sveltepress/theme-default/context' { import type { interface Writable<T>

Writable interface for both updating and subscribing.

Writable
} from 'svelte/store'
export interface SveltepressContext { SveltepressContext.isDark: Writable<boolean>isDark: interface Writable<T>

Writable interface for both updating and subscribing.

Writable
<boolean>
} export const const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEY: symbol export const const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY: symbol export interface TitleRowAction { TitleRowAction.href: stringhref: string TitleRowAction.label: stringlabel: string } export interface TitleRowActionContext { readonly TitleRowActionContext.current: TitleRowAction | undefinedcurrent: TitleRowAction | undefined } } declare module 'virtual:sveltepress/theme-default/versioning' { export * from '@sveltepress/theme-default/dist/components/versioning' } declare module 'virtual:sveltepress/theme-default/VersionSelector.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const
const component: Component<{
    mobile?: boolean;
}, {}, string>
component
: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
<{ mobile?: boolean | undefinedmobile?: boolean }>
export default
const component: Component<{
    mobile?: boolean;
}, {}, string>
component
} declare module 'virtual:sveltepress/theme-default/VersionFallbackNotice.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const const component: Component<{}, {}, string>component: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
export default const component: Component<{}, {}, string>component } declare module 'virtual:sveltepress/theme-default/VersionLifecycleBanner.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const const component: Component<{}, {}, string>component: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
export default const component: Component<{}, {}, string>component }
ts
Expand code

থিম অপশন

navbar

  • title ন্যাভবার আইটেমের লেবেল টেক্সট
  • to লিংক অ্যাড্রেস
  • icon HTML স্ট্রিং। title এর পরিবর্তে এইচটিএমএল কন্টেন্ট দেখাবে। ন্যাভবারে কাস্টম আইকন দেখাতে এটি উপকারী।
  • external লিংকটি কি এক্সটার্নাল কিনা তা নির্ধারণ করে। এক্সটার্নাল আইকন দেখাবে যদি true সেট করা থাকে।
  • items চিলড্রেনের লিংক। এই প্রপ দেয়া হলে ড্রপডাউন দেখাবে সিংগেল ন্যাভ লিং না দেখিয়ে

discord

ডিসকর্ডের চ্যাট চ্যানেল লিংক এটি দেয়া হলে ন্যাভবারে ডিসকর্ডের আইকন দেখাবে।

github

গিটহাবের রিপোর লিংক এটি দেয়া হলে ন্যাভবারে গিটহাবের আইকন দেখাবে।

logo

লোগো ইমেজ যা ন্যাভবারে দেখাবে

sidebar

সাইডবার দুইভাবে কনফিগার করা যায়। { enabled: true } দিলে রাউট ডিরেক্টরি থেকে স্বয়ংক্রিয় সাইডবার তৈরি হয়। Historical version snapshot tree (/v/{id}/, locale-composed base সহ) বাদ পড়ে।

ম্যানুয়াল সাইডবার একটি অবজেক্ট, কী হবে গ্রুপের রাউটের নাম, ভ্যালু হবে নিম্নে বর্ণিত ফিল্ডসহ অ্যারে অফ অবজেক্ট:

  • title সাইডবার আইটেমের লেবেলের লেখা
  • collapsible কলাপ্স করা যায় কিনা তা নির্ধারণ করে।
  • to লিংক অ্যাড্রেস
  • items চিলড্রেনের লিংক। এটি প্রোভাইড করা হলে একক সাইডবার আইটেমের পরিবর্তে সাইডবার গ্রুপ দেখাবে।

highlighter

একটি অবজেক্ট যাতে কাস্টম হাইলাইট অপশন থাকে।

  • languages - সাপোর্টেড হাইলাইট ল্যাংগুয়েজ কাস্টমাইজ করা। ডিফল্ট হচ্ছে: ['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']
  • themeLight - কোড থিম যা লাইট মোডে অ্যাপ্লাই হবে, ডিফল্ট হচ্ছে vitesse-light
  • themeDark - কোড থিম যা ডার্ক মোডে অ্যাপ্লাই হবে, ডিফল্ট হচ্ছে night-owl
  • twoslash - Twoslash চালু করতে true সেট করুন. ডিফল্টে false
  • codeCollapseLines - এই সংখ্যার চেয়ে লম্বা কোড ব্লক ডিফল্টে সংকুচিত থাকবে। ডিফল্ট 30; বন্ধ করতে 0 দিন।
টিপ

আপনি সব সাপোর্টেড ল্যাংগুয়েজ এবং থিম Shiki Repo তে পাবেন

editLink

এই লিংকটি edit this page on github বাটনে থাকে। উদাহরণস্বরূপ, এই সাইটটি https://github.com/SveltePress/sveltepress/edit/main/packages/docs-site-bn/src/routes/:route ব্যবহার করে।

:route রাউট প্যাথ বোঝায়, যেমন: /foo/bar/+page.md

ga

Google Analytics থেকে প্রোভাইডকৃত আইডি। দেখতে অনেকটা এরকম G-XXXXXXX

সাইট-হেডে gtag স্ক্রিপ্ট যুক্ত করে।

Language switcher and default Local Search

sveltepress({ locales }) থাকলে Default Theme navbar-এ language switcher দেখায়। docsearch বা custom search না থাকলে built-in Local Search (Pagefind) ব্যবহার হয়। দেখুন আন্তর্জাতিকীকরণসার্চ

search

Supported custom-search hook; type Component | string@sveltepress/meilisearch-এর মতো Svelte search component integrate করতে এটি ব্যবহার করুন। String value wrapper component-এর source path নির্দেশ করে:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch: '/src/lib/MeilisearchSearch.svelte',
})
ts
Production build

এই public API এবং M Search integration supported। search-এ দেওয়া source .svelte path static production build-এ bundle হয় — theme build-এর সময় path-টি resolve করে lazy chunk হিসেবে লোড করে। সরাসরি component object দেওয়া সমর্থিত নয়, কারণ theme options client-এ JSON-এ serialized হয়। Wrapper setup-এর জন্য search guide দেখুন।

docsearch

  • appId
  • apiKey
  • indexName

এই সব ভ্যলু docsearch প্রোভাইড করে। আরো বিস্তারিত জানতে Docsearch ভিজিট করুন।

search না দিলে তবেই docsearch ব্যবহার হবে।

pwa

বিস্তারিত জানতে PWA দেখুন

App-shell client precache

pwa.precacheClient (default false) শুধু app shell precache করে। আগের catch-all client glob ফিরিয়ে আনতে precacheClient: true দিন। HTML policy এখনও pwa.precachePages-এ থাকে।

themeColor

local pwa application হিসেবে ওপেন করলে উইন্ডোবারের রঙ।

  • light - লাইট থিমে প্রযোজ্য রঙ।
  • dark - ডার্ক থিমে প্রযোজ্য রঙ।
  • gradient - গ্রেডিয়েন্ট থিম কালার। হোমপেজে অ্যাকশন বাটন ও মেইন টাইটেলে ব্যবহার হবে। ডিফল্ট হচ্ছে:
const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}
js
  • primary - সাইটের প্রাইমারি থিম কালার
  • primaryDeep - হালকা পটভূমিতে পর্যাপ্ত কনট্রাস্টের জন্য গাঢ় প্রাথমিক রং
  • hover - হোভার করা অবস্থায় লিংকের কালার

i18n

ফিক্সড টেক্সট কন্টেন্ট যা আপনার কনফিগ দ্বারা পরিবর্তিত হতে পারে

  • onThisPage - "এই পেজে আছে"/"সূচীপত্র" এর লেখা
  • suggestChangesToThisPage - "এই পেজে পরিবর্তন সাজেস্ট করুন" এর লেখা
  • lastUpdateAt - "সর্বশেষ আপডেট:" এর লেখা
  • previousPage - "পূর্ববর্তী" এর লেখা
  • nextPage - "পরবর্তী" এর লেখা
  • expansionTitle - markdown বা svelte live code এর "কোড দেখতে বা হাইড করতে ক্লিক করুন" এর লেখা
  • expandCode - সংকুচিত লম্বা কোড ব্লকের expand bar-এর লেখা
  • heroCode - default home page code preview-এর localizable text: title, messageBefore, messageStrong, messageAfter, tipLabel, এবং counterLabel
  • versionDeprecated / versionEol - global old-version lifecycle bar-এর message
  • versionDeprecatedLabel / versionEolLabel - compact lifecycle status label
  • versionViewCurrent - একই logical page-এর current version link-এর label
  • versionNewLabel - পেজ শিরোনাম ও সেকশন ব্যাজের টেমপ্লেট টেক্সট। ভার্সন লেবেলের জন্য {version} প্লেসহোল্ডার ব্যবহার করুন। Default "New in {version}"
  • versionNavigationNewLabel - পরিবর্তিত sidebar page এবং :::since marker-এর সঙ্গে স্বয়ংক্রিয়ভাবে যুক্ত table-of-contents heading-এর পাশের compact badge text। Default "New"
  • pwa - pwa prompt এর relative টেক্সট কন্টেন্ট. নিচের সব ফিল্ডই pwa prompt এর মতই
    • tip
    • reload
    • close
    • appReadyToWorkOffline
    • newContentAvailable
  • footnoteLabel - অটো জেনারেটেড ফুটনোট টাইটেলে। ডিফল্ট হচ্ছে "Footnotes"
ঐচ্ছিক টাইটেল-সারি অ্যাকশন

Title-row action

ডিফল্ট থিমের PageLayout h1 সারিতে, টাইটেল ও যেকোনো version-new badge-এর পরে একটি ঐচ্ছিক কন্ট্রোল দেখাতে পারে। না দিলে আজকের টাইটেল সারিই থাকে।

PageLayout-এ titleAction snippet দিন, অথবা @sveltepress/theme-default/context-এর TITLE_ROW_ACTION_KEY দিয়ে { current } দিন (current হলো { href, label } অথবা undefined):

<script>
  import { const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY } from '@sveltepress/theme-default/context'
  import { function setContext<T>(key: any, context: T): T

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to the component itself and all of its descendants (including slotted content) with getContext.

Like lifecycle functions, this must be called during component initialisation.

createContext is a type-safe alternative.

setContext
} from 'svelte'
const
const action: {
    href: string;
    label: string;
}
action
=
function $derived<{
    href: string;
    label: string;
}>(expression: {
    href: string;
    label: string;
}): {
    href: string;
    label: string;
}
namespace $derived

Declares derived state, i.e. one that depends on other state variables. The expression inside $derived(...) should be free of side-effects.

Example:

let double = $derived(count * 2);
@seehttps://svelte.dev/docs/svelte/$derived Documentation@paramexpression The derived state expression
$
function $derived<{
    href: string;
    label: string;
}>(expression: {
    href: string;
    label: string;
}): {
    href: string;
    label: string;
}
namespace $derived

Declares derived state, i.e. one that depends on other state variables. The expression inside $derived(...) should be free of side-effects.

Example:

let double = $derived(count * 2);
@seehttps://svelte.dev/docs/svelte/$derived Documentation@paramexpression The derived state expression
derived
({
href: stringhref: '/playground/markdown/basic-writing/', label: stringlabel: 'প্লেগ্রাউন্ডে খুলুন', })
setContext<{
    readonly current: {
        href: string;
        label: string;
    };
}>(key: any, context: {
    readonly current: {
        href: string;
        label: string;
    };
}): {
    readonly current: {
        href: string;
        label: string;
    };
}

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to the component itself and all of its descendants (including slotted content) with getContext.

Like lifecycle functions, this must be called during component initialisation.

createContext is a type-safe alternative.

setContext
(const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY, {
get
current: {
    href: string;
    label: string;
}
current
() {
return
const action: {
    href: string;
    label: string;
}
action
}, }) </script>
svelte

এটি একই পাতার লিংক। থিম কনজিউমাররা নিজেরা সেট না করলে SveltePress ডকস-সাইটের কন্ট্রোল পায় না।

preBuildIconifyIcons

Iconify এর আইকন যা আপনি ভবিষ্যত ব্যবহারের জন্য প্রিবিল্ড করতে চান। একটি অবজেক্ট, কী হচ্ছে কালেকশন নেম, ভ্যালু হচ্ছে আইকনের অ্যারে। উদাহরণস্বরূপ, এগুলো হচ্ছে ঐসব আইকন যা এই সাইটে ব্যবহার করা হচ্ছে

},
preBuildIconifyIcons: {
  'vscode-icons': ['file-type-svelte', 'file-type-markdown', 'file-type-vite'],
  'logos': ['typescript-icon', 'svelte-kit', 'svelte-icon'],
  'emojione': ['artist-palette'],
  'material-symbols': ['history', 'translate', 'search'],
  'ph': ['smiley', 'layout-duotone'],
  'noto': ['package'],
  'solar': ['chat-square-code-outline', 'reorder-outline'],
  'carbon': ['tree-view-alt', 'import-export'],
  'ic': ['sharp-rocket-launch'],
  'tabler': ['icons'],
  'mdi': ['theme-light-dark'],
  'bi': ['list-nested'],
  'openmoji': ['red-apple']
ts

এই আইকনগুলো দেখতে এমন:

<script>
  import { 
type IconifyIcon = SvelteComponent<Record<string, any>, any, any>
const IconifyIcon: LegacyComponentType
IconifyIcon
} from '@sveltepress/theme-default/components'
import const themeOptions: DefaultThemeOptionsthemeOptions from 'virtual:sveltepress/theme-default' </script> <div class: stringclass="flex items-center gap-4 text-[48px] flex-wrap"> {#each var Object: ObjectConstructor

Provides functionality common to all JavaScript objects.

Object
.
ObjectConstructor.entries<string[]>(o: {
    [s: string]: string[];
} | ArrayLike<string[]>): [string, string[]][] (+1 overload)

Returns an array of key/values of the enumerable own properties of an object

@paramo Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
entries
(const themeOptions: DefaultThemeOptionsthemeOptions.
DefaultThemeOptions.preBuildIconifyIcons?: {
    [iconSetName: string]: string[];
} | undefined
preBuildIconifyIcons
|| {}) as [let collection: stringcollection, let names: string[]names]}
{#each let names: string[]names as let name: stringname} <div> <const IconifyIcon: LegacyComponentTypeIconifyIcon {collection: stringcollection} {name: stringname} /> </div> {/each} {/each} </div>
svelte

গ্লোবাল কনটেক্সট

গ্লোবাল কনটেক্সট কী আছে এখানে- @sveltepress/theme-default/context। আপনি সকল কনটেক্সট getContext এপিআই দিয়ে পাবেন।

এটি একটি উদাহরণ:

<script lang="ts">
  import type { SveltepressContext } from '@sveltepress/theme-default/context'
  import { const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEY } from '@sveltepress/theme-default/context'
  import { function getContext<T>(key: any): T

Retrieves the context set with the specified key in the current component or any of its ancestors. If multiple components set the same key, the value from the closest one is returned. A setContext call in the current component is only visible to getContext calls that run after it. Must be called during component initialisation.

createContext is a type-safe alternative.

getContext
} from 'svelte'
const { const isDark: Writable<boolean>isDark } = getContext<SveltepressContext>(key: any): SveltepressContext

Retrieves the context set with the specified key in the current component or any of its ancestors. If multiple components set the same key, the value from the closest one is returned. A setContext call in the current component is only visible to getContext calls that run after it. Must be called during component initialisation.

createContext is a type-safe alternative.

getContext
<SveltepressContext>(const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEYlet $isDark: boolean)
</script> <div class:dark-text={let $isDark: boolean$let $isDark: booleanisDark} class: stringclass="text-10"> isDark: {let $isDark: boolean$let $isDark: booleanisDark} </div> <style> .dark-text { --at-apply: 'text-red'; } </style>
svelte

সকল কনটেক্সট:

  • $isDark - বর্তমান থিম কি ডার্ক কিনা- তা নির্দেশ করে। এটি একটি reactive svelte store.

ভার্চুয়াল মডিউল

virtual:sveltepress/theme-default

এই মডিউল defaultTheme() ফাংশনে পাস করে দেয়া থিম অপশন আয়ত্বে রাখে।

এখানে এই সাইটের থিম অপশন উদাহরণ হিসেবে দেখানো হলো:

<script>
  import { 
type JsonViewer = SvelteComponent<Record<string, any>, any, any>
const JsonViewer: LegacyComponentType
JsonViewer
} from 'svelte-json-discovery'
import const themeOptions: DefaultThemeOptionsthemeOptions from 'virtual:sveltepress/theme-default' </script> <div class: stringclass="viewer"> <const JsonViewer: LegacyComponentTypeJsonViewer data: DefaultThemeOptionsdata={const themeOptions: DefaultThemeOptionsthemeOptions} /> </div> <style> .viewer { max-height: 40vh; overflow: auto; } :global(html.dark) .viewer { --discovery-background-color: #1a1a1a; --sjd-app-bg: #1a1a1a; --sjd-fmt-color: #999; --sjd-fmt-hover-color: #aaa; --sjd-fmt-property-color: #d17a8c; --sjd-fmt-number-color: #0f8dc2; --sjd-fmt-atom-color: #0f8dc2; --sjd-fmt-string-color: #7faf20; --sjd-fmt-string-underline-color: #85ab51; --sjd-fmt-string-hover-color: #97cf26; --sjd-ui-color: #ccc; --sjd-match-bg: #565638; --sjd-match-border: #a7a73b; --sjd-error-border: #0004; --sjd-error-bg: #622b29; --sjd-error-color: #c66; --sjd-error-message-bg: #443232; --sjd-toggle-color: #72b372; --sjd-touch-button-color: #aaa; --sjd-touch-button-bg: #50505080; --sjd-popup-bg: #333; --sjd-popup-color: #ccc; --sjd-popup-notes-color: #999; --sjd-popup-error-color: #e66; color-scheme: dark; } </style>
svelte
Expand code

Typescript এর ব্যবহার

থিম অপশন এবং ভার্চুয়াল মডিউল টাইপ টিপস পেতে src/app.d.ts তে @sveltepress/theme-default/types যুক্ত করতে হবে

/src/app.d.ts
/// <reference types="@sveltepress/theme-default/types" />

// Your other types
ts