From 4cc7106e53485e9c1e7b2d043f99ba33b2f859ad Mon Sep 17 00:00:00 2001
From: Leon Ding <deen.job@qq.com>
Date: Mon, 1 Jul 2024 23:54:05 +0800
Subject: [PATCH] add: book builder output.

---
 .gitignore                     |   2 +-
 README.md                      |  12 ++-
 book/chapter_1.1.0.md          |   4 +-
 book/chapter_1.1.1.md          |  83 ++++++++++++++++
 root.yml                       |  10 +-
 settings.yml                   |   5 +-
 src/book/builder.rs            | 159 ++++++++++++++++++++++++-------
 src/book/root.rs               |   7 --
 src/book/settings.rs           |   5 +-
 src/cli/args.rs                |   5 +-
 src/cli/commands.rs            |  22 +++--
 src/html/hypertext.rs          |   4 +-
 src/html/markdown.rs           |   3 +-
 src/html/template.rs           |   4 +
 src/main.rs                    |  12 +--
 src/utils/logger.rs            |   1 +
 tests/book/builder_test.rs     |  15 ++-
 theme/typikon-theme/index.html | 168 +++------------------------------
 18 files changed, 290 insertions(+), 231 deletions(-)

diff --git a/.gitignore b/.gitignore
index c05cbb1..74b3714 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 .DS_Store
 *.log
 /target
-
+docs
 cobertura.xml
\ No newline at end of file
diff --git a/README.md b/README.md
index 0ca78fa..43f5312 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,29 @@
 # Typikon
 
