开发 · Develop

niRvana · 轻拟物WordPress主题

Panda · 12月7日 · 2018年 10717次已读

2018年11月,我的第三个博客主题上线!设计上不再趋从于现有的扁平风,我认为是时候从极致的扁平稍微向拟物致敬了,因此我采用了轻拟物的风格。归功于现代的CSS技术,这些拟物的样式都完全使用代码编写出来了!无须任何贴图,这也是相对极致拟物风格的一个巨大突破。

主题基本特性

  • HTML5、CSS3 使用标准语言编写,支持IE10以上浏览器
  • 响应式 在桌面、平板、手机端均以最佳状态显示
  • 回复下载 可强制要求用户评论文章后才提供下载地址
  • 内容回复可见 指定某些内容需要读者评论后才可查看,让读者与你互动(可设置为要求用户注册登录并评论后才显示某些内容)
  • 侧边栏小工具 边栏数量可自定义、完全使用WP官方的小工具模型,开发了更多适合本主题的小工具
  • 语音朗读 使用百度语音合成技术来为您阅读文章
  • 评论表情 本主题自带评论表情功能,无需插件在后台即可设置
  • 瀑布流 文章列表可选择卡片或列表排序,其中卡片又可设置为普通或瀑布流形式
  • 不刷新加载 全局提供ajax加载文章
  • 打赏 允许通过多种途径打赏,如:支付宝二维码、微信二维码、Paypal链接
  • 点赞 每篇文章均提供点赞功能,可展示访客最喜欢的文章列表(后台可以修改点赞数据)
  • 生成封面二维码 每篇文章均可生成二维码用于分享到微信等社交平台

主题特色简介

新的niRvana主题包含去年reBorn主题的全部功能,并且还做了更多的改进:

主色调识别

自动根据文章特色图片识别出图片的主色调,在首页、文章分类页用最美的方式显示滚动图片。如:

Gutenberg专用模块

今年的新主题除了外观的变化以外,主要还是针对WordPress5做了大量优化:由于WordPress5.0引入了“Gutenberg Block Editor”(区块编辑器),在这种编辑器下,原有的“短代码”就显得非常的落后了:

  • 短代码存在的问题:在旧的TinyMCE编辑器中,短代码往往需要手动输入和编辑,很难记忆和使用。即使开发者增加了“短代码插入按钮”,但在修改短代码参数的时候,往往还是需要手动编辑代码本身。对于普通用户,这种操作是很繁琐并且容易出错的。
  • 块编辑器的优势:完全的可视化操作,无论是插入内容还是编辑参数,都可以可视化的操作,而无须去修改繁琐的代码。

因此本主题将原有的“短代码”全部升级成了“Gutenberg模块”,包括:小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮、下拉菜单、站内文章链接等,极大的为用户提供了方便,例如:

插入提示框

方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩

插入下载按钮

方便的在文章中插入下载按钮,并可选择是否需要访客评论后下载

插入模态框

在文章中插入基于Bootstrap的模态框,访客点击即可显示显示额外内容

插入提示工具: 在段落中插入提示语,鼠标悬停即可显示,就像这样。除了上方以外,还可以选择上下左右四个方向,就像这样

段落文本标记: Gutenberg默认不支持段落内部分文本设置色彩。本主题进行了扩展,可以设置文本背景、颜色等。就像这样的标记

还有更多方便的小工具等你来尝试!

自定义边栏数量

主题每个页面均预留一个边栏位置,该位置可放置多个边栏并使用tab来切换。您可以:

  • 增加或减少边栏
  • 定义每个边栏的图标
  • 分配边栏在文章还是在首页显示

当文章被检测到“文章目录”时,也会自动将文章目录当做一个边栏默认展示。

文章目录(Wiki模式)

当文章中存在多个“二级”、“三级”标题时,主题将自动启用“文章Wiki模式”。

“文章Wiki模式”将自动把文章内的“二级”、“三级”标题显示为文章导航并展示在边栏中,点击边栏标题可导航到文章中的指定位置。效果如下所示:

多种文章类型

提供FAQ、友情链接、轻博客、相册等诸多功能:

  • 友情链接:无需编码,提供专门的友情链接功能来添加和显示您的左邻右舍【点这里看看
  • FAQ:允许前台用“客服对话”的形式检索常见问题【右下角客服图标点击试试】
  • 轻博客:不想写长篇大论?没问题,一句话也可以展示【边栏已展示】
  • 相册:提供多图显示的功能【点这里看看

海报式分享

分享时生成带二维码的海报,右键保存至本地或手机端长按保存至本地后,方便上传到各类社交网站。

UI样式

您可以轻松的在文章中插入小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮、下拉菜单、站内文章链接等,例如:

这是一条蓝色的提示语,是最常用最普通的提示框

