详谈如何定制自己的博客园皮肤

这段代码的意思就是定义一个 canvas 元素，然后使用我下载的 canvas-nest.min.js 库文件去渲染动画。

动态标题

闲逛 codepen 时找到的一个动态文字效果：codepen上的动画文字效果，觉得还挺炫的。我做了一个简单的移植。

效果图

使用方式：粘贴如下代码到页首Html代码即可。

以上引用文件被我压缩了，源码在我的 Github 上：

• title.js
• title.css

如果你也想使用这种动态标题，需要对源码做一些修改

// 为了渲染 cavans 效果的标题，生成一个 title 列表
function generateBlogTitle() {
  var root=document.createElement("div");
  root.id='ui';
  for (var i=0; i < 50; i++) {
    var node=document.createElement("div");
    node.className='text';
    node.innerHTML='静默虚空';
    root.appendChild(node);
  }
  document.getElementById("blogTitle").appendChild(root);

  var subTitle=document.createElement("h2");
  subTitle.innerHTML='Talk is cheap, show me the code.';
  document.getElementById("blogTitle").appendChild(subTitle);
}

将上面代码中的 node.innerHTML='静默虚空'; 替换为你的主标题；

将 subTitle.innerHTML='Talk is cheap, show me the code.'; 替换为你的子标题。

另外，需要将博客管理后台的主标题、子标题清空。

文章内容样式定制

有关文章内容的样式定制，我都写入了 cnblog.js 和 cnblog.css。当然，为了提高访问速度，这两个文件被我压缩了。

使用方式：添加以下代码到页首Html代码

由于，我实在是懒得一一讲解代码，所以仅在下面罗列这两个文件支持的特性。如果想在我的源码基础上作一些修改，可以在这里访问源码：

cnblog.js
cnblog.css

带头像的评论栏

博客园的评论栏默认不显示用户头像，这样显得非常单调。所以我添加了一段定制代码。

效果图

js 源码

自动生成文章目录

如果你的文章内容较长，有个目录，可以帮读者快速定位感兴趣的内容。

效果图

快捷操作栏

这个也是我从博客园其他朋友那儿学习的，但是实在想不起出处了。

响应式布局

我对于博客做了一些简单的响应式布局处理。使得读者在移动端上访问时不至于有过于糟糕的体验。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media only screen and (max-width: 736px) {
      
  #navigator {
      
    width: 90%;
    margin: auto;
    float: none;
  }

  #mainContent {
      
    width: 90%;
    margin: auto;
    float: none;
  }

  #sideBar {
      
    width: 90%;
    margin: auto;
    float: none;
  }

  ...

效果图

样式的美化

剩下的内容就是一些琐碎的美化细节了。比如我对标题文字增加了阴影效果，表格重新渲染了颜色等等。如果不喜欢，请自行参考我的源码修改。

资料

本文的样式定制源码

github-corners

canvas-nest

codepen上的动画文字效果

美化博客园界面（让您的博客更加赏心悦目）希望对您有用

jQuery]3D效果的标签云