ডিফল্ট থিম

ইন্সটল

npm install --save @sveltepress/theme-default

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

vite.config.(js|ts)

import {  } from '@sveltepress/theme-default' 
import {  } from '@sveltepress/vite'
import {  } from 'vite'

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

export default

এক নজরে 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
    }
    ?: <, 'container' | 'theme'>
    ?:  | string
    ?: {
      : string
      : string
      ?: string
      ?: string
      ?: {
        : string
        : string
      }
    }
    ?: {
      ?: []
      ?: 
      ?: 
      ?: boolean | 
    }
    ?: {
      ?: string
      ?: 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
}

থিম অপশন

`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
darkTheme - কোড থিম যা ডার্ক মোডে অ্যাপ্লাই হবে, ডিফল্ট হচ্ছে night-owl
twoslash - Twoslash চালু করতে true সেট করুন. ডিফল্টে false

টিপ

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

`editLink`

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

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

`ga`

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

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

`search`

Navbar-এর জন্য custom search component।

Type: Component | string
Component দিলে সরাসরি render হবে।
string দিলে এটাকে component path হিসেবে dynamic import() দিয়ে load করা হবে।

Example:

// Meilisearch ব্যবহার
search: '@sveltepress/meilisearch/Search.svelte'

// অথবা custom component
search: '/src/lib/MySearch.svelte'

search ও docsearch-এর অগ্রাধিকার

search এবং docsearch একসাথে দেওয়া থাকলে search-ই কার্যকর হবে এবং docsearch উপেক্ষা করা হবে।

`docsearch`

appId
apiKey
indexName

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

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

`pwa`

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

`themeColor`

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

light - লাইট থিমে প্রযোজ্য রঙ।
dark - ডার্ক থিমে প্রযোজ্য রঙ।
gradient - গ্রেডিয়েন্ট থিম কালার। হোমপেজে অ্যাকশন বাটন ও মেইন টাইটেলে ব্যবহার হবে। ডিফল্ট হচ্ছে:

const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}

primary - সাইটের প্রাইমারি থিম কালার
hover - হোভার করা অবস্থায় লিংকের কালার

`i18n`

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

onThisPage - "এই পেজে আছে"/"সূচীপত্র" এর লেখা
suggestChangesToThisPage - "এই পেজে পরিবর্তন সাজেস্ট করুন" এর লেখা
lastUpdateAt - "সর্বশেষ আপডেট:" এর লেখা
previousPage - "পূর্ববর্তী" এর লেখা
nextPage - "পরবর্তী" এর লেখা
expansionTitle - markdown বা svelte live code এর "কোড দেখতে বা হাইড করতে ক্লিক করুন" এর লেখা
pwa - pwa prompt এর relative টেক্সট কন্টেন্ট. নিচের সব ফিল্ডই pwa prompt এর মতই
- tip
- reload
- close
- appReadyToWorkOffline
- newContentAvailable
footnoteLabel - অটো জেনারেটেড ফুটনোট টাইটেলে। ডিফল্ট হচ্ছে "Footnotes"

`preBuildIconifyIcons`

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

preBuildIconifyIcons: {
  'vscode-icons': ['file-type-svelte', 'file-type-markdown', 'file-type-vite'],
  'logos': ['typescript-icon', 'svelte-kit'],
  'emojione': ['artist-palette'],
  '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'],
}

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

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

svelte

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

গ্লোবাল কনটেক্সট কী আছে এখানে- @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={} class="text-10">
  isDark: {}
</div>
<style>
  .dark-text {
    --at-apply: 'text-red';
  }
</style>

svelte

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

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

ভার্চুয়াল মডিউল

`virtual:sveltepress/theme-default`

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

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

    {
  "navbar": [
    {
      "title": "নির্দেশনা",
      "to": "/guide/introduction/"
    },
    {
      "title": "রেফারেন্স",
      "to": "/reference/vite-plugin/"
    },
    {
      "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 32 32\"><path fill=\"currentColor\" d=\"M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z\"/></svg>",
      "items": [
        {
          "title": "English",
          "to": "https://sveltepress.site/",
          "external": true
        },
        {
          "title": "简体中文",
          "to": "https://cn.sveltepress.site/",
          "external": true
        }
      ]
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "title": "পরিচিতি",
        "collapsible": true,
        "items": [
          {
            "title": "Svelte কী?",
            "to": "/guide/introduction/"
          },
          {
            "title": "দ্রুত শুরু",
            "to": "/guide/quick-start/"
          },
          {
            "title": "থিম",
            "to": "/guide/themes/"
          },
          {
            "title": "Typescript ব্যবহার",
            "to": "/guide/typescript/"
          }
        ]
      },
      {
        "title": "Markdown এর ফিচারসমূহ",
        "items": [
          {
            "title": "হাতেখড়ি",
            "to": "/guide/markdown/basic-writing/"
          },
          {
            "title": "Frontmatter",
            "to": "/guide/markdown/frontmatter/"
          },
          {
            "title": "Markdown এ Svelte",
            "to": "/guide/markdown/svelte-in-markdown/"
          }
        ]
      },
      {
        "title": "ডিফল্ট থিমের ফিচারসমূহ",
        "collapsible": true,
        "items": [
          {
            "title": "Frontmatter",
            "to": "/guide/default-theme/frontmatter/"
          },
          {
            "title": "ন্যাভবার",
            "to": "/guide/default-theme/navbar/"
          },
          {
            "title": "সাইডবার",
            "to": "/guide/default-theme/sidebar/"
          },
          {
            "title": "হোমপেজ",
            "to": "/guide/default-theme/home-page/"
          },
          {
            "title": "বিল্ট-ইন কম্পোনেন্ট",
            "to": "/guide/default-theme/builtin-components/"
          },
          {
            "title": "হেডিংস এবং অ্যাঙ্কর",
            "to": "/guide/default-theme/headings-and-anchors/"
          },
          {
            "title": "অ্যাডমনিশন",
            "to": "/guide/default-theme/admonitions/"
          },
          {
            "title": "কোড সম্পর্কিত",
            "to": "/guide/default-theme/code-related/"
          },
          {
            "title": "Twoslash",
            "to": "/guide/default-theme/twoslash/"
          },
          {
            "title": "Unocss",
            "to": "/guide/default-theme/unocss/"
          },
          {
            "title": "সার্চ",
            "to": "/guide/default-theme/search/"
          },
          {
            "title": "PWA",
            "to": "/guide/default-theme/pwa/"
          },
          {
            "title": "Google Analytics",
            "to": "/guide/default-theme/google-analytics/"
          }
        ]
      }
    ],
    "/reference/": [
      {
        "title": "রেফারেন্স",
        "items": [
          {
            "title": "Vite প্লাগিন",
            "to": "/reference/vite-plugin/"
          },
          {
            "title": "ডিফল্ট থিম",
            "to": "/reference/default-theme/"
          }
        ]
      }
    ]
  },
  "editLink": "https://github.com/Blackman99/sveltepress/edit/main/packages/docs-site/src/routes/:route",
  "github": "https://github.com/Blackman99/sveltepress",
  "logo": "/sveltepress.svg",
  "discord": "https://discord.gg/MeYRrGGxbE",
  "ga": "G-J2W78BKCHB",
  "docsearch": {
    "apiKey": "fbed412316ec83ff28e9a916161bf715",
    "appId": "4D30VFIAMG",
    "indexName": "sveltepress"
  },
  "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"
    ],
    "emojione": [
      "artist-palette"
    ],
    "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"
    ]
  },
  "highlighter": {
    "twoslash": true
  }
}

<script>
  import  from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {.(, null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>

svelte

Typescript এর ব্যবহার

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

/src/app.d.ts

/// <reference types="@sveltepress/theme-default/types" />

// Your other types

Suggest changes to this page

Last update at: 2026/03/09 12:36:50