广告位,电脑和手机可分别设置,可放任何广告代码
对了,我应该放什么广告呢?

主题作品

本站主题-DUXQ主题-更新日志

D U X Q

19年11月

  • 古腾堡编辑器新增DUXQ亮点块【查看截图】
  • 底部大推广新增自定义背景颜色、自定义背景图像、自定义按钮数量的功能
  • 古腾堡编辑器新增任意选取部分文字单独设置颜色背景色功能
  • 优化三种不同布局的显示效果和一些bug
  • 古腾堡编辑器增加DUXQ模态框块,现在添加一个弹出框就太简单啦!【点此体验】
  • 增加用户前台上传头像功能,开启后用户可只接在用户中心上传修改头像.同时支持上传新图像自动删除老图像文件的功能,减少服务器内存占用
  • 增加退出登录时弹出框,以提醒是否确认退出当前登录
  • 优化公告栏显示效果,增加自定义公告栏标题及自定义标题背景色功能【查看设置截图】

19年10月

  • 优化了广告位的显示,适当的增加了几个广告位
  • 重写首页幻灯片功能,增加3种显示模式,5种切换动画可选择,完美适配PC和移动端的滑动操作,十分顺滑流畅【查看详情】
  • 重写文章图片灯箱功能,完美适配PC和移动端的滑动操作 ,支持双击放大,移动端双指缩放/下滑关闭【点此体验】
  • 同步重写了文章幻灯片功能,在编辑器直接插入幻灯片,支持多种动画选择,滑动效果和功能与首页幻灯片一致。【查看截图】
  • 古腾堡编辑器新增“折叠框”块,方便插入可折叠的面板,4种主题可选。【查看截图】

19年6月-9月

6月到9月更新的内容也比较多了,但是这段时间我的时间都比较散,也就没有一一列出了,大致总结以下几点吧

  • 调整大量的图标为SVG,大大的提高了页面加载的显示速度
  • 增加首页「精彩专题」板块,可在后台设置相应内容
  • 优化了登录、注册的逻辑,修复了可能会不能注册的Bug
  • 其他的忘记了。。。。。

19年5月

  • 同步DUX官方5.3更新,适配Wordpress 5.2
  • 优化了一言功能的获取逻辑和显示效果,增加中英双语一言显示
  • 增加文章内容限制高度功能,支持设定高度和任意文章独立选择开启。【查看截图】
  • 优化微分类显示效果,包含首页和分类页
  • 文章列表增加卡片显示模式,支持任意页面独立设置,顺便优化了响应式效果【查看截图】
  • 增加了全局动画的效果,目前一共10个动画可选择【点此查看】
  • 重写了提醒信息的样式,比如点赞的时候
  • 修复了好几个bug,如熊掌号显示错位、缩略图和头像可能显示不正常、浮动按钮无效等

19年4月

  • 弃用百度分享,重新文章分享代码,百度分享不支持https,而且太沉愈了,现在用1KB代码搞定
  • 修复了生成分享图片功能有时会会出现文字显示错误的bug
  • 调整了部分css样式,之前不耐看(登陆窗口、点赞、分享等)

19年1月

  • 古腾堡编辑器适配wordpress5.0.3,修复部分bug
  • 古腾堡 增加幻灯片块,方便快速添加幻灯片(本文最下方有效果示例) 【查看效果图】
  • 优化幻灯片移动端触摸滑动的逻辑,修复了快速滑动可能会出现跳动的问题,同时增加速度设置功能
  • 列表缩略图增加尺寸可选择,优化缩略图清晰度不够的问题
  • 古腾堡 按钮块 增加方形样式选择,以及多个按钮选择
  • 首页文章列表排序方式可选择按更新时间和发布时间排序
  • 优化古腾堡自定义块的转换规则,自带的块可以和自定义块相互转换
  • 增加古腾堡编辑器自定义块,这下写文章更轻松了!【查看详情】
  • 再次优化代码高亮功能,增加高度限制功能,不怕代码太多影响文章长度
  • 浮动按钮增加自定义背景色功能->看右边,我已经换成其他颜色了

18年12月

