কালার প্যালেট

themeColor / themeColorLight দিয়ে ডার্ক বা লাইট প্যালেট ওভাররাইড করুন:

blogTheme({
  
themeColor: {
    primary: string;
    secondary: string;
    bg: string;
    surface: string;
}
themeColor
: {
primary: stringprimary: '#fb923c', secondary: stringsecondary: '#dc2626', bg: stringbg: '#1a0a00', surface: stringsurface: '#2d1200', },
themeColorLight: {
    primary: string;
    bg: string;
    surface: string;
}
themeColorLight
: {
primary: stringprimary: '#c2410c', bg: stringbg: '#fef9f0', surface: stringsurface: '#fde8c8', }, })
ts

যে কী গুলো বাদ দিবেন সেগুলোর জন্য থিম ডিফল্ট থাকবে। রানটাইমে এগুলো [data-theme="dark"] .sp-blog-root এবং [data-theme="light"] .sp-blog-root এ scoped CSS কাস্টম প্রোপার্টি হিসেবে inject হয়।

CSS কাস্টম প্রোপার্টি

সব কম্পোনেন্ট এই ভ্যারিয়েবলগুলো পড়ে। নিজের স্টাইলে এগুলো ওভাররাইড করে সূক্ষ্ম নিয়ন্ত্রণ করুন:

ভ্যারিয়েবলকাজ
--sp-blog-bgপেজ ব্যাকগ্রাউন্ড
--sp-blog-surfaceকার্ড/সাইডবার ব্যাকগ্রাউন্ড
--sp-blog-borderসেপারেটর, কার্ড বর্ডার
--sp-blog-textপ্রাইমারি টেক্সট (টাইটেল)
--sp-blog-contentবডি টেক্সট
--sp-blog-mutedমেটা টেক্সট (তারিখ, কাউন্ট)
--sp-blog-primaryঅ্যাকসেন্ট (লিংক, ট্যাগ, বাটন)
--sp-blog-secondaryসেকেন্ডারি অ্যাকসেন্ট

কম্পোনেন্ট প্রতিস্থাপন

