# ebook

**Repository Path**: baklib/ebook

## Basic Information

- **Project Name**: ebook
- **Description**: 在线电子书制作。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Baklib 电子书主题模板

一个精美的电子书风格 Wiki 主题模板，提供沉浸式的阅读体验，适合知识库、文档站点和内容门户。

## ✨ 功能特性

### 📖 多视图设计
- **封面页** (`cover.liquid`) - 精美的电子书封面展示
- **分类列表页** (`index.ebook.liquid`) - 卡片式分类展示，支持图标和文章数量
- **目录页** (`page.channel.liquid`) - 文章目录列表，支持实时搜索筛选
- **文章详情页** (`page.liquid`) - 优雅的文章阅读界面，支持上下页导航

### 🎨 设计特色
- **玻璃态设计** - 使用 Glassmorphism 效果，现代化的视觉体验
- **动态背景** - 根据分类自动切换主题色彩和背景效果
- **响应式布局** - 完美适配移动端和桌面端
- **流畅动画** - 页面切换和交互动画

### 🔍 交互功能
- **实时搜索** - 目录页支持标题搜索筛选
- **全局搜索** - 全站内容搜索功能
- **阅读进度** - 显示当前阅读进度
- **导航控制** - 上一页/下一页导航

## 📁 模板结构

```
ebook/
├── layout/
│   └── theme.liquid          # 主布局文件，包含全局样式和脚本
├── templates/
│   ├── index.ebook.liquid    # 分类列表页模板
│   ├── page.channel.liquid   # 目录页模板
│   └── page.liquid           # 文章详情页模板
├── statics/
│   └── cover.liquid          # 封面页模板
├── snippets/                 # 可复用片段
├── assets/                   # 编译后的静态资源
├── src/                     # 源代码
│   └── javascripts/
│       ├── application.js   # 主入口文件
│       └── alpine-data.js    # Alpine.js 数据函数
└── config/
    └── settings_schema.json  # 模板配置
```

## 🚀 安装指南

### 通过 Baklib 后台安装

1. 登录 Baklib 后台
2. 进入「主题管理」→「安装主题」
3. 选择「从 Git 仓库安装」
4. 输入仓库地址和分支信息
5. 点击「安装」

详细安装指南：https://help.baklib.cn/themes/wiki

### 通过 Git 安装

详细说明：https://dev.baklib.cn/guide/git

## 💻 开发指南

### 环境要求

- Node.js 16+
- Yarn 或 npm
- Ruby 3.0+ (用于 Guard)

### 开发命令

```bash
# 安装依赖
yarn install

# 启动开发模式（实时编译）
yarn dev

# 编译生产版本
yarn build
```

### 开发工具

使用 Guard 实现代码改动自动刷新：

```bash
# 安装 Ruby 依赖
bundle install

# 启动 Guard（需要浏览器安装 livereload 插件）
bundle exec guard
```

## 🎯 模板使用

### 页面模板说明

#### 1. 封面页 (`cover.liquid`)
- **访问路径**: `/s/static/cover`
- **功能**: 展示电子书封面，提供进入入口
- **配置项**:
  - `cover_title` - 封面标题
  - `cover_subtitle` - 封面副标题
  - `cover_badge` - 封面徽章文字
  - `cover_image` - 封面图片
  - `cover_publisher` - 出版社/发布者信息

#### 2. 分类列表页 (`index.ebook.liquid`)
- **模板名称**: `index.ebook`
- **功能**: 显示首页的子页面作为分类卡片
- **配置项**:
  - `title` - 页面标题

#### 3. 目录页 (`page.channel.liquid`)
- **模板名称**: `page.channel`
- **功能**: 显示当前页面的子页面列表，支持搜索
- **配置项**:
  - `title` - 页面标题
  - `description` - 页面描述
  - `icon` - 分类图标

#### 4. 文章详情页 (`page.liquid`)
- **模板名称**: `page`
- **功能**: 显示文章内容，提供导航和搜索
- **配置项**:
  - `cover_image` - 文章封面图
  - `title` - 文章标题
  - `description` - 文章摘要
  - `content` - 文章内容
  - `caption` - 图注说明

### 数据传递

模板使用 HTML data 属性传递数据给 JavaScript：

```liquid
<div
  class="hidden"
  data-article-id="{{ article.id }}"
  data-article-url="{{ article.url }}"
  data-article-title="{{ article.settings.title }}"
></div>
```

JavaScript 会自动读取这些数据并构建文章列表。

## 🛠️ 技术栈

- **前端框架**: Alpine.js 3.x
- **样式**: TailwindCSS
- **构建工具**: Webpack / Vite
- **模板引擎**: Liquid

## 📝 开发规范

### 代码组织

- **Alpine.js 数据函数**: `src/javascripts/alpine-data.js`
- **Stimulus 控制器**: `src/javascripts/controllers/`
- **样式文件**: `src/stylesheets/`
- **模板文件**: `templates/` 和 `statics/`

### 命名规范

- 模板文件使用小写字母和连字符：`page.channel.liquid`
- JavaScript 文件使用驼峰命名：`alpine-data.js`
- CSS 类名使用 TailwindCSS 工具类

## 🔧 自定义配置

### 主题颜色

在 `config/settings_schema.json` 中配置主题颜色和样式选项。

### 预览图配置

支持按语言自动切换预览图：

```json
{
  "theme_preview_images": [
    "images/schema/${lang}/cover.png",
    "images/schema/${lang}/index.png",
    "images/schema/${lang}/page.png"
  ]
}
```

## 📚 相关文档

- [Baklib 开发文档](https://dev.baklib.cn/)
- [Liquid 模板语法](https://shopify.github.io/liquid/)
- [Alpine.js 文档](https://alpinejs.dev/)
- [TailwindCSS 文档](https://tailwindcss.com/)

## 📄 许可证

本项目遵循 Baklib 主题模板许可协议。

---

**版本**: 1.0.0
**最后更新**: 2025-01-XX