这几天增加的功能很多,同时我也重新写很多代码,特别是JS和php代码判断逻辐。优化后现在很多JS文件和前端 DOM,都只会在需要的时候才会调用,(比如说代码高亮的功能,不管你开没开代码高亮,都会先检测文章是 否有代码,没有代码就不会调用想关的JS和CSS,再比如生成文章分享图片功能,只有点击按纽之后才会调用 相关JS和CSS然后再生成,等等还有很多类似的判断逻辑),这样可以很大幅度的建超前端DOM内容,提高页面打开速度! 今后,我这边所有新增功能都会采用这样的方式来做,既要扩展功能,但绝不能增加前端DOM,绝不能影响打开速度
  • 重写后台主题设置界面:漂亮的界面、清晰的排序逻辑、简明易懂的功能描述。【点此查看详情】
  • 文章增加隐藏内容,回复可见的功能,且支持编辑器直接输入。【点此查看详情】
  • 修复图片灯箱不可双指放大的BUG,取消双击放大功能(不清晰),调整了目录树的显示细节
  • 新增加文章目录树功能,根据文章标题自动生成文章目录树。【点此查看详情】
  • 修复了文章二维码可能不显示的BUG
  • 优化了首页和小工具的幻灯片功能: 1.纯代码适配手机端触摸操作,删除之前的触摸插件。 2.增加幻灯片数量设置。 3.增加了文字内容设置功能。 4.调整了显示和动画效果
  • 文章标签增加随机彩色背景功能,可选择是否开启,这下标签较多的文章就不会显得单调了
  • 主题同步更新官方5.2新增代码,虽然没更新啥!
  • 文章增加图片灯箱功能,文章页面中,点击带图片原链接的图片后显示灯箱效果,支持移动设备手势操作
  • 再次优化了一些文件的动态加载。
  • 增加PC端文章页右上角显示当前页面的二维码(扫描二维码在手机上浏览)的功能。【点此查看截图】
  • 重写页面底部的友情链接,将友情链接独立显示出来。并且自动控制高度,超过2行自动折叠,并出现更多按钮。在最下面可以体验。
  • 文章页面增加生成分享图片的功能,把文章摘选加上图片和二维码生成图片,方便朋友圈分享。点击文章右下角体验【点此查看效果图】

18年11月

  • 完善了注册、登陆、修改资料等的反馈提醒,增加颜色辨识和等待动画。(12.15)
  • 增加选择头像功能,在用户中心可直接修改头像。【点此查看】(12.15)
  • 文章增加了更新时间的显示,发布文章1天之后如果有更新则会显示更新时间(12.14)
  • 增加禁用Wordpress5.0古腾堡编辑器的开关,升级5.0之后不习惯的可以一键关闭了(12.13)
  • 调整了一下登录注册的样式,增加了一些动画,错误提醒区分颜色。【点此查看】(12.13)
  • 增加注册直接输入密码的功能,增加登录、注册的数学验证功能,防止恶意登录,顺便优化了登录框代码的显示判断。【点此查看】(10.12)
  • 修复了如果社会化登录插件未安装可能会造成的界面错误,修复了滚动时可能会发生的跳动(12.10)
  • 重写了网址导航的模板页面,现在像样儿了【点此查看】(12.8)

18年10月

  • 文章列表-新增加多图显示模式,可按照分类设置或者文章设置。【点此查看效果及详情】
  • 调整了一些尺寸、颜色的细节。优化了一些代码规则。
  • 优化了会员中心显示,修复会员中心文章不分业的BUG,重写了移动端的样式。现在手机PC都完美适配了【点此查看详情】
  • 重写了移动端的导航菜单显示,两种显示方式(下滑入、左滑入),登陆按钮可选择显示在顶部和菜单内。【点此查看效果图】
  • 今天再重写了代码高亮功能,优化了编辑器功能,现在的代码高亮完全满足科技类博主使用啦!【点击查看预览及详情】

