ইন্সটল
npm install --save @sveltepress/theme-default yarn add @sveltepress/theme-default pnpm install @sveltepress/theme-default bun add @sveltepress/theme-default আপনার vite config এ যুক্ত করুন
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[] | undefinedArray 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 এক নজরে 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: booleanEnable auto-generated sidebar
enabled: boolean
/**
* Routes directory, default 'src/routes'
*/
AutoSidebarOptions.routesDir?: string | undefinedRoutes 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[] | undefinedRoot 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[] | undefinedWhich 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 | undefinedWhich 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 | undefinedDarker 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 | undefinedCode blocks taller than this many lines start collapsed with an
"Expand code" bar. Set to 0 to disable collapsing.
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 | undefinedLabel 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 | undefinedLabel of the language switcher trigger.
localeSwitcher?: string
/** Notice shown after switching locale fell back to that locale's home. */
localePageUnavailable?: string | undefinedNotice 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 | undefinedTemplate 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 | undefinedCompact 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
}
থিম অপশন
navbar
titleন্যাভবার আইটেমের লেবেল টেক্সটtoলিংক অ্যাড্রেসiconHTML স্ট্রিং।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-lightthemeDark- কোড থিম যা ডার্ক মোডে অ্যাপ্লাই হবে, ডিফল্ট হচ্ছেnight-owltwoslash- Twoslash চালু করতেtrueসেট করুন. ডিফল্টেfalsecodeCollapseLines- এই সংখ্যার চেয়ে লম্বা কোড ব্লক ডিফল্টে সংকুচিত থাকবে। ডিফল্ট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 স্ক্রিপ্ট যুক্ত করে।
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',
}) এই 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 দেখুন
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',
} 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, এবংcounterLabelversionDeprecated/versionEol- global old-version lifecycle bar-এর messageversionDeprecatedLabel/versionEolLabel- compact lifecycle status labelversionViewCurrent- একই logical page-এর current version link-এর labelversionNewLabel- পেজ শিরোনাম ও সেকশন ব্যাজের টেমপ্লেট টেক্সট। ভার্সন লেবেলের জন্য{version}প্লেসহোল্ডার ব্যবহার করুন। Default"New in {version}"versionNavigationNewLabel- পরিবর্তিত sidebar page এবং:::sincemarker-এর সঙ্গে স্বয়ংক্রিয়ভাবে যুক্ত table-of-contents heading-এর পাশের compact badge text। Default"New"pwa- pwa prompt এর relative টেক্সট কন্টেন্ট. নিচের সব ফিল্ডই pwa prompt এর মতইtipreloadcloseappReadyToWorkOfflinenewContentAvailable
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): TAssociates 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);
$
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);
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> এটি একই পাতার লিংক। থিম কনজিউমাররা নিজেরা সেট না করলে 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'] এই আইকনগুলো দেখতে এমন:
<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: ObjectConstructorProvides 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
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> গ্লোবাল কনটেক্সট
গ্লোবাল কনটেক্সট কী আছে এখানে- @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): TRetrieves 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): SveltepressContextRetrieves 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> সকল কনটেক্সট:
$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> Typescript এর ব্যবহার
থিম অপশন এবং ভার্চুয়াল মডিউল টাইপ টিপস পেতে src/app.d.ts তে @sveltepress/theme-default/types যুক্ত করতে হবে
/// <reference types="@sveltepress/theme-default/types" />
// Your other types