Astro Theme Iris

English | 简体中文

---

📸 Screenshots

Demo Blog: https://lemonadorable.github.io/

Note

Known issues: Header & customize options is still under development (template exposed still).

Full-screen homepage with animation effects

Powerful search preview system - supports category filtering, real-time preview, and scroll markers

Wikilink preview, Graph View, and knowledge graph

---

🎨 About Iris Theme

This project is customized based on astro-theme-pure, aiming to combine blog, profile, and knowledge base to create a powerful personal knowledge management system.

✨ Core Features

🔍 Powerful Search System

• FlexSearch Full-Text Search: High-performance search supporting multiple languages including Chinese and English
• Three-Column Preview Layout: Integrated search results, content preview, and scroll markers
• Multi-Dimensional Filtering: Filter by date range, tags, and type (article/docs)
• Real-Time Highlighting: Real-time search result highlighting with scroll positioning

🔗 Wikilink System

• Multi-Level Preview: Uses Tippy.js to implement Quartz-like multi-layer preview functionality
• Smart Positioning: Supports backlinks and reverse positioning references
• Smooth Interaction: Supports nested previews

🗺️ Knowledge Graph (Graph View)

• D3.js Directed Graph: Visualizes relationships between pages
• Local/Global Views: View local graph for current page or site-wide global graph
• Node Types: Distinguishes between articles, docs, tags, categories, and other types
• Interactive Operations: Supports drag, zoom, and click navigation

🎨 UI Optimization

• Full-Screen Homepage: Immersive homepage design with animation effects
• Gradient Background: Article cards use light purple gradient backgrounds
• Interactive Animations: Interactive animation effects for avatars and friend links
• Responsive Design: Adapted for desktop and mobile devices

💬 Comment System

• Giscus Integration: Comment system based on GitHub Discussions

📊 Mermaid Integration

• Mermaid Integration: Mermaid integration for diagramming

🖋️ Typst Integration

• Typst Support: Typst integration for high-quality mathematical equations and diagrams rendering in MDX

🚀 Quick Start

Option 1: Use as a Template (Recommended)

1. Click the "Use this template" button at the top of this repository.
2. Clone your new repository to local.
3. Install dependencies and start developing:

   bun install # or npm install
   bun dev     # or npm run dev

Option 2: Manual Installation

# Clone repository
git clone https://github.com/LemonAdorable/astro-theme-iris.git
cd astro-theme-iris

# Install dependencies
bun install # or npm install

🔄 Updating Theme

To get the latest features and fixes from the Iris theme:

# Add upstream remote (only need to do once)
git remote add upstream https://github.com/LemonAdorable/astro-theme-iris.git

# Pull and merge updates from main branch
git fetch upstream main
git merge upstream/main --allow-unrelated-histories

Tip

The --allow-unrelated-histories flag is only required for the first merge if you have an existing repository with a different history. For future updates, a simple git pull upstream main will work.

📝 Todo

• English or multi-language support
• Homepage resume feature
• Package theme and new components
• More documentation and examples

📚 Repository Structure

Iris Theme (LemonAdorable/astro-theme-iris)
  └── main branch (Upstream)
      ↓ (fetch & merge)
Your Blog Repository
  └── main branch (Your content + Iris components)

🙏 Acknowledgments

This project is based on the following excellent open-source projects:

• astro-theme-pure - Base theme framework
• FlexSearch - High-performance full-text search engine
• Tippy.js - Powerful tooltip library
• D3.js - Data visualization library
• Quartz - Knowledge base theme design concept reference
• Obsidian - Wikilink note concept reference

📞 Contact

For questions or suggestions, please feel free to contact via email

📋 Usage Instructions

Search Feature

• Press Ctrl+K or Cmd+K to open the search box
• Supports Chinese and English full-text search
• Filter by date range, tags, and type
• Click search results to navigate to corresponding pages
• Right preview area supports scroll marker positioning

Wikilink Preview

• Use [[link text]] or [[link|display text]] in articles to create wikilinks
• Hover over wikilinks to preview link content
• Supports multi-level nested previews
• Preview box supports interaction, click links to navigate

Knowledge Graph

• Graph View displayed in sidebar on article and doc pages
• Click nodes to navigate to corresponding pages
• Supports dragging nodes to adjust layout
• Click top-right button to view site-wide global graph

⚙️ Configuration

Main configuration file is located at src/site.config.ts, where you can configure:

• Basic site information (title, description, author, etc.)
• Social links
• Comment system (Giscus/Waline)
• Other theme options

📄 License

This project is open source under the Apache 2.0 License.

⭐ Star History