18年10月前

  • 增加一个浮动广告位,就像右边领红包那个功能
  • 增加一个聚合文章小工具,将热评文章、最多查看、最新发布、随机文章融为一个小工具,可见右侧小工具
  • 集成social社会化登录插件的功能,实现社会化登录
  • 优化作者页和用户中心页面的显示效果,增加背景图
  • 导航菜单增加滑动跟随动画
  • 增加滚动公告栏功能,且可以选择需要显示的页面
  • 重新调整了分享功能和样式,更加美观和协调
  • 在编辑器增加了一些好看的样式快捷按钮,使用效果【点此查看】
  • 客服按钮(包括回顶部按钮),手机端可以选择显示在底部还是在右边
  • 增加编辑器的代码高亮按钮
  • 增加用本地图片随机设置头像的功能,效果【点此查看】
  • 删除了其他独立页面的侧边菜单栏,删除其他独立页面的标题
  • 增加了菜单的滑动、点击动画
  • 删除了部分广告位,可以用小工具位置替代
  • 增加多个小工具区域:首页文章列表顶部、底部,文章页底部,页脚小工具
  • 对文章页底部功能区进行了拆分,显示为盒子模式,功能板块样式也重写了,更加合理/好看
  • 大量的优化了字体、大小、间距、尺寸等,让整体更加协调
  • 管理员登录时,可以选择显示、隐藏Wordpress的原版顶部工具栏
  • 增加菜单栏的登录功能,以及登陆信息的二级菜单显示
  • 根据登录用户权限增加了管理员专用菜单以及功能
  • 删除顶部小菜单
  • 修复了其他的一些BUG

以上更新内容并未涵盖全部优化调整内容,还是有很多细节就不一一说明了,总之我所做的所有调整都遵循着功能实用、代码简洁无沉愈代码、样式简约美观,新增功能均采用动态加载,尽量减少前端代码,加载加载更快!同时也欢迎大家提出好的建议,相互交流!

重写首页幻灯片功能,多种模式/动画可选,如丝般顺滑

之前的首页幻灯片以及做过很多优化了,但是滑动操作始终不太流畅,功能也比较单一。干脆就花了点时间重写了

重写之后的主要有以下几个特色

  • 增加了3种显示模式,5种切换动画
  • 完美适配PC和移动端的各种滑动操作
  • 滑动操作流畅度大大提高

不多介绍了,自己体验吧! 下面是部分预览图

首页列表多图展示模式-适用于图像类文章

本站主题首页文章的显示方式一共三种:缩略图模式、无图模式、多图模式。这个多图模式是我额外增加的一个功能。当开启此功能之后,那么这篇文章在列表中将会以4张缩略图的方式显示。对于图片较多、或者以图片为内容核心的文章非常有用!

支持的功能及介绍:

  • 可以设定:选择一个分类的文章全部显示为多图模式
  • 可以给每一篇文章单独设定时候显示为多图模式
  • 自动搜索显示文章中的前4张图像
  • 支持主题的缩略图相关设定
  • 响应式显示,手机、电脑显示效果完美

假设漂亮的图片

开启方法

1、直接在主题设置开启,并选择一个分类显示为多图模式。那么这个分类的所有文章都是显示为多图模式

2、直接在写文章的时候,在文章扩展选择是否显示为多图模式。

给本站博客增加超厉害的文章目录树功能

文章目录树功能想必很实用,特别是喜欢写长文章的博主了!之前有一位朋友向我提了这样的需求,正好我也需要,就在本站主题上增加了这个功能

为什么说超厉害的文章目录树呢?是因为我在做这个功能的时候,也看了很多案例,但是我都不太喜欢。我觉得既然要做,那就得做好,所以呢我这个超厉害的目录树有以下的特点

功能介绍

  1. 自动识别文章内容全自动生成文章目录,写文章的时候正常写,不要做任何的额外工作,文章目录自动生成
  2. 目录自动分级,最多生成4级目录。(太多了也没必要)
  3. 自动识别目录数量,低于2个就不显示了,太多了就自动折叠二级、三级目录
  4. 精心设计的UI样式,说不上高大上,但也简约时尚
  5. 完美匹配移动端,支持手机右滑关闭
  6. 内容动态加载,识别有超过1个以上的目录时才加载相关的插件、代码,同时总代码量不到10kb!坚决不增加页面加载速度!
  7. 文章目录双向定位,十分清晰的就能看到目前的目录
  8. 功能随意开关,甚至可以单独选择某一篇文章是否显示此功能
  9. 还有很多小细节就不一一介绍了

截图展示

DUX主题最新版破解优化增强版-DUXQ主题

简约扁平化设计
超200+外观重建,扁平化设计,更符合现代审美
响应式设计
三种布局模式,完美适配PC、平板、手机显示
前端用户中心
前端注册、登录、修改资料等功能应有尽有
自定义头像
前端支持用户上传自定义头像或选择自定义头像
丰富的小工具
多个小工具及小工具位置,更丰富的自定义内容
多模式显示
多种列表显示,多种独立模块可随心选择
文章功能扩展
专题、点赞、分享、打赏、一言、等诸多扩展功能
强大的编辑器
强大的自定义编辑器块,快速编辑文章,所见记得
深度SEO
代码级优化,免装SEO插件,文章关键词自动内链
极速加载
函数动态加载,减少与页面交互,只为更快的加载
简易配置
丰富的设置功能,却又简单易懂,上手更轻松
模块化配置
页面超多模块化组合,页面构建随心所欲

