如何搭建博客园博客主题

残星落影
355 阅读3分钟

如何搭建博客园博客主题

申请开通博客

注册博客

`第一步：输入博客园地址https://www.cnblogs.com/`
`第二步：点击注册，邮箱验证，最后登录`

申请博客

`第一步：进入我的博客功能栏`
`第二步：申请开通博客`
		申请理由：xxxx
        真实姓名：xxxx
        职	位：xxxx
        单	位：xxxx
        技术兴趣：xxxx
`第三步：立即开通博客`
        用户中心栏显示申请开通博客状态---申请成功提示申报批准，立即开通博客
	
`第四步：填写博客地址和选择博客默认主题` 
        #博客地址：__________ (填写后不推荐以后再修改地址)
        #博客皮肤：__________(推荐使用枫叶主题 red_autumnal_leaves)
        	(注：这个博客皮肤为自己默认的博客主题)

`第五步：查看自己的博客`
        选中·管理·或·设置·--->
            选中·基本设置·---->(此处可修改自己的博客标题和作者名)
            	<!-----申请开通JS权限-------->(申请成功后可在博客中添加插件)

主题样式

主题说明

	#设置
    	>页面定制CSS代码
			`禁用模板默认CSS` 勾选后博客园默认主题失效，若想更改博客主题必须勾选
        >博客园侧边栏公告
			*可加入看板娘效果代码*
            *音乐插件*
        >页首HTML代码
			*加入自定义主题样式*
            *加入背景动画*
            *支持脚本标签云相关库*
            *点击爱心特性*

点击特效

//点击特效在>页首HTML代码中设置
//源码如下
<!-- 点击爱心 -->
<script >
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.οnclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        // var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var a = new Array("❤感谢观看❤","❤","❤喜欢就点个赞呗❤","❤❤","❤快去点赞❤","❤❤❤","❤不是点这里哦❤","❤❤","❤点赞在底部啦❤","❤","❤❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

看板娘

基础看板娘

`基础看板娘`
	功能：(1)人物视线跟随鼠标
    	 (2)点击表情
//源码如下
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        canvas#live2dcanvas {
          border: 0 !important;
        }
  </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
    <script>
        L2Dwidget.init({
      "model": { "jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json"},
      "mobile": { "show": true, "scale": 0.5 },
      "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
    }
);
    </script>
</body>
</html>

//上面代码中model属性导入的就是看板娘的模型
	更改模型：将jsonpath中导入的json文件名修改
    		shizuku：女学生
            tororo：白猫
            hijiki：黑猫
            wanko：茶杯犬
            z16:舰娘
            tsumiki:绿毛少女
            miku：初音
            koharu：Q版水手娘
            hibiki：女学生服
            chitose：西服男
进阶看板娘

`进阶看板娘`
功能：(1)人物视线跟随鼠标
     (2)点击表情
	 (3)点击提示语
	 (4)功能栏
			跳回主页
            提示语
            切换看板娘
            看板娘换装
            照相
            跳转看板娘制作博客
            关闭
//源码   
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/blogs/733703/flat-ui.min.css?t=1648523570"/>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/blogs/733703/waifu.css?t=1648535846"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="350" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home">
</span>
<span class="fui-chat">
 
</span>
<span class="fui-eye">
  
</span>
<span class="fui-user">
  
</span>
<span class="fui-photo">
 
</span>
<span class="fui-info-circle">
  
</span>
<span class="fui-cross">

</span>
</div>
</div>

<script src="https://files.cnblogs.com/files/blogs/733703/live2d.min.js?t=1648523573"></script>
<script src="https://files.cnblogs.com/files/blogs/733703/waifu-tips.js?t=1648523583"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>

光标样式

//在页首HTML代码中添加
<style>
   body {
	cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat6.ico'), auto; 
    }
</style>

主题源码

<!-- 自定制样式文件 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/blogs/733703/cnblog.min.css?t=1648521325" />
<!-- 自定制脚本 -->
<script src="https://files.cnblogs.com/files/blogs/733703/cnblog.min.js?t=1648521247"></script>

<!-- fork github 控件 -->
<a href="https://gitee.com/lht1132950411" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

<!-- 背景动画 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1;
 opacity: 0.5;"></canvas>
<script src="https://live2d-widget-right.oss-cn-hangzhou.aliyuncs.com/canvas-nest.min.js"></script>

<!-- 标签云相关库 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/blogs/733703/jquery.engine3D.js?t=1648522323" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/blogs/733703/jquery.particlePhysics.min.js?t=1648522203" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

文件上传说明

#1.博客主题样式
<!--博客主题文件说明-->
<link rel="stylesheet" href="https://files.cnblogs.com/files/blogs/733703/cnblog.min.css?t=1648521325" />
此处连接地址为本人博客文件地址可自行在网站输入框输入下载源码进行修改上传到自己博客文件中

<!-- 自定制脚本 -->
<script src="https://files.cnblogs.com/files/blogs/733703/cnblog.min.js?t=1648521247"></script>可将此脚本源码下载后在源码中进行修改再上传到自己博客文件中
此脚本链接后在博客文章下面有博客博主转载申明，如下
	作者：残星落影
        欢迎任何形式的转载，但请务必注明出处。
        如果文章和代码有表述不当之处，还请不吝赐教。

#2 进阶看板娘文件
	   waifu.css        可以调节看板娘位置、大小、语言板背景等
       waifu-tips.js     可以调节看板娘发出语句等
       flat-ui.min.css  是看板娘右侧的竖排功能条
       live2d.min.js    是看板娘模型

如何上传文件

进入管理--->
    选中·文件·功能---->
    		拖拽文件上传---->
    		文件管理中右键复制链接---->
    		(此链接可以在·设置·中·页首html代码·引入)

avatar
文章
阅读
粉丝