本博客主题分享

水文一篇～～

缘由

最近有园友问到本博客的主题是怎么弄，其实也是参考其他的博客捣弄一些CSS、JS，前端咋咋，并没啥技术含量，有需要的同学可以拿去用。简单起见，直接把设置的代码全盘贴出来了。

第一步 进入博客设置界面

主题是基于博客模版BlueSky修改的，需要选择此模版

<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.tocify.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.lettering.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.textillate.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/mo.min.js"></script>
<script type="text/javascript">

$(function(){
addMenu();
addPersonInfo()
createTocify();

$('#cnblogs_post_body').prepend('<div id="catalogBox"></div>');
generateContentList();
setTimeout(function(){
$('.topLogo').removeClass('move');
},1000);

// 动画效果
$('#blogTitle h2').textillate({
loop: true,
autoStart: true,
in: {
shuffle: false,
effect: 'bounce'},
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 30,
sync: false,
shuffle: true,
reverse: false,
callback: function () {}
}
});
// 导航动画
$('#navList li').hover(function(){
$(this).addClass('animated swing');

},function(){
$(this).removeClass('animated swing');
});

});

// 添加文章浮动目录
function createTocify(){
var dom = $('<div id="toc" style="display:none;"></div>').appendTo('#topics');
dom.tocify({context:$('#mainContent'),extendPage:false});
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop >1000){
$('#toc').fadeIn();
}else{
$('#toc').fadeOut();
}
});
}

// 添加版权信息
function addPersonInfo(){
var shtml = '<div style="background: #f4f7f8;line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px;  font-size: 14px; border: #e0e0e0 1px dashed;">'+
'作者：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">GeniusLyzh</a><br>'+
'出处：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">http://www.cnblogs.com/GeniusLyzh/</a><br>'+
'本文链接：<a href=""+location.href+"" target="_blank">'+location.href+'</a><br>'+
'本文版权归作者和博客园共有，欢迎转载，须保留此段声明，并给出原文链接，谢谢！<br>'+
'如果阅读了本文章，觉得有帮助，欢迎点击右下角推荐</div>';
$('#blog_post_info_block').before(shtml );
}

//添加個人公告信息
function addContact(){
var shtml ="";
//shtml+= "email：<a href='mailto:hi@linjiajun.com'>hi@linjiajun.com</a>";
// shtml+= "我的小站：<a href='http://www.linjiajun.com' target='_blank' title='http://www.linjiajun.com'>Lyzh's blog</a><br>";
shtml+= "<br>weibo：<a href='http://weibo.com/qylinxia' target='_blank' title='http://weibo.com/qylinxia'>Lyzh</a>";
// shtml+="<br><br>";
$('#profile_block').prepend(shtml);
}

// 添加文章內嵌目录
function generateContentList(){
var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content    += '<div id="navCategory">';
content    += '<p style="font-size:18px"><b style="font-weight:normal;">阅读目录</b></p>';
content    += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content    += '</ul>';
content    += '</div>';

if($('#cnblogs_post_body').length != 0 )
{

$($('#catalogBox')[0]).prepend(content);
}
}
}

function addMenu(){
var menuHtml = '';
menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="https://github.com/jiajunlin">GitHub</a></li>';
menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="http://www.linjiajun.com">我的小站</a></li>';
// menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="http://home.cnblogs.com/u/bigboyLin/">关于我</a></li>';

$('#navList').append(menuHtml);
}

</script>

View Code

以上。