Sveltepress

ডিফল্ট থিম

ইন্সটল

npm install --save @sveltepress/theme-default
sh

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

vite.config.(js|ts)
+
+
import {  } from '@sveltepress/theme-default' 
import {  } from '@sveltepress/vite'
import {  } from 'vite'

const  = ({
  : [
    ({
      : (/** theme options */) 
    })
  ],
})

export default
ts

এক নজরে Types

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

declare module 'virtual:sveltepress/theme-default' {
  import type {  } from '@sveltepress/docsearch/types'
  import type {  } from '@sveltepress/twoslash'
  import type {  } from '@sveltepress/vite'
  import type {  } from '@vite-pwa/sveltekit'
  import type {  } from 'shiki'
  import type {  } from 'shiki/langs'
  import type {  } from 'svelte'

  export interface WithTitle {
    ?: string
  }

  export interface LinkItem extends WithTitle {
    ?: string
    ?: string
    ?: boolean
    ?: boolean
    ?: LinkItem[]
  }

  export interface AutoSidebarOptions {
    /**
     * Enable auto-generated sidebar
     */
    : boolean
    /**
     * Routes directory, default 'src/routes'
     */
    ?: string
    /**
     * Root paths to generate sidebar for, e.g. ['/guide/', '/reference/']
     * If not specified, auto-detect from top-level route directories
     */
    ?: string[]
  }

  export interface DefaultThemeOptions {
    ?: <LinkItem>
    ?: string
    ?: string
    ?: <string, LinkItem[]> | AutoSidebarOptions
    ?: string
    ?: string
    ?: string
    ?:  & {
      ?: string
      ?: boolean
    }
    ?: <, 'container' | 'theme'>
    ?:  | string | boolean
    ?: {
      : string
      : string
      ?: 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.
       */
      ?: string
      ?: string
      ?: {
        : string
        : string
      }
    }
    ?: {
      ?: []
      ?: 
      ?: 
      ?: boolean | 
      /**
       * Code blocks taller than this many lines start collapsed with an
       * "Expand code" bar. Set to 0 to disable collapsing.
       * @default 30
       */
      ?: number
    }
    ?: {
      ?: string
      ?: {
        ?: string
        ?: string
        ?: string
        ?: string
        ?: string
        ?: string
      }
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      /** Label of the expand bar on collapsed long code blocks */
      ?: string
      ?: {
        ?: string
        ?: string
        ?: string
        ?: string
        ?: string
      }
      ?: string
      /** Label of the language switcher trigger. */
      ?: string
      /** Notice shown after switching locale fell back to that locale's home. */
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      /** Template for page and section badges. Use `{version}` for the version label. */
      ?: string
      /** Compact badge shown beside changed sidebar pages and table-of-contents sections. */
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
    }
    ?: {
      [: string]: string[]
    }
  }
  export type  = <DefaultThemeOptions>

  const : DefaultThemeOptions
  export default 
}

declare module '@sveltepress/theme-default/context' {
  import type {  } from 'svelte/store'

  export interface SveltepressContext {
    : <boolean>
  }
  export const : symbol
}

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 {  } from 'svelte'

  const : <{ ?: boolean }>
  export default 
}

declare module 'virtual:sveltepress/theme-default/VersionFallbackNotice.svelte' {
  import type {  } from 'svelte'

  const : 
  export default 
}

declare module 'virtual:sveltepress/theme-default/VersionLifecycleBanner.svelte' {
  import type {  } from 'svelte'

  const : 
  export default 
}
ts
Expand code

থিম অপশন

navbar

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

discord

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

github

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

logo

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

sidebar

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

  • 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 {  } from '@sveltepress/theme-default'

