diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/block-list.json | 18 | ||||
| -rw-r--r-- | docs/block-list.md | 19 | ||||
| -rw-r--r-- | docs/change-log.md | 288 | ||||
| -rw-r--r-- | docs/images/QQ20200321145145.png | bin | 0 -> 40650 bytes | |||
| -rw-r--r-- | docs/images/QQ20200321151919.png | bin | 0 -> 23394 bytes | |||
| -rw-r--r-- | docs/images/QQ20200321152106.png | bin | 0 -> 26061 bytes | |||
| -rw-r--r-- | docs/images/QQ20200321154231.png | bin | 0 -> 24488 bytes | |||
| -rw-r--r-- | docs/images/QQ20200321161814.png | bin | 0 -> 34404 bytes | |||
| -rw-r--r-- | docs/images/QQ20200321174300.png | bin | 0 -> 6759 bytes | |||
| -rw-r--r-- | docs/images/Untitled 1.png | bin | 0 -> 69545 bytes | |||
| -rw-r--r-- | docs/images/Untitled 2.png | bin | 0 -> 4120 bytes | |||
| -rw-r--r-- | docs/images/Untitled 3.png | bin | 0 -> 4398 bytes | |||
| -rw-r--r-- | docs/images/Untitled 4.png | bin | 0 -> 5082 bytes | |||
| -rw-r--r-- | docs/images/Untitled.png | bin | 0 -> 78290 bytes | |||
| -rw-r--r-- | docs/images/about.png | bin | 0 -> 23800 bytes | |||
| -rw-r--r-- | docs/project-management.md | 61 | ||||
| -rw-r--r-- | docs/wiki.md | 525 |
17 files changed, 911 insertions, 0 deletions
diff --git a/docs/block-list.json b/docs/block-list.json new file mode 100644 index 0000000..63ba8aa --- /dev/null +++ b/docs/block-list.json @@ -0,0 +1,18 @@ +{ + "list": [ + { + "id": 1, + "name": "流情", + "domain": "liuqingwushui.top", + "ssl": false, + "reason": "删除主题版权信息" + }, + { + "id": 2, + "name": "华姐博客", + "domain": "blog.52-love.cn", + "ssl": true, + "reason": "修改主题版权信息" + } + ] +}
\ No newline at end of file diff --git a/docs/block-list.md b/docs/block-list.md new file mode 100644 index 0000000..e699e40 --- /dev/null +++ b/docs/block-list.md @@ -0,0 +1,19 @@ +# 封锁名单 + +## 说明 + +这些站点在使用 Miracles 主题时删除/修改了主题内的版权信息,违反了 MIT 协议,予以警告未改正。 +目前尚未对侵犯版权的网站进行任何功能上的限制和实质意义地惩罚,仅展示违规站点。 +但不排除会在未来限制或者停用违规用户的主题功能,请自重。 + +## 站点列表 + +- https://blog.52-love.cn (修改主题页脚版权信息,目前无法访问) +- http://liuqingwushui.top (删除主题页脚版权信息) + +## API +我准备了一个储存违规站点信息的 json 文件,可以通过以下的链接调用,为以后的惩罚功能做准备(微笑 + +``` +https://cdn.jsdelivr.net/gh/BigCoke233/miracles/docs/block-list.json +``` diff --git a/docs/change-log.md b/docs/change-log.md new file mode 100644 index 0000000..3ced322 --- /dev/null +++ b/docs/change-log.md @@ -0,0 +1,288 @@ +# 更新日志 +这里是 Miracles 主题的更新日志,每个发行版以及开发版的更新内容都会在这里记录,历史版本以及最新版本的下载请到 [Releases](https://github.com/BigCoke233/miracles/releases) 页面,若在使用中有任何问题,请在 issues 中提出或 Pull requests,感谢! + +## Ver.1.5.4 Your best nightmare + +- 增加:适配夜间模式的图标 +可在根目录下创建 faviconDark.ico,如果这个文件存在而系统又为深色模式的时候,就将 favicon 替换成这个文件 +- 优化:移动端下,追番项目一行显示两个 +- 优化:优化夜间模和日落模式 +- 优化:导航栏 :hover 毛玻璃效果优化 +- 移除:提交评论时小电视动画 + +## Ver.1.5.2 Slow Down + +- 增加:短链接 `[notice][/notice]`,相当于带有 role="note" 的 div +- 增加:短链接 `[shadow][/shadow]`,在这个容器里的图片都会带上阴影 +- 增加:加入 GitHack CDN 作为静态资源加速选择(实际上是减速x) +- 增加:小太提供的 9jojo CDN 作为静态资源加速选择 +- 增加:支持在设置中自定义 favicon +- 增加:支持设置是否开启顶部导航栏收缩 +- 增加:后台设置自动检测更新 +- 增加:支持图题解析 +- 优化:平滑的锚点动画 +- 优化:文章章节链接的锚点链接改为读取标题内容 +- 优化:部分未能通过 CDN 调用的静态文件通过选择的 CDN 调用 +- 优化:为 owo 表情提供单独的懒加载动画 +- 优化:为友情链接头像提供单独的懒加载动画 +- 优化:夜间模式下文章二维码的背景色 +- 优化:降低导航栏的透明度 +- 修复:CDN 加速静态资源中选用 GitHack https 失效 + +## Ver.1.5.1 Oops + +- 增加:支持自定义懒加载动画 +- 增加:能够自定义 CDN,并增加 GitHack 作为~~凑数~~备用 CDN +- 优化:移除无用的二维码 API 设置项 +- 优化:能够设置是否开启 Pangu.js 分割中英文 +- 优化:友情链接头像由 div 背景图改为 img 标签 +- 修复:建站时间无法正常输出 + +## Ver.1.5.0 To The Dream + +- 增加:Mac 风格代码块 +- 增加:支持日落模式 +- 增加:生成文章二维码,实现跨设备阅读 +- 增加:友情链接支持调用外部数据(json)(Helped by Kengwang) +- 增加:发送评论时的加载动画 +- 增加:拓展 Markdown 语法,支持 kbd 标签(~键盘按键~) +- 优化:页面内元素的 ARIA(即 Role 属性) +- 优化:每篇文章固定缩略图,刷新不改变(Done by outtimes) +- 优化:Snackbar 移动到中央(Done by outtimes) +- 优化:使用更加轻量的默认文章封面,减小体积(Done by outtimes) +- 优化:优化评论框样式 +- 优化:优化一些元素在夜间模式和日落模式下的显示 +- 优化:文章字数统计的输出判断 +- 优化:后台保存设置按钮移动到右侧固定 +- 优化:删除文章编辑页面无用的 CSS +- 优化:一些细节 +- 修复:夜间模式下文章头图分类链接文字颜色错误 +- 修复:选择左侧抽屉栏时报错 +- 修复:关于页面社交按钮邮箱无法直接点击打开 +- 修复:关于页面邮箱地址无法直接打开 +- 修复:哀悼模式设置项失效 +- 修复:背景图片不居中的问题(Done by sizau) +- 修复:后台设置无法备份 + +## Ver.1.4.3 Be gentle + +- 添加:可以自定义导航栏的项目 +- 优化:替换日间模式的图标 +- 优化:切换夜间模式时弹出更多的提示(包括自动切换) +- 优化:移除每个页面多余的 owo 容器 +- 优化:加密 js 版权信息 +- 优化:加入删除版权信息的惩罚 +- 修复:追番页面内含有无 ep 的番剧时报错(Done by kengwang) +- 修复:owo 表情在文章中排版错误 +- 修复:分享到 Twitter 时不显示图片 +- 修复:导航栏透明模式字体颜色的问题 +- 以及一些细节的优化 + +## Ver.1.4.2 Tasty + +- 增加:owo 表情,用短代码替换臃肿的 img 标签 +- 增加:后台编辑器添加 owo 表情按钮 +- 增加:后台设置自定义随机文章缩略图 +- 移除:`[bubble]`气泡短代码 +- 修复:文章有封面时,首页大图的超链接颜色为黑色 +- 修复:owo 表情在文章内占用了过多的边距 +- 修复:Pjax 跳转页面后,外部链接不在新窗口打开 +- 修复:左侧抽屉栏按钮失效 +- 修复:文章编辑器右侧 tab 样式错位 +- 修复:文章编辑器 slug 输入框 z-index 大于导航栏 +- 修复:非 https 无法加载追番图片(Done by kengwabg) +- 修复:js 某些报错 + +## Ver.1.4.1 Fine + +- 优化:移动端下,大图中文章元信息分两行显示 +- 优化:Text-Color 短代码不再需要用引号框柱文本 +- 优化:小屏幕下 Tip 不显示图标 +- 修复:使用抽屉栏控制台报错 +- 修复:移除未实现的自定义字段 +- 修复:首页大图背景色在某些情况下失效 +- 修复:后台设置项分割线混乱 + +## Ver.1.4.0 Smooth + +- 增加:Ajax 评论无刷新(Done by ohmyga) +- 增加:增加:追番页面(Done by kengwang, styled by Eltrac) +- 优化:alertSend() 样式更改 +- 优化:取消首页大图背景色设置 +- 优化:卡片阴影减淡 +- 优化:取消回复按钮样式 +- 优化:移除前台设置面板 +- 优化:移除夜间模式在 PHP 层的判断 +- 优化:细化顶部导航毛玻璃效果 +- 优化:评论人链接新窗口打开 +- 优化:全站外部链接新窗口打开 +- 修复:后台哀悼模式失效 +- 修复:评论框不跟随(Done by ohmyga) +- 修复:夜间模式下评论框文字黑色 +- 修复:评论区气泡尖角缺失 +- 修复:代码块左侧多余边距 +- 修复:Twitter 分享图片未定义 + +## Ver.1.3.2 Jesus! +- 增加:章节链接 +- 优化:文章中一些元素的样式 +- 优化:后台撰写/编辑文章页面的样式 +- 优化:可以自定义抽屉栏和关于页面的头像链接了 +- 优化:取消 var(--theme-color) 在页面中的应用 +- 优化:顶部导航栏根据鼠标滑动方向显示/隐藏 +- 修复:一些环境下编辑页面后,页面消失 +- 修复:typecho 原生编辑器在小屏幕上按钮显示不完整 +- 修复:说说页面发布按钮样式错误 + +## Ver.1.3.1 Dumb Fix +- 优化:只能使用[名称]{链接}(头像)+(简介)添加友链 +- 优化:删除评论数量统计的繁琐文字(None=>0, Only 1=>1) +- 优化:评论区某些元素的边距和响应式设计 +- 优化:优化部分样式 +- 修复:部分新增元素在夜间模式下显示不正常 +- 修复:友情链接阴影错位 + +## Ver.1.3.0 New Age +- 增加:文章阅读时长提示 +- 增加:文章分享功能 +- 增加:文章底部弹出式版权信息 +- 增加:登陆后提供显眼的进入后台按钮 +- 增加:说说页面 +- 增加:友情链接支持添加简介 +- 增加:建站时间,可在后台设置 +- 增加:可设置隐藏评论列表 +- 增加:新的短代码 —— ruby 和自定义字体颜色 +- 优化:可以设置顶部导航栏在顶部是否透明 +- 优化:即使页面不显示浏览次数,仍然统计 +- 优化:自动生成 CDN 引用,减小体积 +- 优化:文章卡片,PC 端和移动端合并 +- 优化:多个懒加载动画供选择 +- 优化:根据 MacOS/IOS 系统切换夜间模式 +- 优化:设置面板样式 +- 优化:搜索/标签/分类页面与首页一致 +- 优化:一些细节调整 +- 优化:重写了评论区样式 +- 优化:优化了评论区的提示信息 +- 优化:回复时 @ 上级评论人 +- 优化:修改 alertSend 的输出方式和样式,取消 auto 参数和手动关闭 +- 移除:内置 Live2D +- 移除:独立页面文章时效性警告,文章仍然显示 +- 移除:首页公告功能 + +## Ver.1.2.4 Delicate +- 新增:Tip Group 新的短代码([tip-group][/tip-group]把[tip]们连起来) +- 新增:顶部导航栏毛玻璃效果 +- 新增:可以设置首页大图的背景色了(方便某些懒得找图的懒人 +- 新增:可以修改首页大图的字体颜色了(黑/白) +- 新增:文章浏览次数,仅在文章/页面内页显示 +- 优化:鼠标悬浮至文章元信息图标时,显示详细信息 +- 优化:默认字体改为 100%(最小) +- 优化:左侧抽屉栏滑出速度加快(0.4s) +- 优化:某些细节的调整 +- 优化:返回顶部在接近页面顶部时不显示 +- 优化:首页大图图片居中 +- 修复:文章缩略图底部超出文章卡片 + +## Ver.1.2.3 Peace After Exploding +- 修复:代码行号错误(in Ver.1.2.3.1 Myopia glasses) +- 添加:自定义元信息 +- 添加:根据时间判断夜间模式(Beta) +- 优化:文章卡片在平板电脑上的显示 +- 优化:固定文章卡片高度为 280px +- 优化:archive(搜索/标签/分类页)的样式 +- 优化:尽力压缩图片体积 +- 修复:单行代码块不显示行号 +- 修复:移动端不显示自定义摘要 +- 修复:搜索按钮错位 + +## Ver.1.2.2 Goodbye +- 添加:Pjax 淡入动画 +- 添加:更换代码高亮引擎为hightlight.js +- 优化:下拉面板(搜索/登录)开启或关闭时,页面不会因为滚动条而抖动 +- 优化:子评论左侧对齐 +- 优化:themeInit()方法强制替换设置项,用Helper::options()方法替代查询数据库 +- 优化:未指定语言的代码块显示 +- 修复:代码块第一行最前方会有间隙 +- 修复:夜间模式下,文章标签显示有问题 +- 移除:压缩 html(因为时间不够了 2333) + +## Ver.1.2.1 Clear +- 添加:`alertSend()`有一个新参数 auto (boolean),决定弹出框是否自动关闭 +- 添加:控制台输出版权信息 +- 添加:密码保护文章的表单样式 +- 优化:左侧抽屉栏的自适应和样式微调 +- 优化:调整滚动条粗细,现在能被清楚地看到了 +- 优化:复制文本后弹出的版权提示能够自动关闭了 +- 优化:展开抽屉栏后,点击遮罩层就能关闭 +- 优化:舍弃 onclick 属性,改用事件监听器 +- 优化:移动端,页面跳转完毕后导航栏才会收起 +- 优化:只有首页才会弹出公告提示 +- 优化:压缩 html 页面 +- 移除:左侧抽屉栏的搜索框 +- 移除:是否固定导航栏设置 +- 移除:后台公告 +- 移除:说说功能(之后调整好可能会回归) +- 调整:加载 Live2D 的语句移动到 `l2dwidget.min.js` +- 修复:禁止滑动后自动返回顶部 +- 修复:一些元素在夜间模式下未正常显示 +- 修复:未使用 Live2D 时,控制台报错 +- 修复:没有评论的页面找不到 owo 容器,导致控制台报错 + +## Ver.1.2.0 Sky's Mirages +- 添加:前台设置面板 +- 添加:内置两只可调戏的猫咪(https://www.jianshu.com/p/57a4deab12cc) +- 添加:文章编写时间超过 90 天,显示“可能过期”的提示 +- 添加:左侧抽屉栏,可与顶部导航栏进行切换 +- 添加:关于页面自定义模板,支持社交按钮 +- 添加:进站公告提示 +- 添加:用户复制内容后,弹出信息提醒保留版权信息 +- 添加:自定义提示信息,用`alertSend("内容")`召唤信息栏 +- 优化:Cookies 储存夜间模式 +- 优化:全局自动分离英文/半角字符和中文,优化阅读体验(Pangu.js) +- 优化:代码块最高高度为 80vh(屏幕高度的 80%) +- 修复:文字卡片标题部分字母下半部分显示不完整 +- 修复:代码块行号不对齐 +- 修复:友链盒子两端未对齐 +- 修复:一些元素在夜间模式下未正常显示 +- 修复:CDN 静态资源加速启用后 css 及 js 404 + +## Ver.1.1.2 Preheat +- 新增:可以在后台开启 CDN 静态资源加速(调用 JSdelivr) +- 新增:“哀悼模式”,将网站变为黑白,Pray for 京阿尼 +- 新增:可以在后台切换 无衬线字体/衬线字体(调用 Google Fonts) +- 新增:备份模板设置项功能(来自[QQ爹](https://qqdie.com)) +- 新增:额外的 10 张随机缩略图 +- 优化:分离主题设置(Options.php)和其他函数(functions.php) +- 优化:评论内容在不同分辨率下不同的字体大小 +- 优化:Meting 插件播放器在夜间模式下的显示 +- 优化:文章缩略图容易重复的问题 +- 优化:设置项分类+船新的设置页面样式 +- 修复:自定义 CSS 重复输出 +- 修复:之前更新一直没有修改版本号的问题 + +## Ver.1.1.1 The Kids Are Alright +- 修复:博主评论的子评论全部变成蓝色背景标识的 BUG +- 修复:Meting 插件无法正常解析的问题 +- 修复:评论分页样式缺失的 BUG +- 修复:说说页面夜间模式下显示的问题 +- 修复:Pjax 跳转后无法进行登录(其实就是给了个刷新提示而已233) +- 修复:小屏幕上子评论被挤成一条的问题(虽然还是丑得不能看) +- 修复:回复评论会激活 Pjax 导致返回顶部的问题 +- 优化:规范了代码结构 + +## Ver.1.1.0 Various Ways +- 新增:图片懒加载功能 +- 新增:“说说/动态”页面 +- 新增:一些便于排版的短代码(稍后更新 WIKI) +- 新增:支持自定义文章摘要 +- 优化:分离移动端和电脑端导航栏 +- 优化:一些元素在夜间模式下的显示 +- 优化:船新的评论区样式 +- 优化:分离夜间模式 CSS 文件 +- 优化:现在 OwO 表情不会被压扁了 +- 优化:细调了某些元素的样式 +- 修复:呼出 FancyBox 自动返回顶部 + +## Ver.1.0.0 Set Sail! + +> 这里是梦开始的地方 diff --git a/docs/images/QQ20200321145145.png b/docs/images/QQ20200321145145.png Binary files differnew file mode 100644 index 0000000..b48fc8d --- /dev/null +++ b/docs/images/QQ20200321145145.png diff --git a/docs/images/QQ20200321151919.png b/docs/images/QQ20200321151919.png Binary files differnew file mode 100644 index 0000000..2eb5006 --- /dev/null +++ b/docs/images/QQ20200321151919.png diff --git a/docs/images/QQ20200321152106.png b/docs/images/QQ20200321152106.png Binary files differnew file mode 100644 index 0000000..3953f08 --- /dev/null +++ b/docs/images/QQ20200321152106.png diff --git a/docs/images/QQ20200321154231.png b/docs/images/QQ20200321154231.png Binary files differnew file mode 100644 index 0000000..872f121 --- /dev/null +++ b/docs/images/QQ20200321154231.png diff --git a/docs/images/QQ20200321161814.png b/docs/images/QQ20200321161814.png Binary files differnew file mode 100644 index 0000000..c9a29d4 --- /dev/null +++ b/docs/images/QQ20200321161814.png diff --git a/docs/images/QQ20200321174300.png b/docs/images/QQ20200321174300.png Binary files differnew file mode 100644 index 0000000..a2ef10b --- /dev/null +++ b/docs/images/QQ20200321174300.png diff --git a/docs/images/Untitled 1.png b/docs/images/Untitled 1.png Binary files differnew file mode 100644 index 0000000..7bc3219 --- /dev/null +++ b/docs/images/Untitled 1.png diff --git a/docs/images/Untitled 2.png b/docs/images/Untitled 2.png Binary files differnew file mode 100644 index 0000000..3bd1c4f --- /dev/null +++ b/docs/images/Untitled 2.png diff --git a/docs/images/Untitled 3.png b/docs/images/Untitled 3.png Binary files differnew file mode 100644 index 0000000..079f612 --- /dev/null +++ b/docs/images/Untitled 3.png diff --git a/docs/images/Untitled 4.png b/docs/images/Untitled 4.png Binary files differnew file mode 100644 index 0000000..51198ed --- /dev/null +++ b/docs/images/Untitled 4.png diff --git a/docs/images/Untitled.png b/docs/images/Untitled.png Binary files differnew file mode 100644 index 0000000..9a59866 --- /dev/null +++ b/docs/images/Untitled.png diff --git a/docs/images/about.png b/docs/images/about.png Binary files differnew file mode 100644 index 0000000..d96e250 --- /dev/null +++ b/docs/images/about.png diff --git a/docs/project-management.md b/docs/project-management.md new file mode 100644 index 0000000..af1444a --- /dev/null +++ b/docs/project-management.md @@ -0,0 +1,61 @@ +# 项目管理 + +这篇文档记录一些 Miracles 主题在更新维护过程中一些不成文的习惯,写在文档里当作一种规范。 + +## Commit + +在提交 commit 的时候,需要书写 message,通常来说,Miracles 主题所有的 commit message 都应该按照一下格式书写 + +``` +:emoji: <sign>: <summary> +``` + +这里面提到的几个部分不太好直接理解,以下是对他们的解释 + +- `:emoji:`:就是 emoji 字符,应选用和这个 commit 内容有关的 emoji,但主要是为了美观(以 [gitmoji](https://gitmoji.carloscuesta.me/) 为规范) +- `<sign>`:这个 sign 用来提醒用户这个 commit 更新了什么类型的内容,通常用一下的字符替换 + - `Add`:顾名思义,用在添加新内容/功能的 commit 里 + - `Perf`:这是 perfect 的缩写,通常用于对现有功能进行优化的 commit 里 + - `Del`:即 Delete,表示移除了某些内容 + - `Docs`:即 Documents,表示对某些文档进行了修改,不涉及主体代码 + - `Update`:用于一些无法被归类的 commit,例如:修改版本号 +- `<summary>`:意为总结,就是对更新的内容进行简短的阐述,作为摘要 + +例子:`📐 Perf: 优化了文章盒子的边距` + +这就是一个普通 commit message 的组成,通常只适用于 message 的 header 部分,body 部分是可有可无的,除非你觉得 header 无法完整地表达这次 commit 更新的内容, +就可以在 body 里对这次更新内容进行详细地阐述,没有固定的格式,表述清楚即可。 + +## 版本号 + +如果你仔细观察 Miracles 主题的 release 页面,或者是每个版本的更新日志,你会看到它们通常是这样的 + +``` +:emoji: Ver.<version_num> <name> +``` + +- `:emoji`:就是 emoji 字符,通常选用和这次更新**主题**相关的 emoji +- `<version_num>`:版本号,发行版和开发版的版本号有区别 + - 发行版:通常只有发行版才会有正式的版本号,类似`1.5.2`,`1` 增加代表一次超大更新(几乎重写的那种吧),`5`增加代表一次大更新(增加了许多新功能),`2`增加代表补丁这样的小更新(通常只有修复和优化) + - 开发版:开发版的版本号通常以`v`开头,之后是日期,如果这一天有多次开发版更新,则用`A-Z`来区分,例如:`v20200503A`、`v20191223B` +- `<name>`:这个版本的名字,一般是根据更新内容和这次更新的主题来命名 + +> 通常来说,开发版的更新不会写入正式的更新日志(change-log.md) + +## issue + +Miracles 主题有三个自带的 issue 模板,分别是: + +- 问题报告(label:问题) +- 想法建议(label:优化) +- 需要帮助(label:求助) + +正常来说,这三个模板能满足大多数人的要求,并且如果他们按照模板书写 issue 会让开发者更方便。 + +满足以下条件的 issue,会被 close: + +- 问题已被完美解决(label:解决) +- 问题根本不存在(label:错误) +- 这个想法没有必要(label:拒绝) +- 存在相同的内容(label:重复) + diff --git a/docs/wiki.md b/docs/wiki.md new file mode 100644 index 0000000..d96d840 --- /dev/null +++ b/docs/wiki.md @@ -0,0 +1,525 @@ +# 使用文档 + +> 文档基于主题最新版本,不考虑之前的版本差异,请您使用最新版。 + +感谢您支持 Miracles 主题,这里是主题的使用手册,这能帮助你解决大部分的问题。 + +**目录** + +- [📥 下载与安装](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#-%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85) + - [主要步骤](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E4%B8%BB%E8%A6%81%E6%AD%A5%E9%AA%A4) + - [温馨提示](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E6%B8%A9%E9%A6%A8%E6%8F%90%E7%A4%BA) + - [下载主题](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E4%B8%8B%E8%BD%BD%E4%B8%BB%E9%A2%98) + - [版权声明](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E6%B8%A9%E9%A6%A8%E6%8F%90%E7%A4%BA) +- [⚙️ 基础配置](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%EF%B8%8F-%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE) + - [站点信息](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E7%AB%99%E7%82%B9%E4%BF%A1%E6%81%AF) + - [导航栏](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%AF%BC%E8%88%AA%E6%A0%8F) + - [首页大图](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E9%A6%96%E9%A1%B5%E5%A4%A7%E5%9B%BE) + - [Pjax](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#pjax-%E9%A2%84%E5%8A%A0%E8%BD%BD) + - [优化](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E4%BC%98%E5%8C%96) + - [个性化](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E4%B8%AA%E6%80%A7%E5%8C%96) + - [开发者设置](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%BC%80%E5%8F%91%E8%80%85%E8%AE%BE%E7%BD%AE) +- [🛒 自定义字段](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E6%AE%B5) + - [文字头图](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E6%96%87%E7%AB%A0%E5%A4%B4%E5%9B%BE) + - [文章摘要](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E6%96%87%E7%AB%A0%E6%91%98%E8%A6%81) + - [元信息](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%85%83%E4%BF%A1%E6%81%AF) +- [🔖 短代码](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#-%E7%9F%AD%E4%BB%A3%E7%A0%81) + - [友情链接](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5) + - [Tip](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#tip) + - [Ruby](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#ruby) + - [Text Color](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#text-color) + - [Keyboard (kbd)](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#keyboard-kbd) + - [Notice](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#notice) + - [Shadow](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#shadow) + - [Details](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#details) +- [📖 页面模板](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#-%E9%A1%B5%E9%9D%A2%E6%A8%A1%E6%9D%BF) + - [归档页面](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%BD%92%E6%A1%A3%E9%A1%B5%E9%9D%A2) + - [关于页面](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E5%85%B3%E4%BA%8E%E9%A1%B5%E9%9D%A2) + - [说说页面](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E8%AF%B4%E8%AF%B4%E9%A1%B5%E9%9D%A2) + - [追番页面](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#%E8%BF%BD%E7%95%AA%E9%A1%B5%E9%9D%A2) +- [🚀 高级设置](https://github.com/BigCoke233/miracles/blob/master/docs/wiki.md#-%E9%AB%98%E7%BA%A7%E8%AE%BE%E7%BD%AE) + +## 📥 下载与安装 + +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.4.zip](https://github.com/BigCoke233/miracles/releases/download/1.5.4/Miracles.Ver.1.5.4.zip) + +### 版权声明 + +主题基于 SATA 开源协议进行授权,所以使用前请 Star 本主题,这是最基本的。同时,SATA 协议本身基于 MIT 协议,所以在使用时你需要保留主题原本的版权信息,这些版权信息在页脚和 Console,以及各个静态文件都有,你都需要保留。如果主题引入了别的开源项目没有署名原作者,请告知我及时修正。 + +如果你需要二次开发并发布新版本的主题,你需要署名原作者并提供原仓库链接,最好尝试联系我,至少让我知道。 + +## ⚙️ 基础配置 + +主题的设置面板在 typecho **控制台 - 外观 - 设置外观**中。 + +安装后打开主题的设置面板,开始对主题进行一些个性的更改。 + +### 站点信息 + +这里主要填写你站点的基础信息,与 typecho 的设置不同,这里的设置**仅用于展示**,而不会影响 SEO。 + + + +**站点名称**和**站点介绍**都比较好理解,这里对**站点头像**这一项设置做一些说明:**站点头像**内所指定的图片只会输出在左侧抽屉栏和关于页面,评论区和说说页面的头像都是调用您的 gravatar;若这个设置项为空,则会直接调用 gravatar。 + +**Gravatar - 全球公认的头像**,您可以在[这个网站](http://cn.gravatar.com/)上用您安装 typecho 时填写的邮箱注册账号并上传头像。 + +<details><summary>加速 gravatar 在国内的速度</summary> + +Gravatar 在国内很多地区的访问都十分缓慢,您可以将 gravatar 头像源修改为其他的镜像服务来改善速度,这里推荐 v2ex 的镜像。Typecho 并没有在控制台给出设置项,您需要手动修改代码。 + +Typecho 根目录下的 config.inc.php,在文件最后添加一条: + +```php +/** 定义 Gravatar 头像源 */ +define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/'); +``` + +</details> + +### 导航栏 + +Miracles 内置了两种类型的导航栏供您选择,分别是**左侧抽屉栏**和**顶部导航栏**。 + +**左侧抽屉栏**平时是隐藏的,只有在访问者点击左上角的按钮时才会从左侧抽出,能让访问者更加专注于文章内容;而**顶部导航栏**总是保持在页面顶部,会跟随访问者鼠标滚轮移动,但在访问者向下滑动时会收缩,向上滑动时会再次展开。 + + + +您可以根据自己的喜好来选择这两种导航栏,但他们无法同时使用。 + +**顶部透明**这一项设置只适用于**顶部导航栏**,在使用左侧抽屉栏时启用不会有任何效果。启用后,当访问者的视口置于页面最顶端时,导航栏的背景会变为透明,滚轮向下滑会获得背景色。 + +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 可能会失效。 + +外部链接会自动在新窗口打开;如果设置项留空则读取所有未被隐藏的独立页面。 + +### 首页大图 + +**首页大图**位于所有页面的顶部,它通常是一张较大的图片,仅展示。首页大图上方会显示你在之前设置的站点名称和站点介绍,靠左展示。 + + + +填入一个**图片 url** 来指定首页大图展示的图片,可以是绝对路径也可以是相对路径。 + +如果您不了解绝对路径和相对路径,填写图片外链就好了。 + +**字体颜色**只有黑色和白色可供选择。通常情况下,在有图片的时候使用白色就好;而不填写**图片 url** 时,背景色会是淡灰色(#f1f1f1),这个时候使用黑色。顺带一提,如果你设置了导航栏的**顶部透明**,这个设置项会影响导航栏透明时的颜色。 + +**高度**的单位是 vh,如果你不理解,可以把这个高度当作百分数,只是没有 % 而已,例如:填写 50 的话,首页大图则会占据一个视口(即浏览器窗口中显示网页的部分)的一半。 + +### Pjax 预加载 + +Pjax 预加载可以加快页面的访问速度,并让访问更加流畅,提升用户体验 + + + +你只需要在 Pjax 预加载 - **是否开启**中开启,就可以启用 Pjax。 + +**完成后执行事件**内写的一般是 Pjax 重载函数,主题的 js 都内置了重载函数所以你不用太操心。如果你安装了一些插件,可能会需要进行重载,不过插件的作者应该都会有说明。 + +一些 js 在切换页面后会出现错误,这时候需要一段 js 在 pjax 完成切换之后将它们重新加载一遍。 + +如果你使用了 Meting 插件,记得在**完成后执行事件**中写入 loadMeting(); + +### 优化 + + + +开启 **CDN 加速加载静态资源**之后,大部分的 js 和 css 静态资源都会通过你选择 CDN 进行加载,主题内置的有 jsDelivr(国内速度快)和 GitHack(国内速度慢)。如果你使用的是**开发版**,请不要使用 jsDelivr,以免出现问题,但是 GitHack 一般不会有问题,除非你用的不是最新开发版,就是速度慢;如果你使用的是**发行版**,推荐使用 jsDelivr。 +如果你选择自定义,则会调用下一条设置内的链接,例如 `[https://cdn.xxxxxx.com/assets/](https://cdn.xxxxxx.com/assets/,这会调用所指向的这个目录下的静态资源,不过需要保证目录结构和主题的`/assets/`)`,这会调用所指向的这个目录下的静态资源,不过需要保证目录结构和主题的 `./assets/` 下的结构相同。 + +**阅读时长提示**会根据文章的字数估计阅读需要的大致时间,并显示在每一篇文章之前。 + +**自动分割中英文**默认是开启的,基于 `pangu.js`,会分割网页中的半角字符和全角字符,会把中文之间的 `.` 替换为 `。` 等等操作,如果不喜欢可以在这里关掉。 + +### 个性化 + +**个性化**设置能让你的博客变得更符合你的品味。 + + + +**哀悼模式**是在京阿尼失火的事故后被加入的,这会让整个网站变成黑白配色。 + +**网站字体**是通过 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 +``` + + + +**图片懒加载动画**是在图片加载完成之前显示的图片,目前有 4 种可供选择的懒加载动画,这里不提供预览,如果不喜欢列出的图片,可以选择“自定义”,但需要在 `./images/loading/` 目录下放入一个名为 `custom.gif` 的 GIF 图片。 + +剩下的两个不做过多的解释,设置项下面的文字写得很明白。 + +### 开发者设置 + +这里的设置不是必须的,你可以根据需要写入 js 和 css,或是在 head 和 footer 自定义你想要的内容。例如 Google 统计代码、在网页中嵌入在线客服等等。 + +## 🛒 自定义字段 + +在编辑文章的时候你可能会用到自定义字段,下面介绍主题自带的字段,你只需要根据提示进行设置就可以了。用于关于页面和追番页面的自定义字段不会在这里提及,请查看**页面模板。** + +### 文章头图 + +文章头图会显示在文章列表和文章内页里,作为文章的缩略图和封面。你需要填写一个图片外链,可以是上传自其他图床生成的外链,也可以是本地服务器上的文件。 + +为了保障头图的最佳显示效果,最好使用 1000x600 的图片;更加详细的话,最好是 47:28 大小的图片 + + + +### 文章摘要 + +用于自定义文章摘要,摘要只显示在首页的文章列表里,显示在文章卡片内的文章标题下,让用户提前阅读文章的前一段。如果这个设置项为空,则会自动读取文章前 130 字;如果填写内容,则会用你自定义的内容来代替这 130 字。 + +为了保证显示效果,自定义的摘要不要太长也不要太短,可以用 `<br>` 来使摘要内容在页面中显示更加平衡。 + + + +### 元信息 + +**元信息(Meta)**是显示在文章头图上以及首页文章卡片内的文章概要信息,它通常有文章分类 / 发布日期 / 评论数 / 被浏览数等信息,会被展示在不太起眼的地方,但是也是比较有用的东西。 + +如果你不太喜欢他们,可以用这个设置项替换**显示在文章头图上的元信息**。 + + + +不用担心,替换元信息后,主题仍会统计页面的被浏览数,切换为默认元信息后这些数据会被显示 + +## 🔖 短代码 + +你只需要在文章/页面编辑器内按照相应的语法书写就好了。 + +这些短代码能在你编辑页面或是攥写文章的时候帮助你。 + +### 友情链接 + +首先,所有的友情链接都需要放到 `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][/shadow] +``` + +### Details + +> 目前 Details 仅支持`v20200530A`(开发版)及以后的版本,未在正式版中加入 + +用以下的语法快速写入 details 标签,创造一个下拉框,主题已借助 js 垫片优化了 details 标签的兼容性 + +```markdown +[details sum="标题"]内容[/details] +``` + +## 📖 页面模板 + +在您创建页面的时候,你可以在右侧选择一个模板。 + + + +接下来我会介绍 Miracles 每一个可使用的模板。 + +### 归档页面 + +**归档页面**会在前台列出你博客所有的文章以及标签,它们比起在首页文章列表显示的要更加紧凑,没有分页。无需设置,只需要选择归档页面,并发布,就可以了。 + +### 关于页面 + +选择**关于页面**模板会在页面内容的顶部加上你的头像,你也可以通过一些其他的设置来添加更多有用的东西。 + +在编辑器底部添加自定义字段,按一下的方式命名并填写,就可以在头像后添加你的名字和各种社交链接。 + + + +你并不需要输入所有的字段,添加了哪些字段就会显示哪些。 + +### 说说页面 + +选择说说页面后直接发布,登陆后可以在前台输入内容发布,这样输入的内容就会显示在说说页面里。这是通过 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 + +  + +如果是 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/`目录下内置了简体中文、繁体中文、英语和~~萌语~~四种语言的数据,但目前尚未完善,也没有写入实际的功能。 + +### faviconDark + +在系统夜间模式下,一些浏览器的外观也会变成深色,这个时候一些深色的 favicon 就会显得很违和,你可以在你的网站根目录下创建一个名为 `faviconDark.ico` 的文件来作为深色模式下显示的 favicon + +## 👁🗨 遇到问题 + +如果遇到本文档无法解决的问题,不要着急,进行以下操作: + +1. 清除浏览器缓存和 CDN 缓存,然后再次重复之前的操作 +2. 检查你是否修改过源代码,如果有,还原代码试试 +3. 确认主题版本是否为最新版 +4. 看看在 GitHub 仓库的 issues 是否有类似的提问,作者是否回复 +5. 通过 QQ 或者 Email 联系作者,或者提出 issue |
