打造博客园(cnblogs)超级自定义界面_其它综合

定制博客界面的核心方法是通过引用我们自己上传的外部JS,使外部JS的代码能在当前博客页面上执行,从而用这个JS修改页面DOM结构(加入新的界面元素,加入引用自定义的CSS,加入新的界面交互功能),然后我们就可以在自己写的这个外部JS里任意发挥了。

在博客园中的博客页面中引用外部JS的方法:

进入博客设置页面->设置->子标题,在这里,你可以输入你博客的一些子标题的内容,同时,你其实还可以输入如下html:
<script src="XXXX">
XXXX代表你的JS的绝对URL地址。

所以接下来要做的事是想办法找个地方把你的JS上传上去,然后得到这个JS的链接。正好博客园可以上传文件:
进入博客设置页面->文件
在这个页面,我们可以上传我们自己的JS,然后就可以得到格式为http://files.cnblogs.com/[博客地址]/[文件名]的URL,例如我的博客上实现UI的核心代码的URL是http://files.cnblogs.com/laynelin/UI.JS

顺便多说一句,实际上要打造复杂的界面,你可能需要上传不只一个JS。(当然你也可以考虑到performance原因,将多个JS合并成一个文件,然后再把crunch(压缩)一把。),而且你还需要上传CSS和图片。
CSS也可以用和JS同样的方案上传。但至于图片,强烈建议你用写文章时用到的CuteEditor里的图片上传功能。在那里,可以给图片建子目录,还可以一次上传任意多个文件,非常适用于涉及图片很多的页面定制需求。

说到CSS,由于我们可能会需要完全重写原有的博客页面样式,所以墙裂推荐大家在设置博客页面模板时选择“禁用模板CSS”.

OK,剩下的事情就是大家充分发挥自己的想象力,通过我们自己的JS,打造我们自己的界面结构,并通过自己的CSS和图片进行界面装饰了。

我会在后续文章中陆续跟大家分享一些技术细节。也欢迎大家留言告诉我大家有哪些想知道的技术细节。
来自:http://www.cnblogs.com/laynelin

时间: 2024-09-20 12:46:08

打造博客园(cnblogs)超级自定义界面_其它综合的相关文章

将博客园(cnblogs.com)数据导入到wordpress的代码_php实例

我将这个分享出来,如果以后有谁需要可以直接下载下面插件 使用方法: 在cnblogs选择备份数据,导出一个XML到本地: 下载附件中的插件,安装至\wp-content\plugins目录: 后台开启插件后,可以在"工具"中找到"Cnblogs数据转换",进入: 选择刚才下载的XML文件,上传后系统会自动将数据转换并导入到wordpress中 备注: 这个插件只是单纯将博客园日志.随笔.文章导入到wordpress中,不会导入评论相册数据,因为cnblogs不提供这

导入把博客园/开源中国的文章导入到wordpress博客

在11年的时候就发布过一个数据导入的插件,最近有朋友反馈会报错.经过检查问题应该出在xml文件检测上. 在重新优化这款插件之前,就一直有个想法,希望能够按照官方提供的wordpress-importer的文件导入流程来优化这款插件流程.由于时间关系,一直搁置没有动过.介于这次机会重写了一遍这款插件. 这款插件已在wordpress插件中心上线,大家可以直接在wordpress控制台进行在线安装,安装方法: 在wordpress控制台,点击"安装插件"搜索"cnblogs&qu

利用正则表达式抓取博客园列表数据_正则表达式

鉴于我在要完成的asp.net MVC 3 仿照博客园企业系统要用到测试数据,我自己输入太累,所以我就抓取了博客园的部分列表数据,还请dudu不要见怪. 在抓取博客园数据的时候采用了正则表达式,所以有不熟悉正则表达式的朋友可以参考相关资料,其实很容易掌握,就是在具体的实例中会花些时间. 现在我就来把我抓取博客园数据的过程叙述一下,如果有朋友有更好的意见,欢迎提出来. 要使用正则表达式抓取数据,首先就要创建一个正则表达式进行匹配,我推荐使用regulator,这个正则表达式工具,我们可以先使用这个

博客园(cnblogs)右侧添加悬浮打赏功能

博客园(cnblogs)右侧添加悬浮打赏功能 原文地址:http://www.cnblogs.com/yingzi1028/p/6253718.html 小麦苗博客园地址:http://www.cnblogs.com/lhrbest 今天小颖逛博客园时,发现有的园友的博客右侧都有一个:                                                                         看了后,小颖也想给自己的博客里弄一个,所以就百度了一下,在参考:博客

博客园博客撰写工具【开源】(可以直接黏贴图片) (转)

  更新2015-05-26 已经解决掉那个BUG,并增加了一些新功能优化了代码 BUG 如果你的用户名和你的博客Id不同的话,发布博客不成功 感谢若云帮忙重现BUG 2015-5-21更新 可以从博客园拉取最近一篇博客,并修改这篇博客了 (注意:如果拉取到的最近一篇博客,并非你草稿箱里的博客,那么你修改过之后,再保存是不会保存成功的:博客园API里获取到的数据信息没法判断这篇博客是否为草稿,如果能的话就好多了) 先说废话 最近在写Nim相关的博客 (Nim是门非常不错的语言,我接下来还会写很多

【工具】今天有人问我可以直接离线一个完整的网站吗?有没有什么工具之类的?我推荐一款:Httrack (网站复制机)案例:离线你的博客园

搞安全的朋友这款工具可能用的比较多,毕竟信息收集阶段还是很必须的,这篇文章主要讲一下离线你的博客园案例 官网:http://www.httrack.com/ 里面有windows,linux,Android等等几个版本 先简单介绍一下,具体的你可以自己摸索一下 离线的另一个好处就是发布O(∩_∩)O~可以在自己站点发布,或者生成离线chm文档eg:http://dnt.dkill.net/dnt/cnblogs/dunitian/www.cnblogs.com/dunitian/index.ht

彻查手机端浏览博客园出现广告一事!

背景: 不知什么起,用手机端浏览博客园的频率变多了. 也不知什么时候,浏览就成了这个样子,满屏是广告: 手机端就那么点空间,三分之二都是广告,我靠!!!!! 于是,不断追寻着真相!!! 1:怀疑打赏插件: 细心的网友发现,我把打赏插件去了,而是直接换成了在下面的两张图片. 在发现广告之初,我的思维是这样的: 1 2 3 4 5 A:我发现其它人的博客基本没有广告.   B:只有我的博客有广告.   C:电脑没有,只有手机端出现. 因此,我怀疑我的博客链接的第3方的网址引发的. 于是,我彻查了一下

微信快速开发框架(五)-- 利用快速开发框架,快速搭建微信浏览博客园首页文章

这几天接连发布了<快速开发微信公众平台框架---简介>和<体验微信公众平台快速开发框架>几篇关于微信平台的文章,不过反响一般,可能需求不是很多吧.闲来无事,还是继续改造一下这个框架. 今天更新了框架代码,听取了 @RMay 的建议,加入了一个信息中间件,用来处理xelement,避免了重复解析,所以所有接口都更改了下.此次更新如下: 1.增加信息中间件MiddleMessage 2.更改了接口参数类型,把原来的XElement都改成了MiddleMessage 3.删除了Demo项

【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结

原文 http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html 去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿. 具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为这2个软件各有优点,各有缺点. 1.首先用LiveWriter发博客显然更专业,发布后的效果也与本地最接近,但是在编辑功能上肯定大不如Word,另外一个最大缺点是它