({
  : '/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 দেখুন

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
  • 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"

preBuildIconifyIcons

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

'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'],
        },
        highlighter: {
twoslash: true
ts

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

<script>
  import {  } from '@sveltepress/theme-default/components'
  import  from 'virtual:sveltepress/theme-default'
</script>
<div ="flex items-center gap-4 text-[48px] flex-wrap">
  {#each .(. || {}) as [, ]}
    {#each  as }
      <div>
        < {} {} />
      </div>
    {/each}
  {/each}
</div>
svelte
View code

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

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

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

isDark: false
<script lang="ts">
  import type { SveltepressContext } from '@sveltepress/theme-default/context'
  import {  } from '@sveltepress/theme-default/context'
  import {  } from 'svelte'

  const {  } = <SveltepressContext>(
</script>

<div class:dark-text={} ="text-10">
  isDark: {}
</div>
<style>
  .dark-text {
    --at-apply: 'text-red';
  }
</style>
svelte
View code

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

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

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

virtual:sveltepress/theme-default

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

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

    {
  "navbar": [
    {
      "title": "Guide",
      "to": "/guide/introduction/"
    },
    {
      "title": "What's new",
      "to": "/whats-new/"
    },
    {
      "title": "Reference",
      "to": "/reference/vite-plugin/"
    },
    {
      "title": "Blog theme",
      "to": "/guide/blog-theme/getting-started/"
    },
    {
      "title": "Blog demo",
      "to": "https://sveltepress.github.io/sveltepress/blog-demo/",
      "external": true
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "title": "Introduction",
        "collapsible": true,
        "items": [
          {
            "title": "What is Sveltepress",
            "to": "/guide/introduction/"
          },
          {
            "title": "Quick Start",
            "to": "/guide/quick-start/"
          },
          {
            "title": "Document versions",
            "to": "/guide/version-management/"
          },
          {
            "title": "Internationalization",
            "to": "/guide/i18n/"
          },
          {
            "title": "Themes",
            "to": "/guide/themes/"
          },
          {
            "title": "Working with TypeScript",
            "to": "/guide/typescript/"
          }
        ]
      },
      {
        "title": "Markdown features",
        "items": [
          {
            "title": "Basic Writing",
            "to": "/guide/markdown/basic-writing/"
          },
          {
            "title": "Frontmatter",
            "to": "/guide/markdown/frontmatter/"
          },
          {
            "title": "Svelte in Markdown",
            "to": "/guide/markdown/svelte-in-markdown/"
          }
        ]
      },
      {
        "title": "Default theme features",
        "collapsible": true,
        "items": [
          {
            "title": "Frontmatter",
            "to": "/guide/default-theme/frontmatter/"
          },
          {
            "title": "Navbar",
            "to": "/guide/default-theme/navbar/"
          },
          {
            "title": "Sidebar",
            "to": "/guide/default-theme/sidebar/"
          },
          {
            "title": "Home page",
            "to": "/guide/default-theme/home-page/"
          },
          {
            "title": "Built-in Components",
            "to": "/guide/default-theme/builtin-components/"
          },
          {
            "title": "Headings & Anchors",
            "to": "/guide/default-theme/headings-and-anchors/"
          },
          {
            "title": "Admonitions",
            "to": "/guide/default-theme/admonitions/"
          },
          {
            "title": "Code related",
            "to": "/guide/default-theme/code-related/"
          },
          {
            "title": "Twoslash",
            "to": "/guide/default-theme/twoslash/"
          },
          {
            "title": "Unocss",
            "to": "/guide/default-theme/unocss/"
          },
          {
            "title": "Search",
            "to": "/guide/default-theme/search/"
          },
          {
            "title": "PWA",
            "to": "/guide/default-theme/pwa/"
          },
          {
            "title": "Google Analytics",
            "to": "/guide/default-theme/google-analytics/"
          }
        ]
      },
      {
        "title": "Blog theme features",
        "collapsible": true,
        "items": [
          {
            "title": "Getting started",
            "to": "/guide/blog-theme/getting-started/"
          },
          {
            "title": "Configuration",
            "to": "/guide/blog-theme/configuration/"
          },
          {
            "title": "Writing posts",
            "to": "/guide/blog-theme/writing-posts/"
          },
          {
            "title": "Features",
            "to": "/guide/blog-theme/features/"
          },
          {
            "title": "Customisation",
            "to": "/guide/blog-theme/customization/"
          }
        ]
      }
    ],
    "/reference/": [
      {
        "title": "Reference",
        "items": [
          {
            "title": "Vite plugin",
            "to": "/reference/vite-plugin/"
          },
          {
            "title": "Default theme",
            "to": "/reference/default-theme/"
          }
        ]
      }
    ]
  },
  "editLink": "https://github.com/SveltePress/sveltepress/edit/main/packages/docs-site/src/routes/:route",
  "github": "https://github.com/SveltePress/sveltepress",
  "logo": "/sveltepress.svg",
  "discord": "https://discord.gg/MeYRrGGxbE",
  "ga": "G-J2W78BKCHB",
  "pwa": {
    "scope": "/",
    "base": "/",
    "strategies": "generateSW",
    "kit": {
      "trailingSlash": "always"
    },
    "darkManifest": "/manifest-dark.webmanifest",
    "manifest": {
      "start_url": "/",
      "scope": "/",
      "name": "Sveltepress",
      "short_name": "Sveltepress",
      "icons": [
        {
          "src": "/android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "theme_color": "#f2f2f2",
      "background_color": "#f2f2f2",
      "display": "standalone"
    }
  },
  "themeColor": {
    "light": "#f2f2f2",
    "dark": "#18181b"
  },
  "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"
    ]
  },
  "highlighter": {
    "twoslash": true,
    "languages": [
      "svelte",
      "sh",
      "js",
      "html",
      "ts",
      "md",
      "css",
      "scss",
      "json",
      "yaml"
    ]
  }
}
  
<script>
  import  from 'virtual:sveltepress/theme-default'
</script>
<div ="viewer">
  <pre>
    {.(, null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
svelte
View code

Typescript এর ব্যবহার

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

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

// Your other types
ts
GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন
সর্বশেষ আপডেট: 2026/09/05 03:57