<h1 class="ql-align-center">Star Read - Astro Blog Theme</h1>
A brilliant yet clean and sophisticated Astro theme with star-like quality
📦 Installation
Method 1: Initialize via CLI Tool
pnpm
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">pnpm dlx astro-theme-starread init</code> or <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">pnpx astro-theme-starread init</code>
npm
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">npx astro-theme-starread init</code>
Yarn
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">yarn dlx astro-theme-starread init</code> (Requires Yarn v2+)
We provide a <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">create</code> command to facilitate creating a theme in a specified folder
1.Create Project: Depending on your package manager, choose one of the following commands:
# 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
2.Enter Project Directory:
cd my-blog
3.Install Dependencies:
pnpm install
4.Start Development Server:
pnpm dev
Method 2: Install using <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">astro</code> template
This method requires accessing the GitHub repository, ensure network connectivity.
pnpm
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">pnpm create astro@latest --template passwordgloo/astro-theme-starread</code>
npm
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">npm create astro@latest -- --template passwordgloo/astro-theme-starread</code>
yarn
<code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">yarn create astro --template passwordgloo/astro-theme-starread</code>
Method 3: Install from Source
This method requires accessing the GitHub repository, ensure network connectivity.
git clone https://github.com/passwordgloo/astro-theme-starread cd astro-theme-starread pnpm install
After installation, run the development server:
pnpm dev
📂 Project Structure
/ ├── src/ │ ├── components/ # Component files │ ├── content/ # Content configuration │ ├── layouts/ # Layout templates │ ├── pages/ # Page routes │ └── styles/ # Style files ├── public/ # Static assets └── dist/ # Build output
🚀 Features
- 🎨 Modern UI Design
- 🔍 Support for Local Search (Pagefind) and Algolia Search
- 📱 Responsive Design
- 🌙 Dark/Light Theme Toggle
- 🏷️ Tag and Category Support
- 📊 Article Statistics and Author Information Display
🔍 Search
Local Search
Local search is used by default. For first-time use, run <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">pnpm local</code> to build local index
Algolia Search
It is recommended to use environment variables for configuration in production to avoid exposing sensitive information in code.
1.Edit <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">starread.config.ts</code> to select Algolia search
export const themeConfig: starreadthemeconfig = {
search: {
// Search provider: 'local', 'algolia'
provider: 'algolia',
}
}
2.Create and edit <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">.env</code> file in root directory
Algolia search requires your Algolia Application ID, Search Key, Index Name, and Admin API Key.
If you don't have an Algolia account, you need to register and create an application first.
PUBLIC_ALGOLIA_APP_ID=Your Algolia Application ID PUBLIC_ALGOLIA_SEARCH_KEY=Your Algolia Search Key PUBLIC_ALGOLIA_INDEX_NAME=Your Index Name ALGOLIA_WRITE_API_KEY=Your Write API Key (for index upload)
3.Push Index to Algolia
Run <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">pnpm algolia</code> to push local index to Algolia
⚙️ Custom Configuration
You can customize theme configuration by modifying the <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">starread.config.ts</code> file in the root directory, including website title, navigation menu, author information, sidebar component display, etc.
Example configuration items:
// Modify website title
site: {
title: 'My Blog',
// ...other configurations
}
// Custom navigation menu
nav: [
{ name: 'Home', href: '/' },
{ name: 'About', href: '/about' },
// ...other menu items
]
🔧 Twikoo Comment Configuration
To enable Twikoo comment system, please modify the <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">envId</code> value on line 13 of <code style="background-color: rgb(255, 255, 255); color: rgb(50, 50, 50);">src/components/Comment.astro</code> file 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 local Twikoo location or CDN address');
}
});
</script>