主题特色

简约扁平化设计

  • 全局外观设计调整项目超40项目,大面积的调整了尺寸、颜色、框架、动画等,让显示更加协调、美观
  • 重写了移动端菜单、导航页面、文章页模块化等诸多精美板块
  • 增加了大量的显示自定义设置,如自定义网站图标、自定义预载缩略图等
  • 增加、调整大量的动画效果,只为更舒适的体验

强大的用户中心

  • 完善的登录、注册系统。注册可设置密码,可中文注册,支持数学验证码,以及密码找回
  • 用户中心支持前台发布文章、查看修改资料、修改密码、等
  • 独立的头像系统,用户可前台直接选择自定义头像,即时未选择头像,也有多种头像显示模式

丰富的独立板块

  • 全局增加多个小工具位置:文章上下、侧边栏、底部等,不管是实现功能还是广告都方便自如
  • 首页列表多种显示模式:无图模式、缩略图模式、多图模式,每一种都融洽、精美
  • 精心调整的友情链接板块、浮动广告模块、浮动客服模块等 漂亮的网址导航页面模板,多个优化实用的小工具

核心的文章功能

  • 完整的文章打赏、分享、点赞功能,以及丰富的广告位 文章页支持二维码显示,手机扫一扫继续阅读
  • 支持文章概括生成分享图片,把精彩轻松分享到朋友圈
  • 超多的文章编辑小工具和古腾堡自定义块,写文章太轻松了
  • 强大的代码高亮功能,多种显示效果,只需在编辑器填入代码、选择功能就行了
  • 自动识别的文章标题的目录树功能,支持双向定位,自动折叠
  • 有图片就得有图片灯箱!不然点图片就跳转,体验相当差。完美支持移动端手势滑动

丰富的实用工具

  • 精彩一言功能,支持多个显示位置、自定义内容,让你的网站更加生动
  • 强大的SEO优化,自动识别关键词,单篇文章单独优化
  • 更有百度熊掌号、首页幻灯片、滚动工具栏、自定义代码等多项优化工
  • 列表AJAX不刷新自动加载,动画也很漂亮哦
  • 多个文章独立扩展,可直接设置文章点赞数、阅读数、副标题、来源链接等

极速的页面加载

  • 全局代码优化超过50项目,即使增加无数功能,但主题大小仍在缩小!(除新增图片后)
  • 增加多项代码函数判断,减少函数与前端DOM交互,就为了快那么一点点
  • JS文件除框架外,全部动态加载,极大的减少函数命令,大大的提高加载速度
  • 优化的太多了,就连主题内的所有图片都是TinyPng压缩后使用的,较少60%图片内存

部分效果图

主题获取

不知不觉,更新这款主题已经一年多了,DUXQ主题也更加强大了,我也学会了不少的新东西!如果你觉的还不错,欢迎与我联系!一起分享科技的乐趣

wordpress古腾堡Gutenberg编辑器创建自定义Block块详细教程

相信很多朋友都更新了wordpress5.0了吧,这次更新带来了全新的可视化编辑器:古腾堡Gutenberg。新的编辑器我用了一段时间确实不错,可自定义的地方也非常多。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

Block介绍

新的编辑器采用Block块的方式插入文章,把内容分成各种块,方便内容的调整和修改,同时也大大的扩展了编辑器的功能。这篇教程我会详细的教大家创建古腾堡Gutenberg编辑器自定义Block模块!

目前相关的中文内容还是很少,需要了解更多内容可以参考官方介绍

截图介绍

如图所示,通过创建自定义块可以更方便的调整文章内容功能和效果,在此我以实现上图的两个自定义块为例,一步一步的创建。

详细教程

创建自定义的过程大致分为三步,只要按照我的教程一步一步的来,还是很简单的

  1. 在function中注册相关的脚本文件
  2. 编辑块Block的JS文件
  3. 编辑块的css外观

注册 Gutenberg Block块

找到你主题的 function.php文件,在最下方添加以下代码:

