Reeoo.com完整截图展示功能上线
Reeoo.com的大图功能正式上线了!这应该是Reeoo上线以来,最大的一次功能改进了。
因为之前网盘的不靠谱,停止了单独的网页完整截图打包分享,就寻思着怎么把这些完整的截图用一种更好的方法共享出来,那就是把大图跟每一个文章内容关联起来。当然这个其实是非常早之前就已经想做的功能,但由于完整截图的体积比较大,这对主机的带宽跟容量都是一种巨大考验,毕竟这只是一个个人的兴趣站,并非什么商业网站,可以投入很多的费用用于带宽种容量之类的。
现在网站上的600*400的尺寸截图除了整齐规则的原因之外,也有很大一部分就是因为带宽和容量的顾虑。
最近用了几天时间研究了七牛云存储的功能,其实说是研究,“码盲”不过就是研究七牛的提供的辅助工具怎么用而已。然后把硬盘里所有的网站截图大图都同步上传到了七牛上,所以才有了现在的大图分享功能。
在每个内容页面的图片右下角,都有一个完整截图的链接,需要时可以随时点击,显示出来的大图也可以自行另外存储到本地:

展开完整大图的效果:

Reeoo上的第一个文章的发布日期是2009.11.18,距离现在已经快满3年了,这3年里因为换电脑之类的原因,导致了最初的六百多张完整截图失踪了,所以现在网站上收录的2100多个网页截图,但实际的完整大图只有1500多张,所以如果查看到最开始的那600多个文章时,可能导致没有完整的截图显示。我会抽时间想办法慢慢补全它们的。
当然,现在这个完整截图的展示效果还不够完善,比如原图很长时,会因为屏幕的原因自动压缩得非常小,可能就需要另开窗口打开图片查看。这个还在想办法改善它。
快去体验体验吧!
关于Prower V5及Reeoo V3主题的修改
因为在Prower V5及Reeoo V3这两个主题里,使用了一些微的HTML5标签,但由于IE浏览的一些版本不支持HTML5的新标签,所以就在主题里引用了一个html5.js的文件,来保证IE浏览器的正常解析。
这个html5.js文件是直接引用了托管在Google Code上的文件,但是因为某些众所周知的原因,这个地址会间歇性的无法访问,就导致IE浏览器在加载这个文件时会遇阻,导致整个页面卡住,可能无法正常解析。
修改这个不算BUG的BUG的方法是,把这个html5.js文件下载到你本地,然后上传到到你自己网站空间里,上传到相应的主题文件夹里,然后再修改主题的header.php文件:
<!–-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]–->
修改成
<!--[if IE]> <script src="<?php bloginfo('template_directory'); ?>/html5.js"></script> <![endif]-->
Prower V5及Reeoo V3两个主题同样的修改方法。或者你把这个html5.js上传到一个你自认为是稳定的地址,然后这个调用地址使用那个即可。
管理你的阅读
这里要推荐的是阅读应用——ReaderMX。
你是否也与我一样,经常在浏览Twitter、微博或是在QQ群里看到一些人推荐的一些好文章,但是又不能马上停下正在做的事情开始阅读这些文章呢?有时从一种状态切换到另一种状态是需要时间的,而阅读无疑是需要状态的。
于是,你就需要和我一样,对于接收到的值得阅读的文章先进行收藏,然后找一个时间慢慢的细品。在阅读这些文章的时候,你可能会发现有些内容会对你产生深远影响,从而值得反复的阅读,并且愿意将它们分享给你的朋友们。
有时,碎片化的信息里并不能提供多少有价值的内容,从而对内容的筛选也会成为一个困扰,而如果有朋友已经帮你筛选了一些值得阅读的内容,那无疑是很美好的事情。
收藏文章的方式有很多种,添加到浏览器书签也许是最常用的一种,但是我喜欢更直接的,犹如剪报一样直接将原文保存起来(虽然我没有做过剪报这事),这样只要提供保存内容服务的服务商没有关闭服务,那么就不用担心这些保存的内容会遗失,也不用担心原始网页突然无法访问,而可以随时随地的进行翻阅。
收藏的文章内容多了的时候,而其中又有一些是同一主题的内容;有时与朋友探讨问题,有一系列的文章需要与他进行分享;一篇巨长的文章,可能分成上中下三篇,或者是很多个小章节;……
这种时候,也许一个带分享功能的阅读清单会给你带来很大的便捷。
自从Google Reader取消了应用内的分享功能,而粗暴的改为在Google Plus里进行分享的时候,Google Reader的作用就少了一半。而从前订阅的那些博客们,已经或多或少的减低了写博客的频率,甚至是他们的博客都已经消失了。
也许,是时候给RSS阅读一些不一样的体验。
这一切,都值得期待,不是吗?
如果,你与我一样,那么你应该试试ReaderMX,虽然目前还不够完善,但未来也许可以管理你的阅读。

WordPress主题ProwerV6发布下载

