Skip to content

yanglr/cnblogs-theme-xSimple

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 

欢迎访问作者的个人网站: 极客中心

cnblogs-theme-xSimple

博客园主题-Extremely Simple(极简)

这是一款前端小白也能快速上手的给力博客园主题~

本人博客园博客的所有代码在此github项目的src文件夹中~

准备工作

  1. 首先你得有个cnblogs博客
  2. 申请js权限

源码使用步骤:

  1. 打开 博客后台管理 → “设置”
  2. 在博客皮肤选项卡中将博客皮肤设置为: LessIsMore
  3. src文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内
  4. 将同一文件夹下的 页首.html 复制到 页首Html代码 代码框内
  5. 将同一文件夹下的 页尾.html 复制到 页脚Html代码 代码框内
  6. 保存,即可见效。

js权限申请

登陆后依次点击“我的博客” → “管理” → “设置”,在下拉后找到“博客侧边栏公告”,后方有一个“申请js权限”。

Apply_js

或者也可进博客园园子页面(https://home.cnblogs.com/feed/all/),发状态@博客园团队,申请开通js权限。

也可发个邮件到contact@cnblogs.com申请js权限。

申请时内容模板已为你备好:

尊敬的博客园管理员:

本人请求申请开通js权限,希望能够把博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,多谢~

提交完申请,会弹出提示:

JS权限申请已提交,待审核。

剩下的就是耐心等待了,一般来说挺快就会通过。如果设置页面上公告栏标题右侧不存在“申请js权限”,说明已成功开通js权限。

如何模仿一个博客园的自定义风格(样式css+动态效果js)?

模仿一个cnblogs的全局css,只需打开Chrome浏览器,按下F12,找里面的skin css和custom css。

markdown样式自定义

默认markdown状态下,代码中的字比较小。

在页面顶部添加"自定义搜索"功能

效果图:

customSearch1

在页面顶部添加"音乐播放器"(Flash)播放背景音乐

163music_palyer

表现形式一:单曲播放 (type = 1)

表现形式二:列表播放 (type = 0)

playList

效果图:

163music_player

在页面顶部添加"Fork me on Github"图标

效果见本页面右上角。

如果想对该图标进行更多颜色或位置的设置,请参考:GitHub Ribbons - The GitHub Blog.

为导航栏设置渐变背景色

在公告栏添加滚动文字

效果图:

slide_words

在公告栏加入自己的社交网络账号 - 图片链接

效果图:

socialLinks

在公告栏添加一个能旋转的rss图标

效果图:

rss_roate

在公共栏添加"小人时钟"(Flash)

效果图:

clock_result

在公共栏添加"站点统计"功能

在公告栏中加入"自定义搜索"(PopUp弹窗)

效果图:

customSearch2

页面底部添加"回到顶部" + "收藏" + "快速评论"功能

效果图:

custom_Tool_Bar

"自动移动的目录"功能

效果图:

autoMoveContents

改进评论的显示样式

这里我索性改成了熟悉的微信聊天的样式。

效果图:

custom_comments

在公告栏添加"友情链接"

设置方法(见下图):

编辑分类 -> 添加链接,设置好后公告栏上会显示相关内容,不过可能会有延时,需要等一会。

friend_links

效果图:

friend_link_result

"博客签名"功能

虽然cnblogs博客后台提供了"博客签名"功能,测试发现该该方法实现的博客签名在IE中打开时不显示,只好改为用跨浏览器的JQuery来实现了。

禁用页面的"选中复制"功能

综合考虑后,采用了后文中的"复制博客内容时自动加版权说明"。

不显示底部广告

修改导航栏(修改部分链接的文字 + 增加下拉菜单)

效果图:

custom-nav

微博秀的嵌入(支持http/https访问)

效果图(见本博客左侧公告栏):

weibo_show

分享组件的嵌入(支持http/https访问)

效果图:

baiduShare

打赏功能

本博客基于开源插件 tctip v1.0.3 来实现~

效果图:

custom-nav

还看到过一个不错的方法,亲测有效:自制简易打赏功能 - EritPang .

复制文字时自动加版权

效果图:

copy-With-Copyright

隐藏博文右下角的"反对"按钮

效果请见本人博客页面右下角。

Releases

No releases published

Packages

No packages published