কালার প্যালেট
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',
},
}) যে কী গুলো বাদ দিবেন সেগুলোর জন্য থিম ডিফল্ট থাকবে। রানটাইমে এগুলো [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 এডিট করে নিজের কম্পোনেন্ট দিন:
<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} /> থিম এই বিল্ডিং ব্লকগুলো 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:
| Module | Export |
|---|---|
virtual:sveltepress/blog-posts-meta | posts: BlogPostMeta[] |
virtual:sveltepress/blog-tags-index | tags: Array<{ name, count }> |
virtual:sveltepress/blog-categories-index | categories: Array<{ name, count }> |
virtual:sveltepress/blog-config | blogConfig: 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.js এ BASE_PATH এবং vite.config.ts এ SITE_URL পড়ুন:
export default {
kit: {
paths: {
base: process.env.BASE_PATH ?? '',
relative: false,
},
},
} blogTheme({
base: stringbase: var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnvThe 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"' && 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.
env.string | undefinedSITE_URL ?? 'http://localhost:4173',
// ...
}) দুটি ভ্যারিয়েবল সেট করে বিল্ড করুন, যেমন user.github.io/repo/blog এ GitHub Pages প্রজেক্ট সাইটের জন্য:
BASE_PATH=/repo/blog SITE_URL=https://user.github.io/repo/blog \
pnpm build থিম কম্পোনেন্টের সব ইন্টারনাল লিংক SvelteKit-এর $app/paths base ব্যবহার করে, তাই সাবপাথের নিচে এগুলো সঠিকভাবে resolve হয়। OG ইমেজ URL এবং RSS আইটেম URL SITE_URL ব্যবহার করে, যাতে সোশ্যাল ক্রলার পূর্ণ-কোয়ালিফাইড URL পায়।
পেজ যোগ করা
src/routes/ এর নিচে স্ক্যাফোল্ডার reserved না করা সবকিছুই আপনার। src/routes/+layout.svelte অপরিবর্তিত রাখলেই কাস্টম পেজগুলো স্বয়ংক্রিয়ভাবে GlobalLayout এ wrap হবে — প্রতিটি রুট সাইডবার + মেইন গ্রিডের ভিতরে রেন্ডার হয়।