美化cf-blog
美化cf-blog
1、修改主题
yinwang主题,极简风格
博客极其简约,简单到没有任何花里胡哨,专心看文章吧
更换方法
此主题没有分页,故每页文章数要设置很大很大
"pageSize" : 9999
修改主题网址:
"themeURL" : "https://raw.githubusercontent.com/gdtool/cloudflare-workers-blog/master/themes/yinwang/","pageSize" : 9999
效果预览
JustNew主题,一款价值499的主题
价值499的主题.
更换方法
设置logo,不设置使用默认logo
"logo":"https://YourSelfLogo.png"
修改主题网址:
"themeURL" : "https://raw.githubusercontent.com/gdtool/cloudflare-workers-blog/master/themes/JustNews/",
效果预览
2、修改个人标识
"siteName" : "CF workers blog",
//博客名称
"siteDescription":"A Blog Powered By Cloudflare Workers and KV",
//博客描述
"copyRight" :`Powered by <a href="https://www.cloudflare.com">CF Workers</a> & <a href="https://blog.gezhong.vip">CF-Blog </a>`,
//自定义版权信息,建议保留大公无私的 Coudflare 和 作者 的链接
3、添加第三方评论
推荐小西八产品来必力,最简单
官网地址:https://livere.com/
注册教程
https://blog.iccia.fun/article/000007/.html
cf-blog使用
将给你的代码黏贴进下面代码中将给你的代码黏贴进下面代码中
"commentCode":`来必力代码`,//评论区代码
效果预览
4、添加看板娘
史上最简单-一行代码
在codeBeforHead如下加入
codeBeforHead":`
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
`,//其他代码,显示在</head>前
效果预览
5、页面静态广告
在codeBeforHead或者hcodeBeforBody加入
1.
<div class="tp-ad-text1">
<marquee> QQ 2710383262 </marquee>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="广告招商" target="_blank">广告招商</a>
<a href="http://baidu.com/" title="QQ 2710383262" target="_blank">QQ 2710383262</a>
</div>
<style type="text/css">
.tp-ad-text1 {width:100%;padding-top:6px;box-sizing:border-box;overflow: hidden;background: rgba(255,255,255,.2);}
.tp-ad-text1 a {color:#7fba00;font-size:14px;line-height:38px;text-align:center;border:1px dashed rgba(0,0,0,.2);padding:0 3px;box-sizing:border-box;float:left;width:11.5%;height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0.5% 6px;text-decoration:none;transition:all .6s;}
.tp-ad-text1 a:hover {font-weight: bold;color:#fff!important;background:#7fba00;transition: all .6s;}
.tp-ad-text1 a:nth-child(2n) {color:#f74e1e;}
.tp-ad-text1 a:nth-child(2n):hover {background:#f74e1e;border-color: #f74e1e;}
.tp-ad-text1 a:nth-child(3n) {color:#00a4ef;}
.tp-ad-text1 a:nth-child(3n):hover {background:#00a4ef;border-color: #00a4ef;}
.tp-ad-text1 a:nth-child(4n) {color:#0517c2;}
.tp-ad-text1 a:nth-child(4n):hover {background:#0517c2;border-color: #0517c2;}
.tp-ad-text1 a:nth-child(5n) {color:#601165;}
.tp-ad-text1 a:nth-child(5n):hover {background:#601165;border-color: #601165;}
.tp-ad-text1 a:nth-child(6n) {color:#ffb900;}
.tp-ad-text1 a:nth-child(6n):hover {background:#ffb900;border-color: #ffb900;}
.tp-ad-text1 a:nth-child(7n) {color:#0fc317;}
.tp-ad-text1 a:nth-child(7n):hover {background:#0fc317;border-color: #0fc317;}
.tp-ad-text1 a:nth-child(8n) {color:#601165;}
.tp-ad-text1 a:nth-child(8n):hover {background:#601165;border-color: #601165;}
.tp-ad-text1 a:nth-child(9n) {color:#fba78f;}
.tp-ad-text1 a:nth-child(9n):hover {background:#fba78f;border-color: #fba78f;}
.tp-ad-text1 a:nth-child(10n) {color:#13cf8f;}
.tp-ad-text1 a:nth-child(10n):hover {background:#13cf8f;border-color: #13cf8f;}
.tp-ad-text1 a:nth-child(11n) {color:#f74e1e;}
.tp-ad-text1 a:nth-child(11n):hover {background:#f74e1e;border-color: #f74e1e;}
.tp-ad-text1 a:nth-child(12n) {color:#ffb900;}
.tp-ad-text1 a:nth-child(12n):hover {background:#ffb900;border-color: #ffb900;}
.tp-ad-text1 a:nth-child(13n) {color:#fba78f;}
.tp-ad-text1 a:nth-child(13n):hover {background:#fba78f;border-color: #fba78f;}
.tp-ad-text1 a:nth-child(14n) {color:#f74e1e;}
.tp-ad-text1 a:nth-child(14n):hover {background:#f74e1e;border-color: #f74e1e;}
.tp-ad-text1 a:nth-child(15n) {color:#7fba00;}
.tp-ad-text1 a:nth-child(15n):hover {background:#7fba00;border-color: #7fba00;}
.tp-ad-text1 a:nth-child(16n) {color:#0fc317;}
.tp-ad-text1 a:nth-child(16n):hover {background:#0fc317;border-color: #0fc317;}
.tp-ad-text1 a:nth-child(17n) {color:#0517c2;}
.tp-ad-text1 a:nth-child(17n):hover {background:#0517c2;border-color: #0517c2;}
.tp-ad-text1 a:nth-child(18n) {color:#13cf8f;}
.tp-ad-text1 a:nth-child(18n):hover {background:#13cf8f;border-color: #13cf8f;}
.tp-ad-text1 a:nth-child(19n) {color:#ffb900;}
.tp-ad-text1 a:nth-child(19n):hover {background:#ffb900;border-color: #ffb900;}
.tp-ad-text1 a:nth-child(20n) {color:#f74e1e;}
.tp-ad-text1 a:nth-child(20n):hover {background:#f74e1e;border-color: #f74e1e;}
@media screen and (max-width: 1198px){
.tp-ad-text1 a{
width: 24%;
}
效果预览
2.
<div class="ad">
<li><a href="https://blog.iccia.fun/" target="_blank" style="line-height:60px;height:60px;color:#fff;background:#01AAED;text-align:center;font-size:24px;">广告招商 虚位以待</a></li>
<li><a href="https://blog.iccia.fun/" target="_blank" style="line-height:60px; height:60px ;color:#fff; background:#2F4056; text-align:center; font-size:24px;" >广告招商 虚位以待</a></li>
</div>
<div class="txtguanggao">
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
<a href="https://blog.iccia.fun/" target="_blank" class="dh">超低价文字广告位</a>
</div>
<style>
/**广告位**/
.ad{background:#fff;overflow:hidden;clear:both;border-radius: 6px;}
.ad a{margin:5px;display:block;border-radius:3px;}
.ad img{max-width:100%; height: 40px}
.ad li{float:left;width:50%;list-style:none;}
@media(max-width:999px) {
.ad{margin: 0 0 10px 0;}
.ad li{width:100%;}
}
/**新增文字广告**/
.txtguanggao{
width: 100%;
overflow: hidden;
display: block;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.txtguanggao a{
width: calc((100% - 20px) / 4);
float: left;
border-radius: 2px;
line-height: 35.35px;
;
text-align: center;
font-size: 14px;
color: #fff;
display: inline-block;
background-color: rgb(255, 153, 159);
margin: 2.5px;
transition-duration: .3s;
}
.txtguanggao a:nth-child(1) {
background-color: #dc3545;
}
.txtguanggao a:nth-child(2) {
background-color: #007bff;
}
.txtguanggao a:nth-child(3) {
background-color: #28a745;
}
.txtguanggao a:nth-child(4) {
background-color: #ffc107;
}
.txtguanggao a:nth-child(5) {
background-color: #28a745;
}
.txtguanggao a:nth-child(6) {
background-color: #ffc107;
}
.txtguanggao a:nth-child(7) {
background-color: #dc3545;
}
.txtguanggao a:nth-child(8){
background-color: #007bff;
}
.txtguanggao a:hover{
background:#FF2805;color:#FFF
}
@media screen and (max-width: 1000px) {
.txtguanggao a{
width: calc((100% - 10px) / 2);
float: left;
border-radius: 2px;
line-height: 35.35px;
height: 35.35px;
text-align: center;
font-size: 14px;
color: #fff;
display: inline-block;
background-color: rgb(255, 153, 159);
margin: 2.5px;
transition-duration: .3s;
}
}
@media screen and (min-width: 1000px) {
.txtguanggao a{
width: calc((100% - 20px) / 4);
}}
</style>
效果预览
还可以添加其他代码,自定义你的网页!!!
如添加一个当前时间
<span id="time"></span>
<script>
function mytime(){
var a = new Date();
var b = a.toLocaleTimeString();
var c = a.toLocaleDateString();
document.getElementById("time").innerHTML = c+" "+b;
}
setInterval(function() {mytime()},1000);
</script>
效果预览
6、广告联盟广告
史上最简单-一行代码
广告联盟有很多平台,国内广告联盟需要备案网站,而且审核严格
国外广告联盟不需要备案网站,而且审核一般
实际收益推荐使用谷歌广告(正规老牌)
实践实验推荐使用monetag
官网地址:https://publishers.monetag.com/signIn
注册教程
cf-blog使用
将给你的代码黏贴进下面代码中将给你的代码黏贴进下面代码中
"commentCode":`广告代码`,//评论区代码