打造博客园(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

赞 (0)

相关推荐

  • 打造博客园(cnblogs)超级自定义界面

    打造博客园(cnblogs)超级自定义界面

    定制博客界面的核心方法是通过引用我们自己上传的外部JS,使外部JS的代码能在当前博客页面上执行,从而用这个JS修改页面DOM结构(加入新的界面元素,加入引用自定义的CSS,加入新的界面交互功能),然后我们就可以在自己写的这个外部JS里任意发挥了. 在博客园中的博客页面中引用外部JS的方法: 进入博客设置页面->设置->子标题,在这里,你可以输入你博客的一些子标题的内容,同时,你其实还可以输入如下html:<script src="XXXX">XXXX代表你的JS

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

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

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

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

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

  • python3实现暴力穷举博客园密码

    我之前想写路由器的密码暴力破解器,我手上只有极路由,发现极路由有安全限制,只能允许连续10密码错误,所以我改拿博客园练手. 博客园的博客有个功能是给博文设置一个密码,输入正确的密码才能看到文章的内容.经过测试发现这个密码验证功能,既没有验证码也没有提交频率的限制, 要写这个针对博客园的密码暴力破解器模型会非常简单,很好实现. 比如打开这个博文,会显示一个密码输入框:http://www.cnblogs.com/post/readauth?url=/muer/archive/2011/11/27/

  • 用ajax自动加载blogjava和博客园的rss

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>this is test</title> <sc

  • 如何利用http协议发布博客园博文评论

    如何利用http协议发布博客园博文评论

    先给大家介绍下实现原理: 给博文提交评论的实质就是通过http协议服务器发送一个post请求.在发布评论前,我们需要做什么呢?对,是必须要登录的.但登录是另一件事情,我们这里先不讨论.用户登录后,服务器给客户端设置一个cookie.http是无状态的.也就是说客户端向服务器发送请求后,服务器返回响应.一次通信完成.服务器不会记得刚才是谁向自己发送请求.所以客户端需要拿着服务器给自己设定好的cookie向服务器发送请求并告知服务器自己的身份,服务器根据cookie产生响应. 准备工作: 为了完成本

  • Python 批量刷博客园访问量脚本过程解析

    Python 批量刷博客园访问量脚本过程解析

    今早无聊...7点起来突然想写个刷访问量的..那就动手吧 仅供测试,不建议刷访问量哦~~ 很简单的思路,第一步提取代理ip,第二步模拟访问. 提取HTTP代理IP 网上很多收费的代理和免费的代理IP 如: 无论哪个网站,我们需要的就是爬取上面的ip和端口号,整理到一起. 具体的网站根据具体的结构爬取 比如上面那个网站,ip和端口在td标签 这里利用bs4爬取即可.贴上脚本 ##获取代理ip def Get_proxy_ip(): print("==========批量提取ip刷博客园访问量 By

  • Go秒爬博客园100页新闻

    利用go语言的协程并发优势爬取网页速度相当之快,博客园100页新闻标题只需一秒即可全部爬取 package main import ( "bytes" "fmt" "github.com/PuerkitoBio/goquery" "log" "net/http" "runtime" "strconv" "sync" ) func Scraper(p

  • Python如何基于selenium实现自动登录博客园

    Python如何基于selenium实现自动登录博客园

    这篇文章主要介绍了Python如何基于selenium实现自动登录博客园,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要做的准备: 本文章是使用Chrome,所以需要Chormedriver.exe,具体的下载过程可以百度查到 Selenium是一种自动化测试工具,能模拟浏览器的行为,所以今天我就模拟一下浏览器登陆博客园的行为. 首先,分析问题,登陆博客园需要做些什么: 1.打开浏览器 2.输入博客园主页的网址 3.点击登陆按钮,等待页面跳

  • 详解Python爬虫爬取博客园问题列表所有的问题

    详解Python爬虫爬取博客园问题列表所有的问题

    一.准备工作 首先,本文使用的技术为 python+requests+bs4,没有了解过可以先去了解一下. 我们的需求是将博客园问题列表中的所有问题的题目爬取下来. 二.分析: 首先博客园问题列表页面右键点击检查 通过Element查找问题所对应的属性或标签 可以发现在div class ="one_entity"中存在页面中分别对应每一个问题 接着div class ="news_item"中h2标签下是我们想要拿到的数据 三.代码实现 首先导入requests和

随机推荐