YULIN

Mozz Plus - Typecho响应式昼夜双色简约主题

请输入图片描述

Mozz主题亮点

  • 主题清新自然,简约适用
  • 基于pjax技术,页面无感刷新
  • 支持DarkMode深色模式一键切换
  • 支持评论,只需填写QQ与昵称无需注册。
  • 可以后台自行创建新页面并支持设置自定义图标(iconfont
  • 支持文章顶置(滑动轮播)
  • 响应式代码,完美过度动画。
  • 文章目录/平滑定位
  • 支持代码高亮,自动解析代码语言。
  • 支持插入在线视频,图文视频混合排版。观看demo
  • 基于Typecho超轻博客框架,功能却十分齐全。
  • 代码内置百度SEO动态自动提交工具

开发版

基于gulp构建的ssr项目,极简的配置,一个命令gulp即可完成自动打包操作(本项目中gulp已配置好,无需修改任何代码即可使用)。了解gulp

开发阶段:

  • 自动、即时的less、js、编译,毫无察觉
  • 支持es5、es6、es7语法,混合编译
  • 丰富的npm插件随意import
  • 简化代码结构,看齐组件化、低耦合
  • 加入jquery,支持操作dom
  • 已经处理好的jquery.pjax的事件周期,无需关心

打包阶段:

  • 执行gulp命令,只需4个字母即可完成项目打包
  • 合并全部js、less,打包自动压缩混淆
  • 自动化版本,静态资源(js,css)自动添加版本号,避免版本更新缓存问题

赞助作者

本主题使用的Typecho是本作者定制版,使用官网版本不能完全体验本主题功能。以下两个版本均包含定制版Typecho更新包(代码)
主题售价价格说明
情怀标准版¥19.99一杯卡布奇诺的价格,立即拥有自己的Mozz,免费升级,代码压缩,不可二次开发、不可去除Mozz版本标识,赠送2DLive插件(请主动索取)
专业开发版¥99标准版内容+获得未压缩代码,可二次开发,去除标识,以及标准版全部福利,升级可补差价,享受技术咨询服务,拉你进主题开发群和各界前端大佬们畅聊。

付款请截图,加QQ:584363361,谢谢支持
请输入图片描述


以下是主题配置教程文档

自定义独立页面的图标

  • 登陆iconfont,找到喜欢的图标,点击下载按钮

请输入图片描述

  • 进入页面,点击 复制svg请输入图片描述
  • 添加字段icon,值为刚才复制的东西ctrl+v

请输入图片描述

导航栏跳转外部页面

  • 如果你想直接外链到外部页面:添加字段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代码,方法如图:
请输入图片描述
请输入图片描述

注意!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,也就是httpshttp
  • 填写邮箱:必须qq邮箱,否则无法拉去博主头像地址

其他常见问题

如果你的左侧分类自动收缩不能正常展开
  • 后台设置=>基本中的站点地址url地址时候同浏览器中地址相同,注意区分ssl,也就是httpshttp
  • [勾选] 必须填写邮箱
  • [勾选] 必须填写网址
  • [勾选] 同一 IP 发布评论的时间间隔限制为 1 分钟