Mozz Plus - Typecho响应式昼夜双色简约主题 - 雨林笔记-前端个人技术记录

![请输入图片描述][1]

Mozz主题亮点
====
 - 主题清新自然，简约适用
 - 基于pjax技术，页面无感刷新
 - 支持DarkMode深色模式一键切换
 - 支持评论，只需填写QQ与昵称无需注册。
 - 可以后台自行创建新页面并支持设置自定义图标（[iconfont][2]）
 - 支持文章顶置(滑动轮播)
 - 响应式代码，完美过度动画。
 - 文章目录/平滑定位
 - 支持代码高亮，自动解析代码语言。
 - 支持插入在线视频，图文视频混合排版。[观看demo][3]
 - 基于Typecho超轻博客框架，功能却十分齐全。
 - 代码内置百度SEO动态自动提交工具
开发版
====
基于`gulp`构建的[ssr][4]项目，极简的配置，一个命令gulp即可完成自动打包操作（本项目中gulp已配置好，无需修改任何代码即可使用）。[了解gulp][5]

开发阶段：
 - 自动、即时的less、js、编译，毫无察觉
 - 支持es5、es6、es7语法，混合编译
 - 丰富的npm插件随意import
 - 简化代码结构，看齐组件化、低耦合
 - 加入jquery，支持操作dom
 - 已经处理好的jquery.pjax的事件周期，无需关心
打包阶段：
 - 执行`gulp`命令，只需4个字母即可完成项目打包
 - 合并全部js、less，打包自动压缩混淆
 - 自动化版本，静态资源(js,css)自动添加版本号，避免版本更新缓存问题

赞助作者
====
>本主题使用的Typecho是本作者定制版，使用官网版本不能完全体验本主题功能。以下两个版本均包含定制版Typecho更新包（代码）
<table><thead><tr><th>主题售价</th><th>价格</th><th>说明</th></tr></thead><tbody><tr><td>情怀标准版</td><td>￥19.99</td><td>一杯卡布奇诺的价格，立即拥有自己的Mozz，免费升级，代码压缩，不可二次开发、不可去除Mozz版本标识，赠送2DLive插件（请主动索取）</td></tr><tr><td>专业开发版</td><td>￥99</td><td>标准版内容+获得未压缩代码，可二次开发，去除标识，以及标准版全部福利，升级可补差价，享受技术咨询服务，拉你进主题开发群和各界前端大佬们畅聊。</td></tr></tbody></table>
付款请截图，加QQ:584363361，谢谢支持
![请输入图片描述][6]

----------

> 以下是主题配置教程文档

自定义独立页面的图标
====

- 登陆[iconfont][7]，找到喜欢的图标，点击下载按钮
![请输入图片描述][8]
 - 进入页面，点击 `复制svg`![请输入图片描述][9]

- 添加字段`icon`，值为刚才复制的东西`ctrl+v`
![请输入图片描述][10]

导航栏跳转外部页面
====
 - 如果你想直接外链到外部页面：添加字段`target`,值为跳转`url`，默认新窗口打开外部页面
SEO优化-设置禁止爬虫读取
----
> 这个字段是为了SEO优化而设置的字段。我们要知道一旦爬虫跳转到了外部地址他就不会再就来了。
- 如果你不想让爬虫访问这个链接：添加自定义字段`rel`,值为`external nofollow`。当然也可以自己填写其他值。

添加友情链接模版页面
====

- 新建独立页面，取名`随意`，右侧自定义模版，选择`page-guys` 友情链接
 - 后台`主题=>设置外观`配置友情链接相关信息，`格式：[头像url=>名字=>网址=>骚话]`

设置首页顶部文章轮播
====

- 文章页面增加自定义字段`top`，值随意，默认根据文章发布日期，降序显示，滑动切换

设置文章缩略图
====
 - 首页文章卡片:设置字段`thumb`，值为图片地址，缩略图优先调用`thumb`字段的图片，如不设置，文章首图作为缩略图
 - 轮播：默认调文章首图
在文章中插入视频
====

1.在文章编辑器中插入以下格式代码，也可以通过编辑器的视频按钮添加,支持快捷键调用`Ctrl+W`,目前只支持Mp4格式远程地址。

{% https://qny.mqllin.cn/gamevideo_20190711_102933.mp4 %}

2.在文章编辑器中插入B站的视频ifram代码，方法如图：
![请输入图片描述][11]
![请输入图片描述][12]

> 注意！B站生成的代码是最基础的，我们可以自己添加`url参数`实现更好的体验。

- BILIBILI 地址PC端参数

&high_quality=1   (1=最高画质 0=最低画质)
    &danmaku=0        (1=打开弹幕 0=关闭弹幕)

- iframe 参数

allowfullscreen="allowfullscreen" #移动端允许全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止跳转到B站
完整的ifram代码示列：
    <iframe src="//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

设置评论头像
====
后台找到`个人设置=>个人资料`
 - 填写`昵称`：评论显示的昵称
 - 填写`个人主页`：也就是博客的地址，注意区分`ssl`，也就是`https`和`http`
 - 填写`邮箱`：必须qq邮箱，否则无法拉去博主头像地址
其他常见问题
====
 > 如果你的左侧分类自动收缩不能正常展开
 - 后台`设置=>基本`中的`站点地址`的`url地址`时候同浏览器中地址相同，注意区分`ssl`，也就是`https`和`http`
 - [勾选] 必须填写邮箱
 - [勾选] 必须填写网址
 - [勾选] 同一 IP 发布评论的时间间隔限制为 1 分钟

[1]: http://qny.tuchuang.mqllin.cn/FiBtFIZof7fFnzuN-ch-446UDwba
  [2]: http://www.iconfont.cn
  [3]: https://www.mqllin.cn/archives/91.html
  [4]: https://www.jianshu.com/p/10b6074d772c
  [5]: https://www.gulpjs.com.cn/docs/getting-started/quick-start/
  [6]: http://qny.tuchuang.mqllin.cn/Fvf5J2i3kauOqtCV2dpckP78rvcA
  [7]: http://www.iconfont.cn
  [8]: http://qny.tuchuang.mqllin.cn/Fpe_vKb3BgI_0T50G8uQT0PQIkyu
  [9]: http://qny.tuchuang.mqllin.cn/FkeQIWQjHKx6JnGExfVgwFynPKnr
  [10]: https://ae01.alicdn.com/kf/H30e84d1b0657416bb17570a56cbe669fr.png
  [11]: http://qny.tuchuang.mqllin.cn/Fh6Zc0jvImhy7paU9lwnBlRdkvvv
  [12]: http://qny.tuchuang.mqllin.cn/FiryX_k2jVX0ZejPUZLzXn6qF2Gt

已有 12 条评论

知谁与共 · 2021年

老哥预览链接在哪儿啊？就是本站主题吗？OωO

回复


Rogerspeem · 2021年

回复


Stivehof · 2021年

修复叶卡捷琳堡的珐琅浴

回复
chen · 2021年

大佬，加你了，麻烦同意下

回复
2333 · 2020年

测试

回复
yhuch · 2020年

哈哈，厉害了。

回复
terry · 2020年

测试

回复
哒哒 · 2020年

支持一下

回复
pnnk · 2019年

好好看，简洁舒服(ฅ´ω`ฅ)

回复
rudy · 2019年

先攒钱(｡•ˇ‸ˇ•｡)

回复
晴 · 2019年

(ฅ´ω`ฅ)

回复
小陈 · 2019年

给你点赞φ(￣∇￣o)

回复