:pencil: Docs: 将使用文档迁移到 GitHub

1 files changed, 514 insertions, 0 deletions

diff --git a/docs/wiki.md b/docs/wiki.md
new file mode 100644
index 0000000..e114d4d
--- /dev/null
+++ b/docs/wiki.md
@@ -0,0 +1,514 @@
+# 使用文档
+
+>  文档基于主题最新版本，不考虑之前的版本差异，请您使用最新版。
+
+感谢您支持 Miracles 主题，这里是主题的使用手册，这能帮助你解决大部分的问题。
+
+## 📥 下载与安装
+
+Miracles 主题是为 [typecho](https://typecho.org) 设计的，首先你需要安装 typecho。
+
+### 主要步骤
+
+1. 在 GitHub 上 Star [Miracles 主题](https://github.com/BigCoke233/miracles)，这是必须的，因为 Miracles 是基于 SATA 协议的。
+2. 主题主要分为**开发版**和**发行版**，请根据情况选择下载使用（之后会详细介绍）
+3. 将主题文件放置于 usr/themes 目录下，确保文件夹名字为 **Miracles**
+4. 到后台（admin）的外观设置中启用 Miracles 主题
+5. 根据需求，在后台 - 外观 - 外观设置中对主题进行配置
+
+### 温馨提示
+
+你的博客最好是安装在站点的根目录下，不然某些功能无法正常使用（如：owo 和 lazyload）
+
+> **发行版**即为 GitHub 仓库里 release 里打包好的版本，比较稳定，推荐使用；但内容一般都经过了压缩打包，删除了大部分注释，不方便魔改或者二次开发，仅对正常使用比较友好。
+> **开发版**则为 GitHub 仓库展示的文件内容，是最新的，但不保证稳定性，尽管在 Commit 之前都有经过测试，但可能会有未被发现的 bug。开发版是完整的主题**源**码，没有压缩，对二次开发比较友好。
+
+### 下载主题
+
+以下是 Miracles 最新发行版（1.5.3）的下载链接，推荐使用。
+
+[Miracles.Ver.1.5.3.zip](https://github.com/BigCoke233/miracles/releases/download/1.5.3/Miracles.Ver.1.5.3.zip)
+
+<detail><summary>查看 Miracles 主题所有的历史版本</summary>
+
+**1.4.x 版本**
+
+[Miracles.Ver.1.4.3.zip](https://github.com/BigCoke233/miracles/releases/download/1.4.3/Miracles.Ver.1.4.3.zip)
+
+[Miracles.Ver.1.4.2.zip](https://github.com/BigCoke233/miracles/releases/download/1.4.2/Miracles.Ver.1.4.2.zip)
+
+[Miracles.Ver.1.4.1.zip](https://github.com/BigCoke233/miracles/releases/download/1.4.1/Miracles.Ver.1.4.1.zip)
+
+[Miracles.Ver.1.4.0.zip](https://github.com/BigCoke233/miracles/releases/download/1.4.0/Miracles.Ver.1.4.0.zip)
+
+**1.3.x 版本**
+
+[Miracles.Ver.1.3.2.zip](https://github.com/BigCoke233/miracles/releases/download/1.3.2/Miracles.Ver.1.3.2.zip)
+
+[Miracles.Ver.1.3.1.zip](https://github.com/BigCoke233/miracles/releases/download/1.3.1/Miracles.Ver.1.3.1.zip)
+
+[Miracles.Ver.1.3.0.zip](https://github.com/BigCoke233/miracles/releases/download/1.3.0/Miracles.Ver.1.3.0.zip)
+
+**1.2.x 版本**
+
+[Miracles.Ver.1.2.4.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.4/Miracles.Ver.1.2.4.zip)
+
+[Miracles.Ver.1.2.3.1.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.3.1/Miracles.Ver.1.2.3.1.zip)
+
+[Miracles.Ver.1.2.3.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.3/Miracles.Ver.1.2.3.zip)
+
+[Miracles.Ver.1.2.2.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.2/Miracles.Ver.1.2.2.zip)
+
+[Miracles.Ver.1.2.1.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.1/Miracles.Ver.1.2.1.zip)
+
+[Miracles.zip](https://github.com/BigCoke233/miracles/releases/download/1.2.0/Miracles.zip)
+
+所有版本的下载列表和更新日志请查看 [GitHub Release](https://github.com/BigCoke233/miracles/releases)
+
+</detail>
+
+### 版权声明
+
+主题基于 SATA 开源协议进行授权，所以使用前请 Star 本主题，这是最基本的。同时，SATA 协议本身基于 MIT 协议，所以在使用时你需要保留主题原本的版权信息，这些版权信息在页脚和 Console，以及各个静态文件都有，你都需要保留。如果主题引入了别的开源项目没有署名原作者，请告知我及时修正。
+
+如果你需要二次开发并发布新版本的主题，你需要署名原作者并提供原仓库链接，最好尝试联系我，至少让我知道。
+
+## ⚙️ 基础配置
+
+主题的设置面板在 typecho **控制台 - 外观 - 设置外观**中。
+
+安装后打开主题的设置面板，开始对主题进行一些个性的更改。
+
+### 站点信息
+
+这里主要填写你站点的基础信息，与 typecho 的设置不同，这里的设置**仅用于展示**，而不会影响 SEO。
+
+![images/QQ20200321145145.png](images/QQ20200321145145.png)
+
+**站点名称**和**站点介绍**都比较好理解，这里对**站点头像**这一项设置做一些说明：**站点头像**内所指定的图片只会输出在左侧抽屉栏和关于页面，评论区和说说页面的头像都是调用您的 gravatar；若这个设置项为空，则会直接调用 gravatar。
+
+**Gravatar - 全球公认的头像**，您可以在[这个网站](http://cn.gravatar.com/)上用您安装 typecho 时填写的邮箱注册账号并上传头像。
+
+<detail><summary>加速 gravatar 在国内的速度</summary>
+
+Gravatar 在国内很多地区的访问都十分缓慢，您可以将 gravatar 头像源修改为其他的镜像服务来改善速度，这里推荐 v2ex 的镜像。Typecho 并没有在控制台给出设置项，您需要手动修改代码。
+
+Typecho 根目录下的 config.inc.php，在文件最后添加一条：
+
+```php
+/** 定义 Gravatar 头像源 */
+define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
+```
+
+</detail>
+
+### 导航栏
+
+Miracles 内置了两种类型的导航栏供您选择，分别是**左侧抽屉栏**和**顶部导航栏**。
+
+**左侧抽屉栏**平时是隐藏的，只有在访问者点击左上角的按钮时才会从左侧抽出，能让访问者更加专注于文章内容；而**顶部导航栏**总是保持在页面顶部，会跟随访问者鼠标滚轮移动，但在访问者向下滑动时会收缩，向上滑动时会再次展开。
+
+![images/QQ20200321151919.png](images/QQ20200321151919.png)
+
+您可以根据自己的喜好来选择这两种导航栏，但他们无法同时使用。
+
+**顶部透明**这一项设置只适用于**顶部导航栏**，在使用左侧抽屉栏时启用不会有任何效果。启用后，当访问者的视口置于页面最顶端时，导航栏的背景会变为透明，滚轮向下滑会获得背景色。
+
+1.4.3 版本新增了自定义导航栏功能，可以根据需要自定义导航栏的内容，需要按照 json 格式书写，如下：
+
+```json
+[
+  {
+    "title": "关于",
+    "link": "https://yoursite.com/about.html"
+  },
+  {
+    "title": "友人",
+    "link": "https://yoursite.com/link.html"
+  },
+  {
+    "title": "归档",
+    "link": "https://yoursite.com/archive"
+  }
+]
+```
+
+注意，请不要使用相对路径（即使用完整的, 带协议头和域名的网址），不然 Pjax 可能会失效。
+
+外部链接会自动在新窗口打开；如果设置项留空则读取所有未被隐藏的独立页面。
+
+### 首页大图
+
+**首页大图**位于所有页面的顶部，它通常是一张较大的图片，仅展示。首页大图上方会显示你在之前设置的站点名称和站点介绍，靠左展示。
+
+![images/QQ20200321152106.png](images/QQ20200321152106.png)
+
+填入一个**图片 url** 来指定首页大图展示的图片，可以是绝对路径也可以是相对路径。
+
+如果您不了解绝对路径和相对路径，填写图片外链就好了。
+
+**字体颜色**只有黑色和白色可供选择。通常情况下，在有图片的时候使用白色就好；而不填写**图片 url** 时，背景色会是淡灰色（#f1f1f1），这个时候使用黑色。顺带一提，如果你设置了导航栏的**顶部透明**，这个设置项会影响导航栏透明时的颜色。
+
+**高度**的单位是 vh，如果你不理解，可以把这个高度当作百分数，只是没有 % 而已，例如：填写 50 的话，首页大图则会占据一个视口（即浏览器窗口中显示网页的部分）的一半。
+
+### Pjax 预加载
+
+Pjax 预加载可以加快页面的访问速度，并让访问更加流畅，提升用户体验
+
+![images/QQ20200321154231.png](images/QQ20200321154231.png)
+
+你只需要在 Pjax 预加载 - **是否开启**中开启，就可以启用 Pjax。
+
+**完成后执行事件**内写的一般是 Pjax 重载函数，主题的 js 都内置了重载函数所以你不用太操心。如果你安装了一些插件，可能会需要进行重载，不过插件的作者应该都会有说明。
+
+一些 js 在切换页面后会出现错误，这时候需要一段 js 在 pjax 完成切换之后将它们重新加载一遍。
+
+如果你使用了 Meting 插件，记得在**完成后执行事件**中写入 loadMeting();
+
+### 优化
+
+![images/Untitled.png](images/Untitled.png)
+
+开启 **CDN 加速加载静态资源**之后，大部分的 js 和 css 静态资源都会通过你选择 CDN 进行加载，主题内置的有 jsDelivr（国内速度快）和 GitHack（国内速度慢）。如果你使用的是**开发版**，请不要使用 jsDelivr，以免出现问题，但是 GitHack 一般不会有问题，除非你用的不是最新开发版，就是速度慢；如果你使用的是**发行版**，推荐使用 jsDelivr。
+如果你选择自定义，则会调用下一条设置内的链接，例如 `[https://cdn.xxxxxx.com/assets/](https://cdn.xxxxxx.com/assets/，这会调用所指向的这个目录下的静态资源，不过需要保证目录结构和主题的`/assets/`)`，这会调用所指向的这个目录下的静态资源，不过需要保证目录结构和主题的 `./assets/` 下的结构相同。
+
+**阅读时长提示**会根据文章的字数估计阅读需要的大致时间，并显示在每一篇文章之前。
+
+**自动分割中英文**默认是开启的，基于 `pangu.js`，会分割网页中的半角字符和全角字符，会把中文之间的 `.` 替换为 `。` 等等操作，如果不喜欢可以在这里关掉。
+
+### 个性化
+
+**个性化**设置能让你的博客变得更符合你的品味。
+
+![images/QQ20200321161814.png](images/QQ20200321161814.png)
+
+**哀悼模式**是在京阿尼失火的事故后被加入的，这会让整个网站变成黑白配色。
+
+**网站字体**是通过 Google Font 调用的，无衬线字体即为思源黑体，衬线字体即为思源宋体。
+
+**随机文章缩略图**通常是使用的主题 images/postbg 目录下的 1-20.jpg 图片，如果你不喜欢或是觉得加载较慢，你可以通过图片外链自定义，通常需要这样写：
+
+```php
+https://image.com/1.png,
+https://image.com/2.png,
+https://image.com/3.png,
+https://image.com/4.png,
+https://image.com/5.png
+```
+
+![images/Untitled%201.png](images/Untitled%201.png)
+
+**图片懒加载动画**是在图片加载完成之前显示的图片，目前有 4 种可供选择的懒加载动画，这里不提供预览，如果不喜欢列出的图片，可以选择“自定义”，但需要在 `./images/loading/` 目录下放入一个名为 `custom.gif` 的 GIF 图片。
+
+剩下的两个不做过多的解释，设置项下面的文字写得很明白。
+
+### 开发者设置
+
+这里的设置不是必须的，你可以根据需要写入 js 和 css，或是在 head 和 footer 自定义你想要的内容。例如 Google 统计代码、在网页中嵌入在线客服等等。
+
+## 🛒 自定义字段
+
+在编辑文章的时候你可能会用到自定义字段，下面介绍主题自带的字段，你只需要根据提示进行设置就可以了。用于关于页面和追番页面的自定义字段不会在这里提及，请查看**页面模板。**
+
+### 文章头图
+
+文章头图会显示在文章列表和文章内页里，作为文章的缩略图和封面。你需要填写一个图片外链，可以是上传自其他图床生成的外链，也可以是本地服务器上的文件。
+
+为了保障头图的最佳显示效果，最好使用 1000x600 的图片；更加详细的话，最好是 47:28 大小的图片
+
+![images/Untitled%202.png](images/Untitled%202.png)
+
+### 文章摘要
+
+用于自定义文章摘要，摘要只显示在首页的文章列表里，显示在文章卡片内的文章标题下，让用户提前阅读文章的前一段。如果这个设置项为空，则会自动读取文章前 130 字；如果填写内容，则会用你自定义的内容来代替这 130 字。
+
+为了保证显示效果，自定义的摘要不要太长也不要太短，可以用 `<br>` 来使摘要内容在页面中显示更加平衡。
+
+![images/Untitled%203.png](images/Untitled%203.png)
+
+### 元信息
+
+**元信息（Meta）**是显示在文章头图上以及首页文章卡片内的文章概要信息，它通常有文章分类 / 发布日期 / 评论数 / 被浏览数等信息，会被展示在不太起眼的地方，但是也是比较有用的东西。
+
+如果你不太喜欢他们，可以用这个设置项替换**显示在文章头图上的元信息**。
+
+![images/Untitled%204.png](images/Untitled%204.png)
+
+不用担心，替换元信息后，主题仍会统计页面的被浏览数，切换为默认元信息后这些数据会被显示
+
+## 🔖 短代码
+
+你只需要在文章/页面编辑器内按照相应的语法书写就好了。
+
+这些短代码能在你编辑页面或是攥写文章的时候帮助你。
+
+### 友情链接
+
+首先，所有的友情链接都需要放到 `Link Box` 里，通过下面的语法构造一个 `Link Box`。
+
+```markdown
+[links]
+······
+[/links]
+```
+
+所有的友链项目都需要按照以下的语法书写。
+
+```markdown
+<!-- 常规写法 -->
+[名字]{链接}(头像链接)+(简介)
+
+<!-- 如果是 1.3.2 以前的版本，则 -->
+[名字]{链接}(头像链接)
+```
+
+然后放进一个 `Link Box` 里。
+
+```markdown
+[links]
+[名字]{链接}(头像链接)+(简介)
+[名字]{链接}(头像链接)+(简介)
+[名字]{链接}(头像链接)+(简介)
+[/links]
+```
+
+注意，短代码里所有的链接都需要**转义**！
+
+```markdown
+<!-- 在特殊字符 / 之前加上 \ 进行转义 -->
+https:\/\/guhub.cn\/links.html
+<!-- Example -->
+[名字]{https:\/\/guhub.cn\/}(https:\/\/guhub.cn\/avatar.jpg)+(我是简介。)
+```
+
+如果你觉得转义比较麻烦，可以用 `!!!` 包裹短代码。
+
+```markdown
+!!!
+[links]
+[名字]{https://guhub.cn/}(https://guhub.cn/avatar.jpg)+(我是简介。)
+[名字]{https://guhub.cn/}(https://guhub.cn/avatar.jpg)+(我是简介。)
+[/links]
+!!!
+```
+
+---
+
+在 1.5.0 版本以后，友情链接支持通过 json 传递数据，只不过你需要一个现有的 `.json` 文件，而不能直接书写 json，语法如下。当然，这只是传递友链数据的**一种方式**。
+
+```markdown
+[links data="https://data.com/links.json"]
+```
+
+借助这个，你可以把你的友链数据存在 GitHub 然后通过 jsDelivr 调用，这样可以防止友链数据丢失，完全不用备份，在国内的速度也很不错。通常你要在 json 文件内写入 json 数组，如果你不理解，在主题 `./assets/` 目录下有一个名为 `linkData.sample.json` 的文件，是友链数据书写的示例。
+
+```json
+[
+  {
+    "name": "Eltrac", 
+	"link": "https://guhub.cn/", 
+	"avatar": "https://cdn.jsdelivr.net/gh/BigCoke233/image-hosting/avatars/avatar.jpeg", 
+	"des": "暗夜行路，终遇奇迹。"
+  },
+  {
+    "name": "Example", 
+	"link": "https://example.io/", 
+	"avatar": "https://cdn.jsdelivr.net/gh/BigCoke233/image-hosting/avatars/avatar.jpeg", 
+	"des": "这是一个示例。"
+  },
+  {
+    "name": "Example", 
+	"link": "https://example.io/", 
+	"avatar": "https://cdn.jsdelivr.net/gh/BigCoke233/image-hosting/avatars/avatar.jpeg", 
+	"des": "这是一个示例。"
+  },
+  {
+    "name": "Example", 
+	"link": "https://example.io/", 
+	"avatar": "https://cdn.jsdelivr.net/gh/BigCoke233/image-hosting/avatars/avatar.jpeg", 
+	"des": "这是一个示例。"
+  },
+  {
+    "name": "Example", 
+	"link": "https://example.io/", 
+	"avatar": "https://cdn.jsdelivr.net/gh/BigCoke233/image-hosting/avatars/avatar.jpeg", 
+	"des": "这是一个示例。"
+  }
+]
+```
+
+### Tip
+
+Tip 用作明显的提示，可以按照以下的语法书写。
+
+```markdown
+[tip]最普通的 Tip，颜色为 灰色（在 1.3.2 以前跟随 --theme-color）[/tip]
+[tip type="red"]颜色为 红色 的 Tip[/tip]
+[tip type="blue"]颜色为 蓝色 的 Tip[/tip]
+[tip type="yellow"]颜色为 黄色 的 Tip[/tip]
+[tip type="green"]颜色为 绿色 的 Tip[/tip]
+```
+
+你也可以尝试自定义 Tip 的颜色，在 Miracles 设置面板 - 开发者设置 - 自定义 CSS 中这样书写。
+
+```css
+.tip.TYPE {
+    border-left-color: 指定边框颜色;
+}
+.tip.TYPE .tip-icon {
+    color: 指定 i 图标颜色;
+}
+
+/* example */
+.tip.black {
+    border-left-color: #000;
+.tip.black .tip-icon {
+    color: #000;
+}
+```
+
+然后就可以这样使用自定义的 tip。
+
+```markdown
+[tip type="TYPE"]内容[/tip]
+<-- example -->
+[tip type="black"]内容[/tip]
+```
+
+这样可以把多个 Tip 连接起来，使他们排列更紧凑。
+
+```markdown
+[tip-group]
+[tip]最普通的 Tip[/tip]
+[tip type="red"]颜色为 红色 的 Tip[/tip]
+[tip type="blue"]颜色为 蓝色 的 Tip[/tip]
+[tip type="yellow"]颜色为 黄色 的 Tip[/tip]
+[tip type="green"]颜色为 绿色 的 Tip[/tip]
+[/tip-group]
+```
+
+### Ruby
+
+使用以下的语法，可以为文本注音。
+
+```
+蚊子的幼虫叫做{{孑孓:jie jue}}。
+```
+
+### Text Color
+
+使用以下的语法，自定义一段文本的前景色和背景色。
+
+```
+&{我是一段黑色字体黄色背景的文字|#000|yellow}
+&{你看不到我，你看不到我看不到我|#fff|transparent}
+&{我是一段天依色背景的大红色文字|rgb(255,0,0)|#66ccff}
+```
+
+### Keyboard (kbd)
+
+Markdown 原生语法并不支持 `<kbd>` ，Miracles 主题在 1.5.0 以后对 Markdown 语法进行了拓展，你可以通过以下语法来书写 `<kbd>` 标签，用来表示键盘上的按键。
+
+```markdown
+<!--现在可用的语法-->
+~Ctrl~
+<!--在开发版以及以后的版本中，将会使用以下语法-->
+[[Ctrl]]
+```
+
+### Notice
+
+用以下语法构建一个 notice 块，让文字更加醒目
+
+```markdown
+[notice]Make texts stand out.[/notice]
+```
+
+### Shadow
+
+在 shadow 容器里的图片会带上阴影
+
+```markdown
+[shadow]![](https://image.com/file.png)[/shadow]
+```
+
+## 📖 页面模板
+
+在您创建页面的时候，你可以在右侧选择一个模板。
+
+![images/QQ20200321174300.png](images/QQ20200321174300.png)
+
+接下来我会介绍 Miracles 每一个可使用的模板。
+
+### 归档页面
+
+**归档页面**会在前台列出你博客所有的文章以及标签，它们比起在首页文章列表显示的要更加紧凑，没有分页。无需设置，只需要选择归档页面，并发布，就可以了。
+
+### 关于页面
+
+选择**关于页面**模板会在页面内容的顶部加上你的头像，你也可以通过一些其他的设置来添加更多有用的东西。
+
+在编辑器底部添加自定义字段，按一下的方式命名并填写，就可以在头像后添加你的名字和各种社交链接。
+
+![images/about.png](images/about.png)
+
+你并不需要输入所有的字段，添加了哪些字段就会显示哪些。
+
+### 说说页面
+
+选择说说页面后直接发布，登陆后可以在前台输入内容发布，这样输入的内容就会显示在说说页面里。这是通过 typecho 自带的评论系统进行储存的，所以如果你想要删除一条说说，直接在后台管理评论即可。
+
+### 追番页面
+
+1. 创建一个 `独立页面`
+2. 选择 `自定义模板` 为 `追番界面`
+3. 添加 `自定义字段`
+    - `sessdata` 设置为 bilibili cookie中的sessdata字段
+    - `uid` 设置为您的bilibili uid
+4. 发布页面就可以了!
+
+**获取 SessData**
+
+如果是 Chrome：
+
+1. 打开**[bilibili.com](https://bilibili.com/)**
+2. 按下 `F12` 进入`开发者工具`
+3. 选择 `Application` 选项卡
+4. 在左边列表选择 Storage - Cookies - `https://www.bilibili.com`
+5. 在右边找到 `SESSDATA`, 复制里面的Value
+
+    ![https://user-images.githubusercontent.com/30862240/75745509-7b90a580-5d52-11ea-9f4b-df370788f518.png](https://user-images.githubusercontent.com/30862240/75745509-7b90a580-5d52-11ea-9f4b-df370788f518.png)
+
+如果是 FireFox：
+
+Firefox大同小异,只是在第三步时选择 `存储` 选项卡
+
+如果是 Microsoft Edge：
+
+目前 Edge 已经更换为 Chromium 内核,和Chrome操作一样
+
+**获取 UID**
+
+在登录状态下打开 **[https://space.bilibili.com](https://space.bilibili.com/)** 页面会跳转到 **[https://space.bilibili.com/你的uid](https://space.bilibili.com/%E4%BD%A0%E7%9A%84uid)** 直接取出即可
+
+***若发现追番页面的追番进度显示不正常，请尝试更新你的 SESSDATA**
+
+## 🚀 高级设置
+
+> 注意，以下所有的内容都未在正式版加入
+
+未来会加入高级设置的选项，但通常来说，高级设置不能直接通过后台设置，而是修改本地的某个 php 文件中的数组，这样做是为了减少后台的设置项数量，同时也加强 Miracles 主题的自定义性。并且，写在本地而并非数据库中的设置项调用起来会更加方便。
+
+### 语言包
+
+Miracles 正准备加入「语言包」功能，并已经在`/libs/lang/`目录下内置了简体中文、繁体中文、英语和~~萌语~~四种语言的数据，但目前尚未完善，也没有写入实际的功能。
+
+## 👁‍🗨 遇到问题
+
+如果遇到本文档无法解决的问题，不要着急，进行以下操作：
+
+1. 清除浏览器缓存和 CDN 缓存，然后再次重复之前的操作
+2. 检查你是否修改过源代码，如果有，还原代码试试
+3. 确认主题版本是否为最新版
+4. 看看在 GitHub 仓库的 issues 是否有类似的提问，作者是否回复
+5. 通过 QQ 或者 Email 联系作者，或者提出 issue
\ No newline at end of file