ডিফল্ট থিম

ইন্সটল

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

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

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

const config  = defineConfig ({
  plugins : [
    sveltepress ({
      theme : defaultTheme (/** theme options */) 
    })
  ],
})

export default config
ts

এক নজরে Types

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

declare module 'virtual:sveltepress/theme-default' {
  import type { CreateTwoslashSvelteOptions  } from '@sveltepress/twoslash'
  import type { LoadTheme  } from '@sveltepress/vite'
  import type { SvelteKitPWAOptions  } from '@vite-pwa/sveltekit'
  import type { BundledLanguage  } from 'shiki/langs'

  export interface WithTitle {
    title ?: string
  }

  export interface LinkItem extends WithTitle {
    icon ?: string
    to ?: string
    external ?: boolean
    collapsible ?: boolean
    items ?: LinkItem[]
  }

  export interface DefaultThemeOptions {
    navbar ?: Array <LinkItem>
    github ?: string
    logo ?: string
    sidebar ?: Record <string, LinkItem[]>
    editLink ?: string
    discord ?: string
    ga ?: string
    pwa ?: SvelteKitPWAOptions  & {
      darkManifest ?: string
    }
    docsearch ?: {
      appId : string
      apiKey : string
      indexName : string
    }
    themeColor ?: {
      light : string
      dark : string
      primary ?: string
      hover ?: string
      gradient ?: {
        start : string
        end : string
      }
    }
    highlighter ?: {
      languages ?: BundledLanguage []
      themeLight ?: string
      themeDark ?: string
      twoslash ?: boolean | CreateTwoslashSvelteOptions 
    }
    i18n ?: {
      onThisPage ?: string
      suggestChangesToThisPage ?: string
      lastUpdateAt ?: string
      previousPage ?: string
      nextPage ?: string
      expansionTitle ?: string
      pwa ?: {
        tip ?: string
        reload ?: string
        close ?: string
        appReadyToWorkOffline ?: string
        newContentAvailable ?: string
      }
      footnoteLabel ?: string
    }
    preBuildIconifyIcons ?: {
      [iconSetName : string]: string[]
    }
  }
  export type ThemeDefault  = LoadTheme <DefaultThemeOptions>

  const options : DefaultThemeOptions
  export default options 
}

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

  export interface SveltepressContext {
    isDark : Writable <boolean>
  }
  export const SVELTEPRESS_CONTEXT_KEY : symbol
}
ts

থিম অপশন

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 স্ক্রিপ্ট যুক্ত করে।

docsearch

  • appId
  • apiKey
  • indexName

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

pwa

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

themeColor

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

  • light - লাইট থিমে প্রযোজ্য রঙ।
  • dark - ডার্ক থিমে প্রযোজ্য রঙ।
  • gradient - গ্রেডিয়েন্ট থিম কালার। হোমপেজে অ্যাকশন বাটন ও মেইন টাইটেলে ব্যবহার হবে। ডিফল্ট হচ্ছে:
const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}
js
  • 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'],
}
ts

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

<script>
  import { IconifyIcon  } from '@sveltepress/theme-default/components'
  import themeOptions  from 'virtual:sveltepress/theme-default'
</script>
<div class="flex items-center gap-4 text-[48px] flex-wrap">
  {#each Object .entries (themeOptions .preBuildIconifyIcons  || {}) as [collection , names ]}
    {#each names  as name }
      <div>
        <IconifyIco n  { co l lection } {name } />
      </div>
    {/each}
  {/each}
</div>
svelte
Click fold/expand code

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

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

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

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

  const { isDark  } = getContext <SveltepressContext>(SVELTEPRESS_CONTEXT_KEY ) 
</script>

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

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

  • $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": "Docsearch",
            "to": "/guide/default-theme/docsearch/"
          },
          {
            "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": "injectManifest",
    "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 themeOptions  from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {JSON .stringify (themeOptions , null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
svelte
Click fold/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
Suggest changes to this page
Last update at: 2024/11/27 15:00:22
Previous
Vite প্লাগিন