有时候我们希望在侧栏放更多内容,但是容易让侧栏显得过长。网上比较常见的做法是,用 Tab 选项卡的形式将多个小工具合并到一起,例如热门文章、最新文章、随机文章等等,这样同样的空间包含的内容更多,用户体验也增强不少。
网上可以下到不少类似的插件,也有很多非插件的实现方式。我使用了William同学WordPress侧边栏JQuery版TAB选项卡文章中介绍的方法来实现,效果可以看我的博客侧栏:
有时候我们希望在侧栏放更多内容,但是容易让侧栏显得过长。网上比较常见的做法是,用 Tab 选项卡的形式将多个小工具合并到一起,例如热门文章、最新文章、随机文章等等,这样同样的空间包含的内容更多,用户体验也增强不少。
网上可以下到不少类似的插件,也有很多非插件的实现方式。我使用了William同学WordPress侧边栏JQuery版TAB选项卡文章中介绍的方法来实现,效果可以看我的博客侧栏:
我一般很少在博客中放置图片,主要原因是没有一个合适的图床。昨天浏览阿里云论坛的时候,无意间看到有oss4wordpress的插件,欣喜之下就决定试试,试用下来效果还是不错的。
独乐乐不如众乐乐,我把昨天折腾的过程记录下来给有需要的人。
OSS 对于新开通的用户有半年的试用时间,试用期间的服务套餐为:
有些博客文章很长,像我又不喜欢给文章分页,这样一篇博客读下来鼠标要拖很久,读者比较难定位到关心的内容。解决这个问题有很多措施,一种是在文章拖到底部的时候显示一个返回顶部的按钮(做法参考博客添加回到顶部按钮),另外一种是做一个文章目录,这样就比较直观了。
我之前用Table of Contents Plus插件来实现这个功能,这个插件设置还很多,我之所以选择它,是因为这个插件提供一个文章目录小工具,可以放到侧栏。其它同类的插件或者实现,都是把目录显示在文章内部,比如开头或者结尾,但是在阅读过程中,这其实还是跟没有一样。
WordPress自带的文章编辑框实在是弱爆了,曾经想换成MarkDown编辑器,但是换上它之后担心以后迁移比较麻烦,毕竟保存在数据库中的内容都是markdown文本,而不是渲染后的HTML文本。
前两天在网上无意间看到一篇讲ZenCoding的新闻,突然想起这个几年前折腾过的神器,想都不想就开始在Wordpress主页上搜索有没有相关的插件了。
ZenCoding现在貌似改成Emmet了,主页为这Emmet — the essential toolkit for web-developers。WP上搜索到一款插件,叫做WP-Emment,这款插件貌似下载的人不多。
source语法的引入,使得shell的脚本也可以像其它语言一样,一份代码能够分成多个模块,基本的模块可以像库文件一样被多个脚本使用。例如/etc/init.d/functions
,它被多个服务脚本使用。
source除了导入库代码的作用之外,它还可以用于导入配置文件,这个在Linux系统中使用的非常广泛,因为大多数配置文件都是文本格式的,而shell本身又没有解析过于复杂的配置文件的能力,例如xml、json等。典型的例子有,/etc/default/rcS
或者/etc/sysconfig/network
等等。
也正因为如此,一旦Shell脚本的代码量到达一定的规模,模块化的趋势是必然的,很多地方都会用到source,所以理解source是很有必要的。source的过程,其实就是将脚本导入到当前的执行环境下,并且依次执行其中的代码。因此对于被source的脚本来说,它的一切环境变量都是与当前环境保持一致的,被source脚本中对环境做的任何改动都会影响到当前的执行环境。
有时候写代码的时候,要新建一个文件,假如是.py。那么首先我们得新建一个文本文件(.txt),然后再重命名成xxx.py,因为改变文件扩展名的缘故,还会弹出一个确认的对话框。非常烦,那么有适合懒人的方法吗?答案是肯定的,只要你肯去找,网上的方法非常多。
Windows下一些定制或者或少要去修改注册表,说实话,对Windows的注册表真得不是非常感冒,但是Windows许多神秘的东西都隐藏在这里。
首先创建一个文本文件,改名为add_item_in_new_context.reg(注册表文件是以.reg为扩展名的)。然后将以下内容写到该文件中:
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.py\ShellNew] "FileName"="sample.py" "NullFile"=""
该文件的目的是在HKEY_CLASSES_ROOT\.py路径下创建一个项ShellNew,并在该项下创建一些键值。ShellNew就是对应于右键新建菜单,换句话说,如果要删除不要的新建项目,也可以在注册表中删除对应的ShellNew项。而FileName这个键的目的是,在新建的时候使用一个模板文件来创建,有时候代码都是需要在文件开始处放一些注释和说明的,那么可以写一个sample.py:
#!/bin/env python # coding=utf-8 '''A simple sentence to describe the function of this module. Add detailed description here if need. Eample: # python ./sample.py -t # ... ''' # Can be 'Prototype', 'Development', 'Product' __status__ = 'Development' __author__ = 'yourname <yourname @example.com>' # Add your code here # Delete the description when you start coding. def usage(): '''Show script help information.''' pass def main(): '''The main entry.''' pass if __name__ == '__main__': main() # vim: set expandtab smarttab shiftwidth=4 tabstop=4:
然后把sample.py放到C:\Windows\ShellNew目录,现在再试试右键新建,会出现Python文件。
不过我并没有用这种方法,让.sh文件也成功,有空再研究下。
博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的Widgets访问相关的文章)就需要滚动鼠标,移动到页面的头部。比较人性的一个设计是,在页面的底部(或者中靠近下的位置)添加一个“回到页面顶部”的按钮,可以快速定位到文章的顶部位置。
这个功能设计起来不难,可以采用如一文中提到的锚链接形式,例如回到顶部按钮是一个链接:
<a href="#top">Top</a>
将其放到页面底部,点击该链接可以直接定位到页面顶部。但是如果我们不希望用链接来实现呢,而是模拟一个按钮(用span),并且希望按下回到顶部按钮的时候,可以比较平滑地回到顶部,那该怎么做呢?代码非常简单,这里只用到些许的CSS样式以及jQuery代码。
首先在在文章页面body底部添加以下代码(index.php或者single.php):
<span id="back-to-top">Top</span>
为了方便起见,以上按钮的代码在jQuery中创建添加,不需要手动去修改php文件。同时,利用jQuery完成按钮的行为,主要通过监听window的onscroll事件,当滚动距页面顶部超过100px的时候,淡入显示按钮。当滚动距页面顶部少于100px的时候,淡出隐藏按钮。使用jQuery的animate函数,可以实现平滑地滚动效果(利用document.body或者document.documentElement的scrollTop属性完成动画效果)。
添加的jQuery代码如下所示:
/* Add a back to top button */ function back_to_top() { /* Cache back-to-top button object */ var $top = $('<span id="back-to-top">Top</span>').appendTo('body'); /* Cross-browser compatible in scrollTop */ var $body = (!window.opera) ? $('html, body') : (document.compatMode == 'CSS1Compat' ? $('html') : $('body')); if ($top.length == 0) return; /* Hide back-to-top button at first */ $top.hide(); /* Fade in back-to-top button when need */ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $top.fadeIn(); } else { $top.fadeOut(); } }); /* Scroll to top when click back-to-top button */ $top.click(function () { $body.animate({ scrollTop: 0 }, 800); }); } back_to_top();
同时在博客样式(style.css)中添加以下自定义的样式内容:
#back-to-top { background-color: #F5F5F5; bottom: 0; box-shadow: 0 0 6px #808080; color: #444444; padding: 5px 10px; position: fixed; right: 50px; cursor: pointer; }
这里将按钮固定定位到(position: fixed
)页面右下角,并且添加边框阴影等效果。
最后附上一段区分外部链接的代码片断(摘自Learning jQuery 3rd edition)
/* Add tag next to the external link */ $('.column .post-entry a').not(':has(img)').filter(function() { return this.hostname && this.hostname != location.hostname; }).addClass('external').attr('target', '_blank');
在看到一些Demo教程页面的时候,突然想到一个问题,在做Demo的时候往往需要插入一些单独的与Demo相关的样式,这些样式是如何添加的呢?
因为接触WordPress不久,起初我只是联想到在自定义博客的时候搜索到的模板页面(参考给你的wordpress新建独立的tag页面),本博客的Archives、Categories等页面都是采用这种方法实现的,但后来仔细一想觉得这种方法太不切实际了,那岂不是要给每个页面都添加一个模板页面。
然后,我又想WordPress的编辑/发表文章的HTML编辑框可否添加样式<style>
,试了下发现确实可以,不过自然地添加的样式是追加在所跟随文本的后方,而不是在<head>
内。
有没有一种方法可以在<head>
中添加一小段为本文章而单独设定的样式呢,而又类似在编辑框中那样可以方面的添加样式内容? 经过万能的Google搜索,找到一篇与我的问题非常契合的博客Custom CSS Per Post。文中作者提供了两个可以选择的方法,两者都可以在主题的function.php中添加少量代码实现,而无需为止安装额外的插件。