Sveltepress

Frontmatter

src/routes/+page.(md|svelte) ফাইলটি হোম পেজ হিসেবে ব্যবহৃত হবে।

Home frontmatter এরকম হতে পারে। এই সাইট যেই frontmatter ব্যবহার করছে সেটিকে উদাহরণ হিসেবে দেখুন:

---
title: SvelteKit docs & blog SSG
description: Write Markdown, keep the full power of SvelteKit — Svelte 5 Runes, versioning, i18n, and Pagefind.
badge:
  text: '⚡️ Svelte 5 এবং Runes পূর্ণ সমর্থন'
  link: /guide/markdown/svelte-in-markdown/
installCommand: pnpm create sveltepress
actions:
  - label: ডক্‌স পড়ুন
    to: /guide/introduction/
    type: primary
  - label: গিটহাবে দেখুন
    type: flat
    to: https://github.com/SveltePress/sveltepress
    external: true
features:
  - title: Markdown এ Svelte 5 Runes
    description: Markdown ফাইলের মধ্যে সরাসরি রিঅ্যাক্টিভ Svelte 5 কম্পোনেন্ট এবং Runes স্টেট ম্যানেজমেন্ট ব্যবহার করুন।
    spotlight: true
    tag: প্রধান বৈশিষ্ট্য
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-svelte
    link: /guide/markdown/svelte-in-markdown/
  - title: অপরিবর্তনীয় ডকুমেন্টেশন ভার্সন ম্যানেজমেন্ট
    description: বর্তমান ডকুমেন্টেশনকে পরিচ্ছন্ন URL-এ রেখে অপরিবর্তনীয় ঐতিহাসিক স্ন্যাপশট প্রকাশ করুন; সঙ্গে পান অন্তর্নির্মিত ভার্সন নেভিগেশন।
    spotlight: true
    tag: এন্টারপ্রাইজ
    icon:
      type: iconify
      collection: material-symbols
      name: history
    link: /guide/version-management/
  - title: দ্রুত শূন্য-কনফিগারেশন লোকাল সার্চ
    description: Pagefind দ্বারা চালিত শূন্য-কনফিগারেশন দ্রুত ক্লায়েন্ট-সাইড সার্চ, সাথে বহুভাষা ফিল্টারিং এবং DocSearch সমর্থন।
    spotlight: true
    tag: উচ্চ কার্যক্ষমতা
    icon:
      type: iconify
      collection: material-symbols
      name: search
    link: /guide/default-theme/search/
  - title: Markdown কেন্দ্রিক
    description: ন্যূনতম কনফিগারেশন দিয়ে অবিলম্বে লেখা শুরু করুন এবং চমৎকার ডিফল্ট স্টাইলিং উপভোগ করুন।
    tag: রচনা
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-markdown
    link: /guide/markdown/frontmatter/
  - title: SvelteKit দিয়ে তৈরি
    description: SvelteKit এর সম্পূর্ণ শক্তি বজায় রাখুন, যাতে স্ট্যাটিক সাইট জেনারেশন (SSG) ছাড়াও সার্ভার রুট তৈরি করা যায়।
    tag: ইকোসিস্টেম
    icon:
      type: iconify
      collection: logos
      name: svelte-icon
    link: /guide/introduction/
  - title: অন্তর্নির্মিত বহুভাষা সমর্থন (i18n)
    description: একটি সাইট থেকেই স্বয়ংক্রিয় রুট প্রিফিক্স, ভাষা পরিবর্তনকারী এবং ভার্সন বজায় রেখে বহুভাষা পরিচালনা করুন।
    tag: গ্লোবাল
    icon:
      type: iconify
      collection: material-symbols
      name: translate
    link: /guide/i18n/
  - title: টাইপ-বান্ধব
    description: সমস্ত API পুরোপুরি টাইপস্ক্রিপ্ট দিয়ে টাইপ করা এবং Twoslash কোড হোভার সমর্থন যুক্ত।
    tag: টাইপস্ক্রিপ্ট
    icon:
      type: iconify
      collection: logos
      name: typescript-icon
    link: /guide/typescript/
  - title: থিম কাস্টমাইজযোগ্য
    description: নির্দ্বিধায় ডিফল্ট থিম, ব্লগ থিম বা আপনার নিজের বানানো কাস্টম থিম ব্যবহার করুন।
    tag: প্রসারণযোগ্য
    icon:
      type: iconify
      collection: emojione
      name: artist-palette
    link: /guide/themes/
