美化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+"&nbsp"+b;
            }
        setInterval(function() {mytime()},1000);
    </script＞

效果预览

6、广告联盟广告

史上最简单-一行代码

广告联盟有很多平台，国内广告联盟需要备案网站，而且审核严格

国外广告联盟不需要备案网站，而且审核一般

实际收益推荐使用谷歌广告（正规老牌）

4步教你申请Google Adsense联盟 ​

实践实验推荐使用monetag

官网地址：https://publishers.monetag.com/signIn

注册教程

如何注册 Monetag？

cf-blog使用

将给你的代码黏贴进下面代码中将给你的代码黏贴进下面代码中

 "commentCode":`广告代码`,//评论区代码