-**Typikon lets you use markdown to write your online books.**
+Typikon lets you use markdown to write your online books.
 
 ---
 
 ![https://img.shields.io/badge/Typikon-Rust%20CLI-brightgreen](https://img.shields.io/badge/📖%20Typikon-Rust%20🦀️-yellow)
 [![codecov](https://codecov.io/github/auula/typikon/branch/main/graph/badge.svg?token=FaR2OdNYeB)](https://codecov.io/github/auula/typikon)
 [![License](https://img.shields.io/badge/license-Apache-db5149.svg)](https://github.com/auula/typikon/blob/master/LICENSE)
-![https://img.shields.io/github/repo-size/auula/typikon](https://img.shields.io/github/repo-size/auula/typikon)
 [![action](https://github.com/auula/typikon/actions/workflows/rust.yml/badge.svg?event=push)](https://github.com/auula/typikon/actions/workflows/rust.yml)
+[![Twitter URL](https://img.shields.io/twitter/follow/auula_?style=social)](https://twitter.com/auula_)
 
 
 ---
 
-A static website rendering tool similar to mdbook and hugo, but it focuses only on rendering markdown into an online book, and is easier to use than the other tools.
+## Introduce
+
+Typikon name derived from [Typikon](https://en.wikipedia.org/wiki/Typikon) Book, the a static website rendering tool similar to mdbook and hugo, but it focuses only on rendering markdown into an online book, and is easier to use than the other tools.
 
 ---
 
+## Preview
+
 <div style="display: flex; justify-content: space-around;">
     <img src="https://img.ibyte.me/a0mt96.png" alt="Alt text" style="width: 400px; height: 300px;">
     <img src="https://img.ibyte.me/e68k6e.png" alt="Alt text" style="width: 400px; height: 300px;">
 </div>
+
+---
\ No newline at end of file
diff --git a/book/chapter_1.1.0.md b/book/chapter_1.1.0.md
index 8c4c820..19d9838 100644
--- a/book/chapter_1.1.0.md
+++ b/book/chapter_1.1.0.md
@@ -1,4 +1,4 @@
-### MySQL 8.x 安装和配置
+### /book/chapter_1.1.0.md
 
 在 MySQL 8.x 中引入了许多新特性和改进，包括 JSON 和 JavaScript 作为数据库查询语言，以及更好的性能和安全性。例如，在连接过程中出现的 `Public Key Retrieval is not allowed` 错误提示，这些都是新版本的特性。本文将记录在最新版本的 Ubuntu 中安装 MySQL 8.x 的完整过程。
 
@@ -64,7 +64,7 @@ flush privileges;
   - 子项目1
   - 子项目2
   
-这是一个 [超链接测试]() 对文本内容。
+这是一个 [超链接测试](https://www.ibyte.me/) 对文本内容。
   
 ## 插入普通图片
 
diff --git a/book/chapter_1.1.1.md b/book/chapter_1.1.1.md
index e69de29..b2b9c2c 100644
--- a/book/chapter_1.1.1.md
+++ b/book/chapter_1.1.1.md
@@ -0,0 +1,83 @@
+### /book/chapter_1.1.1.md
+
+在 MySQL 8.x 中引入了许多新特性和改进，包括 JSON 和 JavaScript 作为数据库查询语言，以及更好的性能和安全性。例如，在连接过程中出现的 `Public Key Retrieval is not allowed` 错误提示，这些都是新版本的特性。本文将记录在最新版本的 Ubuntu 中安装 MySQL 8.x 的完整过程。
+
+---
+
+### 安装和配置
+
+在安装 MySQL 8.x 之前，可以先更新操作系统和软件包：
+
+```sh
+sudo apt update && apt upgrade -y
+```
+
+更新完成后，可以执行以下命令来查找和安装 MySQL 8.x 软件包：
+
+```sh
+sudo apt search mysql
+sudo apt install mysql-*
+```
+
+安装完成后，使用 `sudo mysql_secure_installation` 初始化 root 用户的密码：
+
+```sh
+sudo mysql_secure_installation
+```
+
+如果需要允许远程用户访问 MySQL 服务器，可以修改配置文件 `/etc/mysql/mysql.conf.d/mysqld.cnf` 中的 `bind-address`，设置为 `0.0.0.0`：
+
+```ini
+bind-address = 0.0.0.0
+mysqlx-bind-address = 127.0.0.1
+```
+
+然后可以为远程用户授予访问权限：
+
+```sql
+GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED WITH mysql_native_password BY '新密码' WITH GRANT OPTION;
+```
+
+---
+
+### 解决安全连接问题
+
+在 MySQL 8.x 中，如果出现 `Public Key Retrieval is not allowed` 错误提示，可以执行以下命令来解决：
+
+```sql
+ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '新密码';
+```
+
+执行后，刷新授权表：
+
+```sql
+flush privileges;
+```
+
+最后，请确保允许服务器上的 `3306` 端口连接。
+
+
+## 列表示例
+
+- 项目1
+- 项目2
+  - 子项目1
+  - 子项目2
+  
+这是一个 [超链接测试](https://www.ibyte.me/) 对文本内容。
+  
+## 插入普通图片
+
+![java](https://img.ibyte.me/470eor.jpg)  
+
+## 引用示例
+
+> 这是一个引用示例，可以包含多行文本和**加粗**文字。
+
+## 表格示例
+
+| 姓名   | 年龄 | 城市   |
+|--------|------|--------|
+| Alice  | 25   | 北京   |
+| Bob    | 30   | 上海   |
+| Carol  | 28   | 广州   |
diff --git a/root.yml b/root.yml
index 17fec3b..f8cd73e 100644
--- a/root.yml
+++ b/root.yml
@@ -4,18 +4,16 @@ root:
   index: "index.md"
   chapters:
     - title: "Chapter 1"
-      path: "/chapter1"
       index: "/chapter1/chapter1.md"
       sub_chapters:
         - title: "Section 1.1"
-          path: "/chapter1/chapter1-section1.1.md"
+          path: "book/chapter_1.1.0.md"
         - title: "Section 1.2"
-          path: "/chapter1/chapter1-section1.2.md"
+          path: "book/chapter_1.1.1.md"
     - title: "Chapter 2"
-      path: "/chapter2"
       index: "/chapter2/chapter2.md"
       sub_chapters:
         - title: "Section 2.1"
-          path: "/chapter2/chapter2-section2.1.md"
+          path: "book/chapter_1.1.0.md"
         - title: "Section 2.2"
-          path: "/chapter2/chapter2-section2.2.md"
+          path: "book/chapter_1.1.1.md"
diff --git a/settings.yml b/settings.yml
index b575cb9..dc91bee 100644
--- a/settings.yml
+++ b/settings.yml
@@ -1,9 +1,10 @@
 settings:
   about:
-    title: 现代 Java 编程指南
+    title: Typikon Book
     author: Leon Ding
-    description: 一本基于 JDK21 版本讲解 Java21 新特性编程实践书籍，采用 WSL + VSCode 作为基础开发环境。
+    description: Typikon name derived from Typikon Book, the a static website rendering tool similar to mdbook and hugo, but it focuses only on rendering markdown into an online book, and is easier to use than the other tools.
     language: zh-cn
+    keywords: typikon,book,website,generator,static,html,css,js,theme,rust
 
   directory:
     theme: theme
diff --git a/src/book/builder.rs b/src/book/builder.rs
index 617e406..59d568b 100644
--- a/src/book/builder.rs
+++ b/src/book/builder.rs
@@ -1,41 +1,78 @@
-use std::io;
+use std::{collections::HashMap, fs, io, path::Path};
 
 use tera::Tera;
 
 use crate::{
     book,
-    html::{
-        self,
-        template::{self, Template},
-    },
+    html::{self, template::Template, Hypertext, Markdown},
+    utils::Logger,
 };
 
-use super::{get_settings, Root, Settings};
+use super::{Root, Settings};
 
 #[derive(Debug)]
 pub struct Builder {
     root: Root,
-    pub templates: Template,
     pub engine: Tera,
     settings: Settings,
+    pub templates: Vec<Template>,
 }
 
 impl Builder {
     // 渲染整本书
-    pub fn render(&self) -> io::Result<()> {
-        println!("Builder.render() {:?}", self);
-        unimplemented!()
+    pub fn render(&mut self) -> io::Result<()> {
+        self.create_directory()?;
+        self.get_chapters_hypertext();
+        self.copy_theme_assets()?;
+        Ok(())
     }
 
-    pub fn get_hypertext() -> Vec<html::Hypertext> {
-        // 1. 通过 root 目录先创建目录
-        // 2. 通过 root 目录读取 md 内容
-        // 3. 通过 md 内容构建 Hypertext
-        // 4. 通过 Hypertext 落盘
-        unimplemented!()
+    pub fn get_chapters_hypertext(&mut self) -> HashMap<String, Vec<html::Hypertext>> {
+        let mut result: HashMap<String, Vec<html::Hypertext>> = HashMap::new();
+        let mut log = Logger::console_log();
+
+        if let Some(chapters) = self.get_chapter() {
+            // 开始遍历所有文章，找出同一子篇章的
+            for chapter in chapters {
+                let base_chapter = Path::new(&chapter.title);
+                let mut chapter_hypertexts: Vec<html::Hypertext> = Vec::new();
+
+                // 遍历子文章目录，并且将所有的子文章放到同父类中
+                for sub_chapter in &chapter.sub_chapters {
+                    let sub_chapter_path = &sub_chapter.path;
+
+                    // 开始读取 markdown 文件的内容
+                    match fs::read_to_string(sub_chapter_path) {
+                        Ok(markdown_content) => {
+                            let hypertext =
+                                Hypertext::new(sub_chapter_path, Markdown::new(&markdown_content));
+                            chapter_hypertexts.push(hypertext);
+
+                            log.info(format_args!(
+                                "Loading markdown file {:?} successful",
+                                sub_chapter_path
+                            ));
+                        }
+                        Err(err) => {
+                            log.error(format_args!("Loading markdown file fail : {:?}", err))
+                        }
+                    }
+                }
+
+                // 转换小写名字
+                let chapter_key = base_chapter
+                    .file_name()
+                    .and_then(|os_str| os_str.to_str())
+                    .map_or_else(|| chapter.title.clone(), |s| s.to_string());
+
+                result.insert(chapter_key.to_lowercase(), chapter_hypertexts);
+            }
+        }
+
+        result
     }
 
-    pub fn get_chapter(&self) -> Option<Vec<book::Chapter>> {
+    fn get_chapter(&self) -> Option<Vec<book::Chapter>> {
         if self.root.root.chapters.is_empty() {
             None
         } else {
@@ -43,34 +80,61 @@ impl Builder {
         }
     }
 
-    pub fn get_sub_chapter(&self) -> Option<Vec<book::SubChapter>> {
-        if self.root.root.chapters.is_empty() {
-            None
-        } else {
-            Some(
-                self.root
-                    .root
-                    .chapters
-                    .iter()
-                    .flat_map(|chapter| chapter.sub_chapters.clone())
-                    .collect(),
-            )
-        }
+    fn copy_theme_assets(&self) -> std::io::Result<()> {
+        let mut log = Logger::console_log();
+        let from = format!(
+            "{}/{}/assets",
+            self.settings.settings.directory.theme, self.settings.settings.theme
+        );
+        let to = format!("{}/assets", self.settings.settings.directory.output);
+
+        copy_dir_recursive(Path::new(&from), Path::new(&to))?;
+
+        log.info(format_args!(
+            "Building theme assets directory {:?} successful",
+            &to
+        ));
+
+        Ok(())
     }
 
     // 先把目录创建好
-    pub fn create_directory() -> io::Result<()> {
-        unimplemented!()
-    }
+    pub fn create_directory(&mut self) -> io::Result<()> {
+        let base_path = Path::new(&self.settings.settings.directory.output);
+        let mut log = Logger::console_log();
+        // 如果文件存在就删除并重建
+        if base_path.exists() {
+            fs::remove_dir_all(base_path)?;
+            log.info(format_args!(
+                "Clean up output diretory {:?} successful",
+                base_path
+            ));
+        }
 
+        fs::create_dir(base_path)?;
+        log.info(format_args!(
+            "New create output diretory {:?} successful",
+            base_path
+        ));
 
+        // 创建存放静态 html 文件的二级目录
+        self.root.root.chapters.iter().try_for_each(|chapter| {
+            fs::create_dir(base_path.join(&chapter.title.replace(" ", "_").to_lowercase()))
+        })
+    }
 }
 
 pub fn new_builder() -> Result<Builder, Box<dyn std::error::Error>> {
     let root = book::get_root()?;
-    let templates = html::Template::empty();
+    let templates = html::get_templates().unwrap();
     let settings = book::get_settings()?;
-    let engine = Tera::new(format!("theme/{}/**/*.html", &settings.settings.theme).as_str())?;
+    let engine = Tera::new(
+        format!(
+            "{}/{}/**/*.html",
+            &settings.settings.directory.theme, &settings.settings.theme
+        )
+        .as_str(),
+    )?;
     // 返回 Builder 实例
     Ok(Builder {
         root,
@@ -79,3 +143,28 @@ pub fn new_builder() -> Result<Builder, Box<dyn std::error::Error>> {
         settings,
     })
 }
+
+fn copy_dir_recursive(from: &Path, to: &Path) -> io::Result<()> {
+    // 创建目标目录如果它不存在
+    if !to.exists() {
+        fs::create_dir_all(to)?;
+    }
+
+    // 遍历源目录
+    for entry in fs::read_dir(from)? {
+        let entry = entry?;
+        let path = entry.path();
+        let relative_path = path.strip_prefix(from).unwrap();
+        let target_path = to.join(relative_path);
+
+        if path.is_dir() {
+            // 递归地复制子目录
+            copy_dir_recursive(&path, &target_path)?;
+        } else if path.is_file() {
+            // 复制文件
+            fs::copy(&path, &target_path)?;
+        }
+    }
+
+    Ok(())
+}
diff --git a/src/book/root.rs b/src/book/root.rs
index a757280..505d6eb 100644
--- a/src/book/root.rs
+++ b/src/book/root.rs
@@ -17,7 +17,6 @@ pub struct InnerRoot {
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct Chapter {
     pub title: String,
-    pub path: String,
     pub index: String,
     pub sub_chapters: Vec<SubChapter>,
 }
@@ -34,9 +33,3 @@ pub fn get_root() -> Result<Root, Box<dyn Error>> {
     let root: Root = serde_yaml::from_str(&content)?;
     Ok(root)
 }
-
-impl Chapter {
-    pub fn get_sub_chapters(&self) -> &[SubChapter] {
-        &self.sub_chapters
-    }
-}
diff --git a/src/book/settings.rs b/src/book/settings.rs
index 7dfd8c4..ca53aa0 100644
--- a/src/book/settings.rs
+++ b/src/book/settings.rs
@@ -1,14 +1,15 @@
 use std::{fs, path::Path};
 
-use std::error::Error;
 use serde::{Deserialize, Serialize};
+use std::error::Error;
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct About {
     pub title: String,
     pub author: String,
-    pub description: String,
     pub language: String,
+    pub keywords: String,
+    pub description: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
diff --git a/src/cli/args.rs b/src/cli/args.rs
index ed3ef35..e3d0c03 100644
--- a/src/cli/args.rs
+++ b/src/cli/args.rs
@@ -17,9 +17,9 @@ Usage: typikon <command> [<args>...]
 
 The commands are:
 
-    init      Initialize directory to working directory
-    build     Renderer static html file and output to book
+    init      Initialize to working directory
     theme     Install the specified theme files
+    build     Builder static html file and output to book
 
 Use typikon help <command> for more information about a command.               
 ";
@@ -36,6 +36,7 @@ pub fn parse_args() -> (Command, Vec<String>) {
     let args: Vec<String> = env::args().collect();
 
     if args.len() < 2 {
+        out_banner_string();
         exit(0)
     }
 
diff --git a/src/cli/commands.rs b/src/cli/commands.rs
index 6a32a7e..ece0782 100644
--- a/src/cli/commands.rs
+++ b/src/cli/commands.rs
@@ -80,7 +80,8 @@ static HELP_INFO: Lazy<Mutex<HashMap<Command, colored::ColoredString>>> = Lazy::
     Mutex::new(help_info)
 });
 
-pub fn handle_theme_command(args: &[String], log: &mut Logger) {
+pub fn handle_theme_command(args: &[String]) {
+    let mut log = Logger::console_log();
     match args.get(2) {
         Some(option) => {
             if let Some(value) = option.strip_prefix("--get=") {
@@ -94,7 +95,8 @@ pub fn handle_theme_command(args: &[String], log: &mut Logger) {
 }
 
 // 通过命令行传入的 args 参数打印 help 信息
-pub fn handle_help_command(args: &[String], log: &mut Logger) {
+pub fn handle_help_command(args: &[String]) {
+    let mut log = Logger::console_log();
     if let Some(option) = args.get(0) {
         let help = HELP_INFO.lock().unwrap();
         match Command::from_str(option) {
@@ -110,19 +112,23 @@ pub fn handle_help_command(args: &[String], log: &mut Logger) {
                 option
             )),
         }
+    } else {
+        log.error(format_args!(
+            "Lack of options! Available option: [init,theme,build]"
+        ))
     }
 }
 
-pub fn handle_init_command(_args: &[String], _log: &mut Logger) {
+pub fn handle_init_command(_args: &[String]) {
+    let mut log = Logger::console_log();
     unimplemented!()
 }
 
-pub fn handle_build_command(_args: &[String], log: &mut Logger) {
+pub fn handle_build_command(_args: &[String]) {
+    let mut log = Logger::console_log();
     match book::new_builder() {
-        Ok(builder) => match builder.render() {
-            Ok(_) => {
-                
-            }
+        Ok(mut builder) => match builder.render() {
+            Ok(_) => {}
             Err(err) => log.error(format_args!("{}", err)),
         },
         Err(err) => log.error(format_args!("{}", err)),
diff --git a/src/html/hypertext.rs b/src/html/hypertext.rs
index 0b1e63a..f5d4779 100644
--- a/src/html/hypertext.rs
+++ b/src/html/hypertext.rs
@@ -3,11 +3,13 @@ use std::{
     io::{self, Write}, path::Path,
 };
 
+use serde::{Deserialize, Serialize};
+
 use super::Markdown;
 
 // Define the HTML type
 // 部分 Markdown 已经转义好的内容
-#[derive(Debug)]
+#[derive(Debug, Serialize, Deserialize)]
 pub struct Hypertext {
     path: String,
     markdown: Markdown,
diff --git a/src/html/markdown.rs b/src/html/markdown.rs
index 43d7a2b..9701065 100644
--- a/src/html/markdown.rs
+++ b/src/html/markdown.rs
@@ -1,4 +1,5 @@
 use pulldown_cmark::{html, Options, Parser};
+use serde::{Deserialize, Serialize};
 use std::{
     fs::File,
     io::{self, Read},
@@ -6,7 +7,7 @@ use std::{
 };
 
 // Define the Markdown type
-#[derive(Debug)]
+#[derive(Debug, Serialize, Deserialize)]
 pub struct Markdown(String);
 
 impl Markdown {
diff --git a/src/html/template.rs b/src/html/template.rs
index 4f74b5b..882a33c 100644
--- a/src/html/template.rs
+++ b/src/html/template.rs
@@ -35,3 +35,7 @@ impl Template {
 pub fn render_to_html(_tmpl: Vec<Template>) {
     unimplemented!()
 }
+
+pub fn get_templates() -> Option<Vec<Template>> {
+    Some(vec![])
+}
diff --git a/src/main.rs b/src/main.rs
index d8be84d..debd83c 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,16 +1,14 @@
-use typikon::{cli::Command, utils::Logger};
+use typikon::cli::Command;
 
 fn main() {
-    // global logger ouput to console
-    let mut log = Logger::console_log();
     // deconstructing command line input to parameter information
     let (command, args) = typikon::cli::parse_args();
     // Match processing of the corresponding command
     match command {
-        Command::Init => typikon::cli::handle_init_command(&args, &mut log),
-        Command::Help => typikon::cli::handle_help_command(&args, &mut log),
-        Command::Build => typikon::cli::handle_build_command(&args, &mut log),
-        Command::Theme => typikon::cli::handle_theme_command(&args, &mut log),
+        Command::Init => typikon::cli::handle_init_command(&args),
+        Command::Help => typikon::cli::handle_help_command(&args),
+        Command::Build => typikon::cli::handle_build_command(&args),
+        Command::Theme => typikon::cli::handle_theme_command(&args),
         Command::Unknown(_) => typikon::cli::out_banner_string(),
     }
 }
diff --git a/src/utils/logger.rs b/src/utils/logger.rs
index 369c727..2a0eb02 100644
--- a/src/utils/logger.rs
+++ b/src/utils/logger.rs
@@ -5,6 +5,7 @@ use std::io::{self, Write};
 // DATE TIME Formmated
 const DATETIME_FORMAT: &str = "%Y/%m/%d %H:%M:%S";
 
+#[derive(Debug)]
 pub struct Logger {
     out: io::Stdout,
 }
diff --git a/tests/book/builder_test.rs b/tests/book/builder_test.rs
index d20434a..ceb1477 100644
--- a/tests/book/builder_test.rs
+++ b/tests/book/builder_test.rs
@@ -4,7 +4,20 @@ use typikon::book;
 fn test_new_builder() {
     match book::new_builder() {
         Ok(builder) => {
-            println!("{:?}", builder.engine);
+            for view in builder.engine.get_template_names() {
+                println!("{:?}",view);
+            }
+            assert!(true);
+        }
+        Err(_) => assert!(false),
+    }
+}
+
+#[test]
+fn test_new_builder_get_hypertext() {
+    match book::new_builder() {
+        Ok(mut builder) => {
+            println!("{:?}", &mut builder.get_chapters_hypertext());
             assert!(true);
         }
         Err(_) => assert!(false),
diff --git a/theme/typikon-theme/index.html b/theme/typikon-theme/index.html
index 8f52a0e..5988864 100644
--- a/theme/typikon-theme/index.html
+++ b/theme/typikon-theme/index.html
@@ -4,7 +4,15 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>MySQL 8.x 安装和配置</title>
+
+	<title>{{ book.title }}</title>
+	<meta name="description" content="{{ book.description }}" />
+	<meta name="keywords"
+		content="{{ book.keywords }}" />
+	<meta name="generator" content="{{ version }}" />
+	<meta name="template" content="typikon-theme" />
+
+
 	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
 	<link rel="stylesheet" href="assets/sidebars.css">
 	<!-- Light theme stylesheet -->
@@ -22,91 +30,22 @@
 				<div class="flex-shrink-0 p-2" style="width: 100%;">
 					<a href="#"
 						class="d-flex align-items-center justify-content-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
-						<span class="fs-4 fw-semibold">现在 Java 编程指南</span>
+						<span class="fs-4 fw-semibold">{{ book.title }}</span>
 					</a>
 					<ul class="list-unstyled ps-0">
+						<!-- 子章节目录结构，一个数组遍历渲染 -->
 						<li class="mb-1">
 							<a class="btn d-inline-flex align-items-center rounded border-0">
-								第一章：语言的历史
+								{book.chapter.title}
 							</a>
+							<!-- 每个子章节下面还有其他的文章 -->
 							<div class="collapse show" id="collapse1">
 								<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
 									<li><a href="#"
 											class="link-body-emphasis d-inline-flex text-decoration-none rounded">
-											MySQL 8.x 安装和配置
-										</a>
-									</li>
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
-									</li>
-								</ul>
-							</div>
-						</li>
-						<li class="mb-1">
-							<a class="btn d-inline-flex align-items-center rounded border-0">
-								第二章：开发基础环境搭建
-							</a>
-							<div class="collapse show" id="collapse2">
-								<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">
-											MySQL 8.x 安装和配置
-										</a>
-									</li>
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
-									</li>
-								</ul>
-							</div>
-						</li>
-						<li class="mb-1">
-							<a class="btn d-inline-flex align-items-center rounded border-0 ">
-								第三章：数据类型和结构化编程
-							</a>
-							<div class="collapse show" id="collapse3">
-								<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">
-											MySQL 8.x 安装和配置
-										</a>
-									</li>
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
-									</li>
-								</ul>
-							</div>
-						</li>
-						<li class="mb-1">
-							<a class="btn d-inline-flex align-items-center rounded border-0">
-								第四章：面向对象编程
-							</a>
-							<div class="collapse show" id="collapse4">
-								<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">
-											MySQL 8.x 安装和配置
+											{book.sub_chapters.title}
 										</a>
 									</li>
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
-									</li>
-								</ul>
-							</div>
-						</li>
-						<li class="mb-1">
-							<a class="btn d-inline-flex align-items-center rounded border-0">
-								第五章：标准库和新特性
-							</a>
-							<div class="collapse show" id="collapse4">
-								<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">
-											MySQL 8.x 安装和配置
-										</a>
-									</li>
-									<li><a href="#"
-											class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a>
-									</li>
 								</ul>
 							</div>
 						</li>
@@ -119,84 +58,7 @@
 
 			<div class="col-md-8 col-sm-12">
 				<div id="markdown-content">
-					<h3>MySQL 8.x 安装和配置</h3>
-					<p>在 MySQL 8.x 中引入了许多新特性和改进，包括 JSON 和 JavaScript 作为数据库查询语言，以及更好的性能和安全性。例如，在连接过程中出现的
-						<code>Public Key Retrieval is not allowed</code> 错误提示，这些都是新版本的特性。本文将记录在最新版本的 Ubuntu 中安装 MySQL
-						8.x 的完整过程。
-					</p>
-					<hr />
-					<h3>安装和配置</h3>
-					<p>在安装 MySQL 8.x 之前，可以先更新操作系统和软件包：</p>
-					<pre><code class="language-sh">sudo apt update &amp;&amp; apt upgrade -y
-</code></pre>
-					<p>更新完成后，可以执行以下命令来查找和安装 MySQL 8.x 软件包：</p>
-					<pre><code class="language-sh">sudo apt search mysql
-sudo apt install mysql-*
-</code></pre>
-					<p>安装完成后，使用 <code>sudo mysql_secure_installation</code> 初始化 root 用户的密码：</p>
-					<pre><code class="language-sh">sudo mysql_secure_installation
-</code></pre>
-					<p>如果需要允许远程用户访问 MySQL 服务器，可以修改配置文件 <code>/etc/mysql/mysql.conf.d/mysqld.cnf</code> 中的
-						<code>bind-address</code>，设置为 <code>0.0.0.0</code>：
-					</p>
-					<pre><code class="language-ini">bind-address = 0.0.0.0
-mysqlx-bind-address = 127.0.0.1
-</code></pre>
-					<p>然后可以为远程用户授予访问权限：</p>
-					<pre><code class="language-sql">GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED WITH mysql_native_password BY '新密码' WITH GRANT OPTION;
-</code></pre>
-					<hr />
-					<h3>解决安全连接问题</h3>
-					<p>在 MySQL 8.x 中，如果出现 <code>Public Key Retrieval is not allowed</code> 错误提示，可以执行以下命令来解决：</p>
-					<pre><code class="language-sql">ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '新密码';
-</code></pre>
-					<p>执行后，刷新授权表：</p>
-					<pre><code class="language-sql">flush privileges;
-</code></pre>
-					<p>最后，请确保允许服务器上的 <code>3306</code> 端口连接。</p>
-					<h2>列表示例</h2>
-					<ul>
-						<li>项目1</li>
-						<li>项目2
-							<ul>
-								<li>子项目1</li>
-								<li>子项目2</li>
-							</ul>
-						</li>
-					</ul>
-					<h2>插入普通图片</h2>
-					<p><img src="https://img.ibyte.me/470eor.jpg" alt="java" /></p>
-					<h2>引用示例</h2>
-					<blockquote>
-						<p>这是一个引用示例，可以包含多行文本和<strong>加粗</strong>文字。</p>
-					</blockquote>
-					<h2>表格示例</h2>
-					<table>
-						<thead>
-							<tr>
-								<th>姓名</th>
-								<th>年龄</th>
-								<th>城市</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td>Alice</td>
-								<td>25</td>
-								<td>北京</td>
-							</tr>
-							<tr>
-								<td>Bob</td>
-								<td>30</td>
-								<td>上海</td>
-							</tr>
-							<tr>
-								<td>Carol</td>
-								<td>28</td>
-								<td>广州</td>
-							</tr>
-						</tbody>
-					</table>
+					{book.page.content}
 				</div>
 			</div>
 		</div>