这是橙色的警告提示

绿色的成功安全提示

红色的错误提示,用于错误示例警醒读者

这里是折叠内容,按钮可选择为蓝色、绿色、橙色、红色或白色

折叠内容可以写很多行,即使是大段的文本也可以帮你收缩起来

当用于下载站点时,在WP编辑器中插入主题自带的一些组件,即可轻松组合出一个软件下载站,以下为示例:

博客版购买

售价:¥360元(购买后加入售后群,提供功能更新和BUG修复)

联系博主QQ购买可获取 9折 优惠。(QQ:448981533, 注明“niRvana主题购买”

注1:无论通过何种途径购买,主题均需要授权后才可使用,每次购买,允许在1个域名下安装,需要更换域名时,需销毁上一次的域名授权。

注2:博客版是普通用户安装后直接使用的版本, 部分代码已加密、编译打包,可自定义header、footer、function等进行简单的修改。拒绝任何形式的有偿无偿分享或盗版,开发者具有对此行为的最终决策权,因此导致的损失,不予补偿

DEMO:本博客现在就是niRvana主题【查看首页

源码版购买

源码版包含本主题所有未加密、未编译、未打包、包含代码注释等信息的主题源代码。便于阅读代码逻辑,便于在当前基础上增加、删除、修改等二次开发。 由于销售的是源代码,因此:

  1. 去除了授权限制,您可以任意安装、复制、分发
  2. 您可以增加授权功能后进行二次销售给其他客户或自己使用
  3. 购买后,您将得到主题最新版的源代码,以及源代码打包方法
  4. 由于是源代码,为防止源码多次发放给别人,故此版本仅销售1份,销售后,我不再售卖给其他人

源码版销售后,我不再将此主题销售给其他任何人(已购用户可继续得到售后服务)。若确实诚心购买,请联系开发者QQ咨询价格:448981533

已知的插件不兼容

Wechat Shop插件(迅虎网络 开发):此插件影响了WordPress REST API官方的nonce鉴权机制(查看WP官方文档),而本主题需要使用WordPress的REST API这个特性(如点赞、主题设置等不刷新页面交换数据的功能)。与插件作者交流后,作者虽然知道有此问题,但表示不修改。

Wechat Social插件(迅虎网络 开发):同上。这个开发者不清楚是如何影响WP默认的REST API鉴权的。P.S.有用户单独找迅虎网络开发者好言相劝并额外给了红包,开发者单独为他进行了修改后才正常。看来是插件本身的代码问题,与主题无关。

1、盗版的“文章朗读”功能是无法使用的。其他也有部分功能缺失

2、盗版无“段落内文本颜色标记功能”,例如:这几个字这段话中比较重要

3、盗版无文本提示语功能,鼠标悬停显示示例

4、正版更新后,在“未登录”的前提下,是可以使用页面缓存的。盗版会报错

更新历史

v2.2.0
1、全新功能:JS钩子!为二次开发提供帮助!包含文档,详见:主题压缩包内的文档说明
2、废弃:原有的“不刷新加载页面”回调方法,使用新的“ajax_render_complete”钩子。用法详见第1条。
【注:之前自定义的第三方插件使用的不刷新加载页面回调方法可能在使用此版本后需要将原来的方法更换为钩子】

v2.1.0
1、优化:一些常用方法可能存在BUG的隐患(config_plugins.php:require_once)
2、优化:提示框框插件,可能存在BUG的隐患(block_tips/block.build.js)
3、新增:评论代码高亮(JS、CSS)
4、新增:评论框表情前钩子“pf_comment_form_before_face”、评论框表情后钩子“pf_comment_form_after_face”(comments.php)
5、新增:评论框插入代码按钮,若不需要使用请删除“pandastudio_plugins\comment_form_insert_code”文件夹(comment_form_insert_code)
6、新增:评论框插入图片按钮,若不需要使用请删除“pandastudio_plugins\comment_form_insert_images”文件夹(comment_form_insert_images)
7、优化:文章内容描述的截取算法(function.php)
8、安全性:评论内容除了pre和img可执行以外,其他标签均转义(function.php)
9、取消:上传文件尺寸设置(function.php)
10、优化:顶部菜单指示条有时候位置不准确的行为(JS)
11、修复:“文章展示”模块在显示“相册”时的样式问题(block_single/index.php)

v2.0.1
1、修复:2.0增加阅读显示后,手机端首页出现横向滚动条的问题
2、修复:文章内容包含特殊字符时,微信分享生成海报报错的问题

v2.0.0
1、新增:下述钩子
“pf-share-modal-start”(分享模块开始)
“pf-share-modal-end”(分享模块结束)
“pf-share-modal-before-favorite”(分享模块点赞前)
“pf-share-modal-before-share”(分享模块分享前)
“pf-post-meta-start”(内容页顶部meta开始)
“pf-post-meta-end”(内容页顶部meta结束)
“pf-post-before-tag”(内容页顶部meta标签前)
“pf-post-card-meta-start”(文章列表卡片meta开始)
“pf-post-card-meta-end”(文章列表卡片meta结束)
“pf-post-card-meta-before-comments”(文章列表卡片meta评论前)
(share-modal.php、single-gallery.php、single-post.php、postlist-post.php)
2、新增:Gutenberg编辑器段落文字标记功能,可设置部分文本颜色、背景色等(format_mark)
3、新增:Gutenberg文本提示语功能,可给选中的文本设置鼠标悬停效果(format_description)
4、新增:阅读量显示。逻辑:打开页面算1次,若从来没有统计过,那么用点赞数据来显示。不想使用此功能请前往主题plugins文件夹删除“post_meta_views文件夹”即可(post_meta_views)
5、修复:网络不通畅时,重复多次点赞的问题(JS)
6、更改:非登录状态时,请求不再带入nonce信息(缓存未登录状态页面不再报错)(JS)
7、更改:使用新的信息通知功能及通知样式(CSS、JS)
8、修复:分类页随机滚动头部文章时,默认有20个,影响体验,现改为5个(category.php)
9、更新:内置的FontAwesome字体到5.8.2版本

v1.5.6
1、优化:相关文章默认看不到文章标题的问题。现在改为默认显示标题,鼠标悬停后隐藏标题(CSS)
2、优化:海报关闭的问题。现改为点击海报外部任意区域均可关闭海报(JS)
3、新增:文章编辑时,插入单张图片,可配置图片圆角、阴影、圆角与阴影样式(block-image,block_editor_styles、CSS)

v1.5.5
1、修复:语音播放时,请求的地址是http,导致https失效,现已自动适应

v1.5.4
1、修复:magic trackpad无法评论(JS)

v1.5.3
1、修复:友情链接没有LOGO时,显示首个文字的BUG(CSS)

v1.5.2
1、修复:打开下载按钮时,脚本报的一个错误
2、修复:文章分类页、全部文章时间排序页在一定尺寸的屏幕上出现边栏,且顶栏也有边栏按钮的BUG,如:小尺寸的iPad横屏状态(category.php、archives.php)

v1.5.1
1、增强:批量发送的垃圾评论再也不可能进入本站了!(再次提醒本站不建议使用缓存,即使要用缓存标签内的内容也不要缓存,或者设置缓存时间小于12小时!)(js、function.php)
2、1.4.4的BUG修复

v1.4.4
1、 修复代码高亮显示在某些情况下无法横向滚动的BUG
2、修复小标题遮挡其他内容的BUG

v1.4.3
1、顶部图片跨域不再空白,而是显示一个深蓝色的默认背景。(js)
2、REST API错误不再清空页面,而是显示错误提示(js)

v1.4.2
1、修复:启用Ajax不刷新加载页面时,文章二维码封面显示后,使用返回按钮不消失的bug;鼠标悬停显示tooltip提示文字后,使用返回按钮不消失的bug(js)
2、反采集:算法屏蔽button内增加脏数据(function.php)
3、修复:友情链接每个分类显示的文章数量默认跟随WP的每页文章数量,现已强制设置为100个,将其尽量最大化(favlinks.php)
4、新增:首页底部的分类展示文章,使用“随机顺序”,让你的分类文章每次都不一样(index.php)

v1.4.1
1、防采集功能算法重写:更高的效率、更随机的标签和类(function、footer)
2、修复:开启防采集后,文章内的“轮播图”(滚动相册)出现格式问题(js)
3、友情链接页面使用文章目录(function、favlinks.php)
4、修复一些样式问题(css)
5、文章链接是图片时,点击连接可放大显示图片(shadowbox,js,css)

v1.4.0
1、百度快照应该不会出现全屏的错误显示了(js)
2、评论框将永久记住成功提交过的用户名、邮箱信息直到清空浏览器缓存,切换到其他页面再次评论时不需要多次输入昵称(js)
3、去除了一个无用的后台设置选项(option-评论验证码)
4、新增:相关文章(postlist_relate.php、single-post.php、relate_posts.php、css)
5、文章、相册内容页增加文章发布日期显示(single-post.php、single-gallery.php)

v1.3.3
1、Gutenberg默认段落增加首行缩进功能(css、plugin-paragraph、plugin-editor_styles)
2、新增“轮播图”(滚动相册)功能,允许在文章中插入滚动相册了(css、plugin-editor_styles、plugin-gallery)

v1.3.2
1、评论缩进修改:只有第一层需要缩进,后面全部不缩进。方便查看,也不会变得很短。(css)
2、自带代码高亮:设计/代码高亮/启用(css、js、option、function、plugin—editor_style)
3、允许设计为“必须用户注册登录并评论”才显示页面的某些内容!(comment.php)

v1.3.1
1、新增一种首页图片的显示模式:不需要3D显示,而是扁平化显示。此模式下,安卓手机渲染首页会非常快。(js、css、option、slider-coverflow-flat、slider-coverflow-flat-full)
2、安卓手机显示coverflow会比较卡,所以强制使用了上述的扁平化显示。

v1.3.0
1、新增相册显示风格:图片显示。此显示风格使用img标签直接显示,图片不会被裁剪,小图片不会被强制放大,大图片会被强制缩小。(option.json、slider-gallery-img.php)
2、修复登陆界面被添加了前台样式和脚本的BUG(producton.php)
3、自定义标题分隔符:没什么用又偏有强迫症需要(function、head、option)
4、默认启用语音合成(js)
5、相册使用Gutenberg编辑器(framework、meta_and_option)

v1.2.3
1、全站不刷新加载页面开启后,页面title也可以跟随变化了(header.php,js)
2、Gutenberg Block根据官方设计要求,主要内容的编辑应该移至编辑区域而非设置区域(collapse、dropdown、modal)
3、全站不刷新加载页面开启后,popover浮动气泡、全屏搜索,在一些特定的操作下(如浏览器前进后退)会仍然存留的bug

v1.2.2
1、Gutenberg增加了alignfull功能,并调整了对应的样式
2、Ajax加载页面增加了一个方法,用于加载并渲染完成后预留给第三方插件处理Dom
3、WP官方修改了Gutenberg的一些方法,因此主题的模块也做了一些调整。但以前插入的模块可能会出现无法编辑的故障。(在WP5.0正式版上线后,主题的Gutenberg模块将采用“回退机制”,即使模块升级,也不会出现无法编辑的问题)

v1.2.1
1、修复Gutenberg模块的一些问题,虽然不知道正式版WP5.0是否正常,不过还是先修改了吧(将部分RichText改成TextControl)

v1.2.0
1、Play字体在1.1.3中丢失,现在找回来了
2、防采集、添加脏数据功能在之前存在问题被禁用。现已回归!
3、基于jQuery的插件理论上不会再出现问题了

v1.1.4
1、全部文章时间排序模板被加密导致消失,现在找回来了

v1.1.3
1、去掉“相册分类Tab菜单”,无论相册还是文章,都使用“分类菜单”(function.php)
2、Chrome浏览器在滚动图片的时候背景动画会闪烁。不让它动了。(app.min.js)

v1.1.2
1、“小标题模块”内容显示错乱的问题(build.js)

v1.1.1
1、文章分类页滚动图片可能不显示coverflow的问题(category.php)

v1.1.0
1、文章分类禁用滚动图后,显示数据错误传入错误的问题(category.php)
2、跨域CDN图片无法生成封面的问题(JS)
3、文章内容较短而边栏很长时,在某些尺寸屏幕上出现的滚动问题(JS)
4、部分样式问题(CSS)
5、部分插件无法正常使用jQuery的问题(function.php)
6、引入Autoprefixer解决旧版浏览器前缀的问题(CSS,Gulp)

v1.0.1
新主题

101 条回应
  1. 一芦居2019-6-4 · 14:49

    不错,持续关注这个主题

  2. 明月登楼的博客2019-6-4 · 11:55

    不错,主题非常的个性!赞一个!

  3. 皮皮2019-6-2 · 15:14

    浏览体验很舒服

  4. 奶爸de笔记2019-6-2 · 14:59

    已分享 <a href="https://blog.naibabiji.com/archives/1729" rel="nofollow">https://blog.naibabiji.com/archives/1729</a>

  5. 奶爸de笔记2019-6-2 · 14:41

    这个主题挺好看的。

  6. 心灵博客2019-5-30 · 14:12

    上一条留言没了。。。
    我是看了文章好久后才评论的,竟然提示我非人为操作。。。
    并且右下角提示还显示出代码来了:
    “`<b>严重错误:非人为操作</b>操作过快,判定为机器人操作,请刷新重试“`

  7. momo2019-5-27 · 14:48

    可惜没有集成收费下载功能

    • Panda2019-5-27 · 16:21

      都会有的,不要急

  8. 好朋友OL2019-5-15 · 18:21

    这主题真的太漂亮了。 = =
    不过我不能用,应为HOLD不住

  9. Daxun2019-5-14 · 16:20

    视频的样式有么

  10. 吾艾2019-5-5 · 20:42

    有没有出售商品功能?

    • 模板哥2019-5-9 · 11:46

      主题二开了

      • 吾艾2019-5-15 · 15:51

        麻烦你发下网站介绍网址呢 谢谢