流水账(2)

流水账(2)

June 13, 2018
流水账 , 设计 ,

2018 年 6 月 9 日

流水账(1)评论中一楼的博主所说 ISUX 的配色的确略微有些单调,时间看长了感觉自己会性冷淡所以略微做了一些修正。

显示给 logo 加了个彩蛋,鼠标悬浮上去的时候会渐渐变量,用的是 css3 的 transition 属性实现一个 0.3 秒的背景图片切换。不过在动画过滤的时候时候会把图片转换成低质量格式导致出现了毛边。现在还没找到解决办法,如果有懂怎么解决的博友请给我留言。

另外是修改了一些图片的悬浮、边框样式,首页的文章列表也采用彩色图片了。

文章的详细页的主内容区内的链接颜色也进行了调整,另外把之前写的文章内链接自动增加网站 icon 也索性添加了进来。

还打算增加一个图片浏览器,不过目前没找到合适的 js 库。因为目前在用的这个主题是移植的腾讯的 ISUX,里面配套的 js 库就是 zepto.js,虽然使用起来和 jQuery 没有太多区别但是还是很多插件不能兼容,不知道博友们有没有推荐的 Zepot 的轻量图片浏览器插件推荐呢?


2018 年 6 月 10 日

6 月的天气真的是有些看不懂了,昨天还是晴空万里一夜过后的今天却有变的小雨霏霏。本来打算昨天去钓鱼,不过老妈回老家了,我姐让我帮她看娃,没办法只好先放一放了。

重新设计了下网站的 ICO 和 LOGO 的设计

LOGO 的悬浮重新设计了一下,使用一张图片,通过更改背景图片定位来实现亮灯和熄灯的效果,不过没有动画效果了,目前还不知道怎么弄。

ICO 使用了 LOGO 中灯泡 + 灯光这个部分,感觉效果还不错。

这是图片介绍


2018 年 6 月 13 日

一看到下雨我就头疼,毕竟一下雨店每天店里的客流量几乎就要腰斩,销售额就更不用说了。刚刚看了下天气预告,段前后的这段时间几乎都是阴雨绵绵了,让我不禁有点崩溃。

以前自贡下雨都是下的夜雨,白天虽然不见阳光,云层厚重,但是老天爷就像个年轻人一样憋得住,就是不下。不过入夜之后便是连绵大雨,间或夹着的几个惊雷说不准还能吓醒几个睡梦中的小朋友。但是去年开始感觉老天也似乎得了前列腺疾病或者膀胱类的病,这雨白天就绷不住的稀里哗啦,晚上也不带停的,雷也照打不误。我们这些做生意的不免叫苦连天呐。

前天老妈回老家前,扔了 500 元生活费给我们,我们也不含糊先往好吃的招呼,当天就下了管子。走的是一家美蛙鱼头,

每天这么下雨造就了四川潮湿的环境,在这边生活久了发现老年人几乎都有风湿骨病。所以四川人吃的辣吃的麻就显得并不奇怪了,辣椒花椒祛风除湿,《本草纲目》中有记载 “椒,纯阳之物,其味辛而麻,其气温以热。入肺散寒,治咳嗽;入脾除湿,治风寒湿痹,水肿泻痢;入右肾补火,治阳衰溲数,足弱,久痢诸证。”,四川的这种饮食正是应对着四川的天气而生的。

现在还记得之前看过的一个不知道是农业财经还是舌尖上的中国里就有说到花椒。就我见过的花椒就有好几种,见的最多的就是青花椒和红花椒了,红花椒数汉源花椒最出名。入口轻咬,麻味冲击口腔,道地花椒往往可以让嘴巴大半天满是麻味,完全品不出其他味道。

汉源花椒

不过来四川生活了六七年的我到现在还依旧吃不惯花椒,自家做饭菜基本上是不放花椒,外出下馆子也会和服务员交代清楚少放花椒或者不放花椒。

今天把博客的图片查看器加上了,选了很多插件最后还是用了 fancybox,github 上 star 最多的 js 图片库。

不过最初引入后发现似乎和 zepto.js 有些不兼容,看了下 fancybox 的文档上明确写着要求需要 jQueryjQuery 3+ is preferred, but fancybox works with jQuery 1.9.1+ and jQuery 2+,无奈下设置把 isux 的 js 里用到的 zepto 删除,然后替换成 jquery。最开始 js 内有些 window.Zepto 的引用导致出现些问题,后来全体 replace 成 jQuery 后直接无损转换成 jQuery。

利用 jQuery 找到文章内的所有图片,并用 a 链接包裹,格式根据 fancybox 的要求编写。

///找到所有img图片,并用fancybox指定的a链接包裹
$("._mod_content img").each(function () {
        url = this.title == "" ? this.src : this.title;//对ghost博客图片解析的一些处理
        $(this).wrap("<a href=" + url + " title=" + this.alt + " data-caption=" + this.alt + " data-fancybox='group' ></a>")
    });
///实例化fancybox
$("[data-fancybox]").fancybox({});

效果如下

fancybox展示

加入评论