ডিফল্ট থিম
ইন্সটল
npm install --save @sveltepress/theme-default
আপনার vite config এ যুক্ত করুন
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'
import { defaultTheme } from '@sveltepress/theme-default'
const config = defineConfig({
plugins: [
sveltepress({
theme: defaultTheme(/** theme options */)
})
],
})
export default config
এক নজরে Types
/// <reference types="vite/client" />
/// <reference types="@sveltepress/vite/types" />
declare module 'virtual:sveltepress/theme-default' {
import type { } from 'shiki/langs'
import type { } from '@sveltepress/vite'
import type { } from '@vite-pwa/sveltekit'
export interface WithTitle {
?: string
}
export interface LinkItem extends WithTitle {
?: string
?: string
?: boolean
?: boolean
?: LinkItem[]
}
export interface DefaultThemeOptions {
: <LinkItem>
?: string
?: string
?: <string, LinkItem[]>
?: string
?: string
?: string
?: & {
?: string
}
?: {
: string
: string
: string
}
?: {
: string
: 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/components' {
export const : any
export const : any
export const : any
export const : any
export const : any
export const : any
export const : any
export const : any
}
declare module '@sveltepress/theme-default/context' {
import { } 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
আপনি সব সাপোর্টেড ল্যাংগুয়েজ এবং থিম
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
G-XXXXXXX
সাইট-হেডে gtag স্ক্রিপ্ট যুক্ত করে।
docsearch
- appId
- apiKey
- indexName
এই সব ভ্যলু docsearch প্রোভাইড করে।
আরো বিস্তারিত জানতে
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
একটি অবজেক্ট, কী হচ্ছে কালেকশন নেম, ভ্যালু হচ্ছে আইকনের অ্যারে।
উদাহরণস্বরূপ, এগুলো হচ্ছে ঐসব আইকন যা এই সাইটে ব্যবহার করা হচ্ছে
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>
গ্লোবাল কনটেক্সট
গ্লোবাল কনটেক্সট কী আছে এখানে- @sveltepress/theme-default/context
। আপনি সকল কনটেক্সট
এটি একটি উদাহরণ:
<script lang="ts">
import { } from 'svelte'
import type { SveltepressContext } from '@sveltepress/theme-default/context'
import { } from '@sveltepress/theme-default/context'
const { } = <SveltepressContext>(
</script>
<div class:dark-text="{}" class="text-10">
isDark: {}
</div>
<style>
.dark-text {
--at-apply: 'text-red';
}
</style>
সকল কনটেক্সট:
$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 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>
Typescript এর ব্যবহার
থিম অপশন এবং ভার্চুয়াল মডিউল টাইপ টিপস পেতে src/app.d.ts তে @sveltepress/theme-default/types
যুক্ত করতে হবে
/// <reference types="@sveltepress/theme-default/types" />
// Your other types