有朋自远方来,不亦乐乎。
Leo2018秋季版:前后端字体图标改造
原创 橘子书  发布于 3个月前 ( 09-07 ) 阅读: 514 次 评论: 8 条 A+

本来是没打算这么早升级这几个功能的,毕竟有好几个功能都是计划下季度版本或下下下下下……下次升级。

但想到有时候折腾就是看心情,何不趁着有想法的时候给折腾了……

于是,升级了。

更新

侧重点:前后端UI……

  • 阿里图标Leo正式移除fontawesome图标文件,改为自由可控的阿里图标
  • 后台前端启用新UI后台界面,新图标前端UI
  • 亮点短代码样式参考DUX主题,且在其基础上升级为彩色亮点,目前仅支持16色(因为懒)
  • 画廊短代码新的相册短代码,样式来自孟坤博客,效果见DEMO
  • Fancybox升级fancybox暗箱效果到最新版
  • 折腾

    1

    替换阿里图标比我想象中的要容易得多,去年7月份推荐阿里图标的时候,本来就想折腾,但由于Leo主题的后台选项框架比较特殊,有一个type类型(icon选项)调用了fontawesome图标,导致前后端都要大改,所以我思前想后——最后放弃了。

    此次纳入计划,并改造成功,原因有6:

    1. 近一年来,对阿里图标的使用愈发熟手;
    2. 阿里图标用得好,绝对是一大利器(超级爽,只要项目库的基本资料跟里面的图标元素设置妥当,直接就可以导出这些图标的css样式文件);
    3. fontawesome加载速度慢,跟阿里图标的自由度没法比;
    4. fontawesome愈发冗余,用到的图标不到100个,文件就飙到了1.03M;
    5. 给leo主题减负,精简主题包大小;
    6. 为轻量级wordpress后台界面,更换新UI(龙砚庭纯手工打造新界面);

    具体怎么给leo主题的后台框架Codestar Framework替换新图标,下面的【相关】有简单提了个大概。至于如何操作,首先要对该框架熟悉,这里不细表。

    2

    关于如何升级fancybox到最新版本,我去年有写过教程,只是那时考虑到2+版本够用,没必要升级到3+(说到底是因为新版文件包比旧版大一倍的缘故),所以便放弃了。

    此次纳入计划,是因为其一不爽其界面不够扁平;其二旧版本有图片素材,其实本身文件包大小没比新版小多少;其三,我要装逼(提升站点逼格)!

    不过正是因为这次的升级,我才知道上次写的教程存在缺陷,无法完美激活fancybox。以下是升级注意点(基于旧教程):

    1. 不一定每个主题都有在functions文件写【图片暗箱效果】函数功能,从而来添加fancybox特定属性的值,为其渲染出相应的效果(如data-fancybox,class=“fancybox”);
    2. 假如没有这个函数时,可以尝试在主题包里面搜索‘fancybox’,没准它就静静地藏在某个JS文件的某个角落;
    3. 新版的fancybox, a 标签添加的不再是 class 属性,而是 data-fancybox 属性,属性值可以为空,也可以任意填写(切记!!!);
    4. 理论上到了这里,暗箱效果已经达到,只不过不能完美使用罢了(少了左右按钮等功能)【这里就是我说的上篇教程缺陷所在】;

    激活暗箱组件的默认选项设置(使用JavaScript 初始化)

    在合适的位置或页脚</body>加入以下代码:

    <script type="text/javascript">
        $("[data-fancybox]").fancybox({
            // 填写选项,例如:loop,buttons:["fullScreen","thumbs","close"],
        });
    </script>

    或者直接在常用js文件(或jquery.fancybox.min.js)加入以下代码:

    jQuery(document).ready(function(n){n("[data-fancybox]").fancybox({//填写选项})});

    如何查找暗箱组建选项?

    传送门

    官方下载完整的fancybox文件包,打开dist/jquery.fancybox.js,查找var defaults = { … } 里面的字段。

    最后附上fancybox的各个版本cdn链接:

    传送门
    3

    亮点短代码的样式来自大前端DUX,至于函数写法则是参考了画廊短代码,而画廊短代码的写法来自龙笑天下。

    以前我所写的短代码相对复杂了些,很多前端效果的实现需要数个短代码的嵌套来实现,虽说后台选项框架够强大,无所谓嵌套与否……但,能够更简洁为何不用?

    所以,以后我所写的短代码会尽量往精简优化走。

    4

    原本是打算再给首页写个拼图布局的,但没精神写(困!!!)。所以这个计划先搁置着,推后再说。

    DEMO

    leo秋季版更新
    leo秋季版更新
    leo后台新界面
    leo后台新界面
    初版UI未替换版本
    初版UI未替换版本
    主题框架icon选项
    主题框架icon选项

    leo首页界面
    leo首页界面
    leo友链界面
    leo友链界面

    (备:画廊相册短代码采用的是无缝衔接的拼图方式,所以非常不适合纯色同色的图片)

    相关

    站点推荐:ICON图标

    随着审美变化,icon图标在网页的使用也变得愈发频繁。从最早的fontawesome图标,到如今的阿里图标;从厚重呆板,到线条轻快;...

    发布时间:2018/09/07 作者:橘子书 评论:4
    主题选项框架:Codestar Framework

    Codestar Framework是我一直在使用的wordpress选项框架,如果不使用轻量级选项框架的话,几乎就它没别的了。 这个选项...

    发布时间:2018/09/02 作者:橘子书 评论:4
    自用主题Leo:2018秋季版

    老久没有大版本更新Leo主题了,趁着陪产假期间抽空简单优化一下。 这次的更新理论上是2018夏季版,但考虑到今天9月1日,就索...

    发布时间:2018/09/01 作者:橘子书 评论:6
    为wordpress部署阿里图标(取代font awesome)

    font awesome图标几乎是每个主题必备的基本要素,不过它的文件包确实够大。 当初我在写Minimalist主题的时候,本来是已经...

    发布时间:2017/07/27 作者:橘子书 评论:27
    纯代码wordpress加入fancybox暗箱效果

    前阶段佳能兄问我怎么实现文章页图片的暗箱效果。 其实教程很简单,只需要引入几个文件、以及几段代码便能实现该功能。 D...

    发布时间:2017/06/29 作者:橘子书 评论:15

    Principle Team
    龙砚庭官方QQ群,一个坚持强怼的7P成员群!
    10人已关注

    目前评论:8   其中:访客  4   博主  4

    发表评论

    莫慌,小狮子正在努力加载评论...
    1. 沈唁志
      沈唁志2 ( 2018.09.14 11:39:44 )  4楼

      现在的博客越来越骚气了

    2. 品牌馆
      品牌馆1 ( 2018.09.11 10:00:33 )  地板

      好骚,好骚,好骚

    3. 晓庄
      晓庄2 ( 2018.09.10 20:28:57 )  板凳

      很强,渣渣前来膜拜

    4. 龙笑天
      龙笑天3 ( 2018.09.10 14:58:40 )  沙发

      :evil: 这个亮点很棒 抽机会搞走~