src/routes/ এর স্ক্যাফোল্ডেড ফাইলগুলো @sveltepress/theme-blog/components/* থেকে কম্পোনেন্ট ইমপোর্ট করে। কোনো একটি প্রতিস্থাপন করতে — যেমন পোস্ট কার্ড — src/routes/+page.svelte এডিট করে নিজের কম্পোনেন্ট দিন:

src/routes/+page.svelte
<script lang="ts">
  import 
type MyGrid = SvelteComponent<Record<string, any>, any, any>
const MyGrid: LegacyComponentType
MyGrid
from '$lib/MyGrid.svelte'
const { const data: anydata } =
function $props(): any
namespace $props

Declares the props that a component accepts. Example:

let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
$
function $props(): any
namespace $props

Declares the props that a component accepts. Example:

let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
props
()
</script> <const MyGrid: LegacyComponentTypeMyGrid posts: anyposts={const data: anydata.posts} />
svelte

থিম এই বিল্ডিং ব্লকগুলো re-export করে:

  • @sveltepress/theme-blog/GlobalLayout.svelte
  • @sveltepress/theme-blog/PageLayout.svelte
  • @sveltepress/theme-blog/PostLayout.svelte
  • @sveltepress/theme-blog/components/MasonryGrid.svelte
  • @sveltepress/theme-blog/components/Timeline.svelte
  • @sveltepress/theme-blog/components/Pagination.svelte
  • @sveltepress/theme-blog/components/Sidebar.svelte
  • @sveltepress/theme-blog/components/SearchModal.svelte
  • @sveltepress/theme-blog/components/ReadingProgress.svelte
  • @sveltepress/theme-blog/components/GiscusComments.svelte
  • @sveltepress/theme-blog/components/RelatedPosts.svelte
  • @sveltepress/theme-blog/components/TaxonomyHeader.svelte
  • @sveltepress/theme-blog/components/AuthorCard.svelte
  • @sveltepress/theme-blog/components/AuthorProfile.svelte

Data module

Scaffolded route-এ ব্যবহৃত virtual module-গুলোর TypeScript declaration package-এর সঙ্গে থাকে। প্রধান customization point:

ModuleExport
virtual:sveltepress/blog-posts-metaposts: BlogPostMeta[]
virtual:sveltepress/blog-tags-indextags: Array<{ name, count }>
virtual:sveltepress/blog-categories-indexcategories: Array<{ name, count }>
virtual:sveltepress/blog-configblogConfig: BlogThemeOptions

Per-post, per-tag ও per-category record virtual:sveltepress/blog-post/<slug>-এর মতো literal module ID দিয়েও পাওয়া যায়। virtual:sveltepress/blog-runtime server load-এর absolute cache path দেয় এবং client component-এ import করা যাবে না।

সাবপাথে ডিপ্লয়

svelte.config.jsBASE_PATH এবং vite.config.tsSITE_URL পড়ুন:

svelte.config.js
export default {
  kit: {
    paths: {
      base: process.env.BASE_PATH ?? '',
      relative: false,
    },
  },
}
js
vite.config.ts
blogTheme({
  base: stringbase: var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnv

The process.env property returns an object containing the user environment. See environ(7).

An example of this object looks like:

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}

It is possible to modify this object, but such modifications will not be reflected outside the Node.js process, or (unless explicitly requested) to other Worker threads. In other words, the following example would not work:

node -e 'process.env.foo = "bar"' &#x26;&#x26; echo $foo

While the following will:

import { env } from 'node:process';

env.foo = 'bar';
console.log(env.foo);

Assigning a property on process.env will implicitly convert the value to a string. This behavior is deprecated. Future versions of Node.js may throw an error when the value is not a string, number, or boolean.

import { env } from 'node:process';

env.test = null;
console.log(env.test);
// => 'null'
env.test = undefined;
console.log(env.test);
// => 'undefined'

Use delete to delete a property from process.env.

import { env } from 'node:process';

env.TEST = 1;
delete env.TEST;
console.log(env.TEST);
// => undefined

On Windows operating systems, environment variables are case-insensitive.

import { env } from 'node:process';

env.TEST = 1;
console.log(env.test);
// => 1

Unless explicitly specified when creating a Worker instance, each Worker thread has its own copy of process.env, based on its parent thread's process.env, or whatever was specified as the env option to the Worker constructor. Changes to process.env will not be visible across Worker threads, and only the main thread can make changes that are visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner unlike the main thread.

@sincev0.1.27
env
.string | undefinedSITE_URL ?? 'http://localhost:4173',
// ... })
ts

দুটি ভ্যারিয়েবল সেট করে বিল্ড করুন, যেমন user.github.io/repo/blog এ GitHub Pages প্রজেক্ট সাইটের জন্য:

BASE_PATH=/repo/blog SITE_URL=https://user.github.io/repo/blog \
  pnpm build
bash

থিম কম্পোনেন্টের সব ইন্টারনাল লিংক SvelteKit-এর $app/paths base ব্যবহার করে, তাই সাবপাথের নিচে এগুলো সঠিকভাবে resolve হয়। OG ইমেজ URL এবং RSS আইটেম URL SITE_URL ব্যবহার করে, যাতে সোশ্যাল ক্রলার পূর্ণ-কোয়ালিফাইড URL পায়।

পেজ যোগ করা

src/routes/ এর নিচে স্ক্যাফোল্ডার reserved না করা সবকিছুই আপনার। src/routes/+layout.svelte অপরিবর্তিত রাখলেই কাস্টম পেজগুলো স্বয়ংক্রিয়ভাবে GlobalLayout এ wrap হবে — প্রতিটি রুট সাইডবার + মেইন গ্রিডের ভিতরে রেন্ডার হয়।