距离Prower V5主题发布已经有一年多了,是时间更新一下新主题了。
使用非IE浏览器(包括IE内核的)或是IE9以上版本的浏览器进行访问,获得更好的浏览体验。
Prower V6版的新主题增加了WordPress的日志形式支持(主要是每个日志前的小ICON图标,可以在编写日志的时候设置形式类别,具体的形式表现还没做差异化处理),不过只做了一部分的:日志、相册、视频、音频,主要是这几个平时用得多。以及进行了简单的屏幕适配。其它部分与V5版本差不多,依然是简洁为主的一栏式,宽分辨率的屏幕下可以显示侧边栏。
对屏幕的适配原则是,在大屏上尽量多显示一些相关内容,而在小屏上则是以内容显示为主,这里大屏与小屏的区分,除了以PC、移动设备进行区分外,屏幕分辨率小于1280的都被我划分在小屏的行列里,而大于1280分辨率的屏幕则归划为大屏,也就是只有在大于1280分辨率的情况下,才会显示侧边栏内容,其它的屏幕上是不显示侧边栏内容的。
在大于1280的分辨率下,侧边栏内容显示,它是这样的:

在小于或等于1280分辨率的情况下,侧边栏被隐藏掉:

当然,iPad的横屏模式下,显示与小于1280的分辨率显示是一样的:

iPad的竖屏模式下,则使用了与iPhone一样的显示模式,除去了内容之外的那些辅衬元素:

iPhone下的显示,当然之前有朋友留言提醒说导航栏过多时,会被隐藏掉,这里修正了这个问题,当导航栏超出屏幕宽度时,是可以拖动导航栏以显示被隐藏掉的导航内容的:

内容页全貌:

主题有两处广告,分别是在底部以及内容页中间一处,需要修改这两处广告的朋友请到主题的以下两处修改,删除代码或是替换为自己的广告都可以,当然我还是希望使用的朋友能尽量保留一下我的广告,算是对我的支持,广告中的内容都是我自己做的产品。
底部广告修改,footer.php文件,删除或是修改代码:
<div id=”sponsor”>
<a href=”http://reader.mx/?utm_source=prower&utm_medium=web&utm_campaign=banner” target=”_blank”><img src=”http://media.reeoo.com/readermx.jpg” width=”250″ height=”100″ alt=”ReaderMX” title=”ReaderMX”></a>
<a href=”http://faq.wopus.org” target=”_blank”><img src=”http://media.reeoo.com/faq_side.png” width=”250″ height=”100″ alt=”WordPress问答” title=”WordPress问答”></a>
<a href=”http://reeoo.com” target=”_blank”><img src=”http://media.reeoo.com/reeoo.jpg” width=”250″ height=”100″ alt=”精美网页设计欣赏” title=”精美网页设计欣赏”></a>
</div>
内容中间部分广告修改,single.php文件,删除或是修改代码:
<div><a title=”web design inspiraiton” href=”http://reeoo.com” target=”_blank”><img alt=”reeoo.com – web design inspiration” src=”http://media.reeoo.com/reeoo_728.jpg” width=”728″ height=”90″ /></a></div>
另外,如果还想修改主题的头部或是底部的背景图及底色的话,请至主题的images文件夹里替换相应图片及修改style.css里的相应颜色代码。
头部背景图(blue_bg.png),颜色代码为:
#header {background:#0067aa url(images/blue_bg.png) repeat; border-bottom:1px solid #005b97; box-shadow:0 1px 5px #003f68; width:100%; padding:5% 0; color:#90d5ff; text-shadow:1px 1px #005b97; z-index:1; position:relative;}
修改这里的background、border-bottom、box-shadow、color以及text-shadow的颜色值,分别是背景底色、下边框色、阴影颜色、文字颜色及文字阴影颜色
底部背景图为(gray_bg.png),颜色代码为:
#footer {background:#888f96 url(images/gray_bg.png) repeat; border-top:1px solid #fff; box-shadow:inset 0 2px 5px #555; font-size:0.8em; padding-bottom:1em; padding-top:1em; color:#292f34; text-shadow:1px 1px #adafb1;}
#footer a {color:#292f34;}同修改头部颜色一样,修改background、border-top、box-shadow、color及text-shadow的颜色值,另外再修改#footer a这里的链接文字颜色
请点击下载:ProwerV6主题
非常重要的,请在使用的过程中保留主题底部关于这个主题的链接,谢谢!
修改Prower V6主题为固定双栏版本
Prower V6主题使用了屏幕自适应的设计,当屏幕宽度小于或等于1280px时,隐藏侧边栏内容只显示单栏,如果屏幕宽度大于1280px的话,则显示带侧边栏的双栏版本。
最近陆续的有同学从微博上问我怎么固定显示双栏结构,在这里做一个统一的答复。
所有的修改,都是只在style.css这个样式表里:
1、删除以下样式代码:
@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}
或是可以使用注释的方式(/**/),修改为
/*@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}*/
2、修改以下代码
/*Sidebar*/
#sidebar {font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:inline-table; vertical-align:top; width:30.3%; margin:3% 1.5%; padding-top:2%; border-top:1px solid #ccc; position:relative;}
为
/*Sidebar*/
#sidebar {float:right; width:18%; max-width:250px; font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:block; border-top:1px solid #ccc; position:relative; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
再修改代码
#header_box,.nav,#content,#footer_box {width:62.5%; margin:0 auto; max-width:800px;}
为
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
OK!大功告成!