// 古腾堡编辑器扩展
function duxq_block() {
    wp_register_script( //引入核心js文件
        'duxq_block',
        get_stylesheet_directory_uri().'/js/gb_block.js',
        array( 'wp-blocks', 'wp-element' )
    );

    wp_register_style(  //引入css外观样式文件
        'duxq_block',
        get_stylesheet_directory_uri().'/css/editor-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type( 'duxq/block', array(
        'editor_script' => 'duxq_block',
        'editor_style'  => 'duxq_block',
    ) );
}
if (function_exists('register_block_type')) { //判断是否使用古腾堡编辑器
    add_action( 'init', 'duxq_block' );
}

语法解释:

  • wp_register_script () 引入核心的js文件
  • wp_register_style() 引入css外观样式文件
  • 最后我们检测一下是否使用古腾堡,然后排队注册

编辑Block块JS内容

块是的核心就是JS文件控制的,要实现的所有功能也是靠这个就是文件。

按照我们上面引入的js文件,我们打开编辑这个文件。

在以上代码中我们创建了两个自定义块,分别是DUXQ标题和DUXQ按钮,点击块就会出现上面图片中的块,包含了文字内容输入,和几个按钮,按下按钮会切换内容的css Class,以实现外观样式的改变!

语法解释:

  • blocks, editor, i18n, element, components等均是官方的API接口,实现数据传递
  • blocks.registerBlockType() 创建Block的函数接口
  • registerBlockType的几个参数:title(标题)、icon(图标)、category(分组)、attributes(自定义属性)
  • 两个核心函数:editsave ,分别定义了编辑时候的函数和保存的函数
  • 上面我们增加了几个按钮,传递onClick事件,实现点击切换不同的className

css外观样式

通过创建了自定义块,能实现加载不同的css className 了,那我们添加一些样式,就可以看到效果了!

.duxq.anz button {
	margin: 10px;
	padding: .5em 1em;
	min-width: 33px;
	min-height: 33px;
	cursor: pointer
}

.duxq.anz button:hover {
	box-shadow: 0 0 10px #ddd;
	opacity: .8
}

.qe_wzk_hong {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #f1d3d3;
	border-radius: 4px;
	background: #fff7f7;
	color: #dc3f3f
}

.qe_wzk_lan {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #b3daf1;
	border-radius: 4px;
	background: #f7fcff;
	color: #197cb1
}

.qe_wzk_hui {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #d4d4d4;
	background: #f5f5f5;
	color: #757575
}

.qe_wzk_lv {
	margin: 10px 0;
	padding: .6em 1em;
	border: 1px solid #b4e6b1;
	border-radius: 4px;
	background: #f7fff9;
	color: #1d9c24
}

.quote_q:before {
	content: "“";
	position: absolute;
	color: #ccc;
	font-size: 120px;
	top: -60px;
	left: 0
}

.qe_fxan {
	display: inline-block;
	margin: .5em;
	padding: .6em .8em;
	min-width: 80px;
	border: none;
	border-radius: 60px;
	box-shadow: -1px 4px 10px rgba(0,0,0,.2);
	color: #fff;
	text-align: center;
	transition: all .2s ease
}

.qe_fxan a,.qe_fxan a:hover {
	color: #fff
}

.qe_fxan.b1 {
	background-image: linear-gradient(135deg,#f58852 10%,#e43e2f 100%)
}

.qe_fxan.b2 {
	background-image: linear-gradient(135deg,#59b7fb 10%,#036bff 100%)
}

.qe_fxan.b3 {
	background-image: linear-gradient(135deg,#CE9FFC 10%,#7367F0 100%)
}

.qe_fxan.b4 {
	background-image: linear-gradient(135deg,#FCCF31 10%,#f77f2d 100%)
}

.qe_fxan.b5 {
	background-image: linear-gradient(135deg,#54ea98 10%,#0db757 100%)
}

以上css内容除了要添加到刚刚引入的css文件中,还需要添加到主题的相关css文件中,才能实现文章页中也显示相同效果!同时css样式可能还需要根据你的主题做一些优先级调整,才能显示正确的效果,这里就不再详细赘述了!

古腾堡编辑器的功能很强大,但同时也更加复杂了。想要创建更多功能的自定义块就还得多多学习官方文档了!
最近我也把DUXQ主题编辑器也增加了很多实用的块,写文章太方便了!

本站主题Block块

为了方便写文章,我可是费了很大功夫,把常用的几个功能都用这样的方法添加到主题的block块了,下面截图展示部分block块

登录

记住我

注册