---
md
Expand code

আপনি রেজাল্ট দেখতে হোম পেজে যেতে পারেন।

heroImage

হোম পেজের লোগো। হাই কোয়ালিটির ইমেজ ব্যবহার করা উত্তম। Landing page-এর সম্পূর্ণ width content-এর জন্য রাখতে এবং default hero illustration লুকাতে এটিকে false করুন।

ডিফল্ট Hero visual localize করা

heroImage বাদ দিলে default theme একটি দুই-প্যানেলের code preview দেখায়। Theme-এর i18n.heroCode option দিয়ে visual-এর লেখাগুলো localize করা যায়:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  

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: {
    

heroCode?: {
    title?: string;
    messageBefore?: string;
    messageStrong?: string;
    messageAfter?: string;
    tipLabel?: string;
    counterLabel?: string;
} | undefined
heroCode: {
      title?: string | undefinedtitle: 'হ্যালো',
      messageBefore?: string | undefinedmessageBefore: '',
      messageStrong?: string | undefinedmessageStrong: 'Markdown',
      messageAfter?: string | undefinedmessageAfter: '-এ Svelte',
      tipLabel?: string | undefinedtipLabel: 'পরামর্শ',
      counterLabel?: string | undefinedcounterLabel: 'গণনা: ১',
    },
  },
})
ts

messageBefore, messageStrong, এবং messageAfter source pane-এর Markdown বাক্য তৈরি করে। tipLabel ও counterLabel rendered pane-এর লেখা বদলায়।

tagline

সাইটের টাইটেল এবং ডেসক্রিপশনের নিচে থাকা ছোট ডেসক্রিপশন

actions

অ্যাকশন বাটন

  • label অ্যাকশন নাটনের লেবেলের লেখা
  • to অ্যাকশন বাটনের লিংক। Internal path logical route হওয়া উচিত, যেমন /guide/introduction/; Default Theme সক্রিয় লোকেলের prefix যোগ করবে।
  • external অ্যাকশন নাটনের ডানদিকে এক্সটার্নাল আইকন দেখাবে কিনা তা নির্ধারণ করে

features

ফিচার কার্ড

  • title টাইটেল
  • description টাইটেলের নিচে থাকা ডেসক্রিপশন
  • icon কাস্টম আইকন কনফিগ
    • type - 'svg' | 'iconify'
    • value - svg টাইপের আইকনে ব্যবহারের জন্য svg কন্টেন্ট
    • collection - iconify এর কালেকশন নাম
    • name - iconify এর কালেকশনের আইকনের নাম
  • link ফিচার কার্ডে ক্লিক করে যেই লিংকে যাবে, সেটা। Internal path logical route হওয়া উচিত, যেমন /guide/markdown/frontmatter/; Default Theme সক্রিয় লোকেলের prefix যোগ করবে। যদি http(s) দিয়ে লিংক শুরু হয়ে থাকে, তাহলে অটোমেটিক লিংক হিসেবে চিনে নেবে এবং উপরের ডানদিকে এক্সটার্নাল আইকন থাকবে। এবং লিংক প্রোভাইড করা হলে ফিচার কার্ডে ক্লিক-করার-যোগ্য স্টাইল থাকবে।
প্রি-বিল্ড আইকন আবশ্যক

iconify আইকন প্রিবিল্ড iconify কনফিগ এ থাকতে হবে।

home

Root route default ভাবে home layout ব্যবহার করে। অন্য যেকোনো route-এ home: true দিলে page-টির নিজস্ব title, description, এবং tagline সহ একই landing-page presentation ব্যবহার করা যাবে। Landing page-এ documentation sidebar, table of contents, edit metadata, বা previous/next page switcher দেখানো হয় না।

Default home page content সরাতে root route-এ home: false দিন।

স্লট

hero-image

কাস্টম হিরো ইমেজ ব্যবহার, যেমন:

/src/routes/+page.(md|svelte)
{#snippet const heroImage: () => ReturnType<import("svelte").Snippet>heroImagetype ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any
Obtain the return type of a function type
()}
  <div>
  Custom hero image content
  </div>
{/snippet}
svelte