Theme Installation Guide

Theme Installation Guide

Theme Introduction
2026-06-30 12:58:33
0 字
0 分钟阅读
加载中... 次阅读
starread 🏴󠁧󠁢󠁥󠁮󠁧󠁿 English Document | 🇨🇳 Chinese Document | 🇯🇵 日本語ドキュメント | 🇰🇷 한국어 문서 | 🇷🇺 Русская документация

Star Read - Astro Blog Theme

An Astro theme that is as bright as starlight, yet concise and premium

🚀 Features

  • 🎨 Modern UI design
  • 🔍 Automatically creates local index, supports local offline search and Algolia online search
  • 📱 Responsive design, adapts to mobile phones and PCs
  • 🌙 Automatic dark/light theme switching
  • 🏷️ Tag and category support
  • 📊 Article statistics and author information display

📂 Project Structure

/
├── src/
│   ├── components/     # Component files
│   ├── content/        # Content configuration
│   ├── layouts/        # Layout templates
│   ├── pages/          # Page routes
│   └── styles/         # Style files
├── public/             # Static assets
└── dist/               # Build output

📦 Installation

Method 1: Initialize via CLI tool

Package Manager Recommended Command
pnpm / pnpx pnpm dlx astro-theme-starread init or pnpx astro-theme-starread init
npm (npx) npx astro-theme-starread init
Yarn yarn dlx astro-theme-starread init (requires Yarn v2+)

[!note] We provide the create command for users to create the theme in a specified folder

  1. Create a project: Choose one of the following commands based on your package manager:
# Using pnpm
pnpm create astro-theme-starread my-blog

# Using npm
npx create-astro-theme-starread my-blog

# Using yarn
yarn create astro-theme-starread my-blog

# Using cnpm
cnpm init astro-theme-starread my-blog
  1. Enter the project directory:
cd my-blog
  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev

Method 2: Install using astro template

[!warning] This method requires access to the Github repository, ensure network connectivity.

Package Manager Command
pnpm pnpm create astro@latest --template passwordgloo/astro-theme-starread
npm npm create astro@latest -- --template passwordgloo/astro-theme-starread
yarn yarn create astro --template passwordgloo/astro-theme-starread

Method 3: Source code installation

[!warning] This method requires access to the Github repository, ensure network connectivity.

git clone https://github.com/passwordgloo/astro-theme-starread
cd astro-theme-starread
pnpm install

[!note] After installation, run the development server:

pnpm dev

Method 4: Install as a dependency into an existing Astro project

You can install the theme as a dependency into an existing Astro project and use its components, layouts and pages directly from node_modules.

  1. Install the theme package:
# Using pnpm
pnpm add astro-theme-starread

# Using npm
npm install astro-theme-starread

# Using yarn
yarn add astro-theme-starread
  1. Import and use components directly from node_modules:
---
// Import components directly from the theme in node_modules
import { NavBar, ThemeToggle, ArticleInfo, AuthorWidget, TagCloud } from 'astro-theme-starread';
---

<html>
  <head>
    <title>My Astro Blog</title>
    <!-- If you need to use theme styles -->
    <link rel="stylesheet" href="node_modules/astro-theme-starread/src/styles/global.css" />
  </head>
  <body>
    <!-- Use the NavBar component from node_modules -->
    <NavBar />
    
    <!-- Use the ThemeToggle component from node_modules -->
    <ThemeToggle />
    
    <article>
      <!-- Use the ArticleInfo component with properties -->
      <ArticleInfo 
        title="My Article"
        date="2024-01-01"
        author="Author Name"
      />
      <p>Article content...</p>
    </article>
    
    <aside>
      <!-- Use sidebar components -->
      <AuthorWidget />
      <TagCloud />
    </aside>
  </body>
</html>
  1. Use layouts directly from node_modules:
---
// Import layouts directly from the theme in node_modules
import { article as ArticleLayout } from 'astro-theme-starread';

// Apply the layout from node_modules
export const layout = ArticleLayout;

// Your content
export const content = {
  title: "My Blog Post",
  date: "2024-01-01",
  author: "Author Name",
  tags: ["Tech", "Blog"]
};
---

<!-- This content will be rendered in the node_modules layout -->
<main>
  <p>This is the content of my blog post. It will be rendered in the theme's article layout.</p>
</main>

🧞 Commands

Command Description
pnpm install Install dependencies
pnpm dev Start local development server localhost:4321
pnpm preview Preview build results locally
pnpm algolia Push data to Algolia search
pnpm release Version management (update version number, generate commits, etc.)

🔍 Search

Go to Search

⚙️ Custom Configuration

Go to Custom Configuration

🔧 Twikoo Comments

[!tip] If you need to enable twikoo, please modify line 13 envId in src/compponents/Comment.astro to your twikoo environment address.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.twikoo) {
      window.twikoo.init({
        envId: 'https://example.com',// Your environment address
        el: '#tcomment',
        path: window.location.pathname
      });
    } else {
      console.error('Twikoo failed to load, please check the twikoo local location or CDN address');
    }
  });
</script>