建站杂谈及实用代码分享

杂谈

这是连续第三篇关于建站的文章了,好在我并不打算短期内再写第四篇,因此有什么关于建站的内容需要记录的话,我会直接编辑在这篇文章里。

因应 Ghost 0.7.0 的更新,我在在这几天尝试了这个基于 Node.js 的博客程序,它给我留下了非常好的印象,特别是写文章的界面,左边是 MarkDown 编辑器,右边可即时预览文章的实际样式,再加上 MarkDown 快捷键,可以说,让写文章也变成一种亨受。因此我一度想立即从 WordPress 搬到 Ghost,但接下来遇到的问题,让我暂缓了这个决定。

数据迁移失败,虽然 Ghost 提供了 WordPress 插件来帮助导出数据,但实测导出的数据文件并不能导入到 Ghost,所以我只能手动复制文章。尽管我的文章不多,这仍是一件费心费力的事儿。

只是个半成品,虽然 Ghost 这个项目已经启动超过两年,但它还远未到完善的程度,还有很多功能上的缺失。比如没有留言系统,没有分类目录、没有附件管理、没有友情链接,没有插件等等……好消息是,近期应该会加入对插件的支持。

缺乏支持文档,Ghost 目前的教程很少,特别是中文社区内,来来去去也就那么几篇。Ghost 的内部函数也不完善,比如摘要只能是按单词或字符数量来截取,不能自定义,也不能按原文的版式输出。

我觉得这大概还要等上一年左右,Ghost 的功能才能完善到足以满足我的需求。所以在未来一段时间内,咱还是继续 WordPress。谈到 WordPress,过去一段时间,为了实现一些效果,我在网上找过不少代码,但它们总有些小问题,我不得不加入我的想法进行改写。源于分享也应归于分享,下面的篇幅就用于记录我原创或改写的一些小代码。

固定浮动的侧边栏

如果你的网页上有侧边栏,又如果正文太长的话,侧边栏滚动完之后就会空出一片。为了避免这种违和感,我们可以在侧边栏滚动完之后,显示一些固定的栏目。这类的代码在网上能找到好几个,但可用的并不多,抑或效果不好。比如滚动到哪个位置才显示固定的浮动栏,或者没考虑响应级设计等等。我最终根据网上的代码修改出我用的这套代码。嗯,同时你也会看到我那丧心病狂的注释……


/* 首先定义一些全局变量 */
var rollStart=$('.f_links'), // 侧边栏最底部的小工具
    rollSet=$('.about_me,.rand_post,.tags_cloud'); // 需要固定浮动的小工具

/* 创建一个函数,用来定义固定浮动栏的宽度和水平位置 */
function sid_roll() {
    var w=$('.widgets'), // 原侧边栏的外层容器,注意其宽度应该和小工具的实际宽度一致
    w_w=w.width(), // 获取外层容器的宽度
    w_off=w.offset(), // 获取外层容器的偏移值
    rb=$('#rollbox'); // 固定浮动栏的容器
/* 判断网页主体的宽度,在我的响应级设计中,超过此宽度才会显示侧边栏 */
    if($('body').width() >= 970) { // 根据你的网站修改此处的宽度
/* 根据外层容器的值设置固定浮动栏的宽度和水平偏移值 */
        rb.width(w_w).css('left',w_off.left);
    } else {
/* 如果当前不显示侧边栏,则将固定浮动栏移出网页的可见范围外,以达到隐藏的目的 */
        rb.css('left','-99999px');
    }
};

/* 在侧边栏最底部的小工具后面插入一个元素,即固定浮动栏的容器 */
rollStart.after('
    '); sid_roll(); // 执行上面创建的函数,设置固定浮动栏的宽度和位置 /* 再定义一些全局变量 */ var offset=rollStart.offset(), // 最底部小工具的偏移值 rollBox=rollStart.next(); // 缓存固定浮动栏的元素选择器 if(rollBox.html(null)) { // 如果固定浮动栏是空的 rollSet.clone().prependTo('#rollbox'); // 将你想要固定的小工具复制到固定浮动栏 }; /* 滚动网页时执行 */ $(document).scroll(function() { var st = $(this).scrollTop(), // 获取当前的垂直滚动位置 d=rollBox.css('display'); // 获取固定浮动栏的显示状态 /* 判断当前的滚动位置是否大于最底部小工具的偏移值加上固定浮动栏的宽度 */ /* 这个值应该可以在原侧边栏刚从顶部消失后,立即显示固定浮动栏,实测在不同的网站内容里会有些误差 */ if(st > offset.top + rollBox.height()) { /* 当固定浮动栏为隐藏状态,才继续执行。因为网页每滚动一点都会执行这个函数的所有内容,如果不加入判断,显示效果会有点不理想 */ if(d == 'none') { /* 淡入显示固定浮动栏,再用动画加点顶边距 */ rollBox.fadeIn().animate({top:0,paddingTop:20},400); } } else { if(d != 'none') { // 当固定浮动栏为显示状态 rollBox.fadeOut(); //淡出隐藏固定浮动栏 } } }); /* 调整浏览器的窗口大小时,执行上面创建函数,重新设置固定浮动栏的宽度和位置 */ $(window).resize(function() { sid_roll(); });

只在超长文本上显示提示文本

这是个人脑洞大开的想法之一。在一些设计为不换行的元素中,常常会被放入超过其容器大小的文字(比如本站侧边栏中的「随机文章」),为了获取完整的信息,我们往往使用 title 属性为它设置鼠标悬停时显示的提示文本。

但如此一来,一些没有超长的文本也会显示提示文本,这明显不符合我那「如无必要,尽量不要添加提示文本」的设计原则。基于这个略显偏执的需求,我原创了以下代码。


/* 创建主函数 */
function titleLen(a) { // 这里的 a 是文本的选择器变量
    var w = $(a).parent().width(), // 获取a文本外层容器的宽度
    fs = $(a).css('font-size').replace(/px/i,''), // 获取a文本的字体大小并移除单位px,使它变成数字
    m = w/fs*2; // 计算出外层容器最多可以容纳多少个半角字符而不溢出
    $(a).each(function() { // 对每个 a 文本执行函数
        var t=$(this).text(), // 获取a文本的字符串
        l=0,r=0,c=-1; // l 为字符数量,r 为半角字符数量,c为文字编码
        l = t.length; // 获取a文本的字符数量(不分全角半角)
        for(var i=0;i=0 && c<=128) { // 根据字符的 Unicode 编码范围判断全角或半角
                r+=1; // 是半角字符,对 r 半角字符计数加 1
            } else {
                r+=2; // 是半角字符,对 r 半角字符计数加 2
            }
        }
        if(r>m) { // 如果a文本的字符计数大于外层容器不溢出的最大值
            $(this).attr('data-title',t); // 给a文本设置提示文本属性,内容为a文本自身
/* 为了不才有浏览器的默认样式来显示提示文本,我这里用了自定义属性 data-title */
/* 如果你使用浏览器的默认样式,将 data-title 改成 title 即可 */
        } else {
            $(this).removeAttr('data-title'); // 如果a文本不超长,移除提示文本属性
        }
    });
};
/*
我使用了多说评论,而且多说的JS在最后才引入,所以无法一载入网页就对多说调用的内容执行本函数
因此我编写了这个只执行一次的事件
这里使用了 on 和 one 事件,是因为这两个事件能处理动态生成的元素
*/
$(document).one('mouseover','.re_com',function() { // 仅此执行一次,当鼠标经过多说的最近评论小工具
    titleLen('.ds-thread-title a'); // 即执行我们在上面创建的函数,对多说最近评论的标题进行判断
});
/* 载入网页后,立即对侧边栏的随机文章小工具执行函数 */
$(document).on('ready',function() {
    titleLen('.rand-posts li a');
/* 调整浏览器的窗口大小后,因为超长文本外层容器的宽度可能有变,因此再执行函数来重新计算是否添加提示文本属性 */
    $(window).resize(function() {
        titleLen('.rand-posts li a,.ds-thread-title a'); //括号里是需要处理的超长文本
    });
});

未完,但暂不待续……

本站的资源均无广告和垃圾捆绑,若你觉得我的文章对你有帮助,欢迎点击上方的按钮给我打赏。
本博客文章采用 知识共享(Creative Commons) 署名-非商业性使用-禁止演绎 3.0 进行许可。