新手如何设置自己的cnblogs页首，页脚HTML以及博客侧边栏公告--smartequation

标题一

首先我们添加页首的HTML
设置是在红色箭头处

HTML就是我们俗称的网页代码的其中一部分，我们可以通过添加到

代码如下

点击查看代码

`<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<body> 
<div style="text-align: middle; margin: 60px 60px 41px; padding-bottom: 10px; font-size: 22px; 
font-weight: bold; border-bottom: 1px dashed rgb(204, 204, 204); color: rgb(42, 100, 150);">
<i class="fa fa-paper-plane fa-2x"></i> http://www.cnblogs.com/smartequation/                    </div> 

<!--<div align="center"><img src="https://images.cnblogs.com/cnblogs_com/blogs/732967/galleries/2104968/t_220210065441_3.jpg" width="945" height="184" /></div>-->

<div align="center"><img src="https://images.cnblogs.com/cnblogs_com/blogs/732967/galleries/2104981/t_220210070951_4.jpg" width="1301" height="197" /></div> 
<!--<p>                                        http://www.cnblogs.com/smartequation/                    </p>-->

<div style="text-align: middle; margin: 100px 100px 41px; padding-bottom: 10px; font-size: 22px; 
font-weight: bold; border-bottom: 1px dashed rgb(204, 204, 204); color: rgb(42, 100, 150);">
<i class="fa fa-paper-plane fa-2x"></i>  宝剑锋从磨砺出，梅花香自苦寒来。  ------  
<a href="http://www.cnblogs.com/smartequation/">博客首页</a></div>`

标题二

其次我们添加页脚的HTML
我们可以通过添加到红丝箭头处

代码如下

点击查看代码

`<script  type="text/javascript">
    var selfLogin = false;
    var follow = $('#profile_block').find('#p_b_follow');
    var block = follow.length >= 1 ? follow[0] : "";
    var followText = (block != null && block != undefined) ? block.innerHTML : "";
    if(followText == "") selfLogin = true;
 
    var pageInfo = 'rn---------------------rn著作权归作者所有。rn'
        + '商业转载请联系作者获得授权，非商业转载请注明出处。rn'
        + '作者：xx rn原文链接：' + document.location.href
        + 'rn来源：博客园cnblog_SMARTEQUAION © 版权声明：本文为博主原创文章，转载请附上博文链接！';
 
    document.addEventListener('copy', function (ev) {
        var targetHTML = $.trim($(ev.target).html());
        // console.log("targetHTML:" + targetHTML)
        if (targetHTML == "") return;
        if (!(targetHTML.startsWith('<table class="hljs-ln"') && targetHTML.endsWith('</table>')) || !selfLogin)  // isLogined
        {
            var selected = window.getSelection();
            var selectedText = selected.toString();  
            let copyRightStr = (selectedText + pageInfo).replace(/n/g, 'rn'); // Solve the line breaks conversion issue
 
            ev.clipboardData.setData('text/plain', `${copyRightStr}`);
            ev.preventDefault();
        }
    });
</script>`

标题三

最后添加博客侧边栏公告，代码如下：（直接找到输入框即可，在以上几个方框的上方）

点击查看代码

`<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'name', // 填写自己用户名
        startDate: 'startDate', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: '头像地址', // 用户头像
      },
      banner: {
            home: {
              title: [
                'banner图文案',
              ],
              background: [
                    "首页图地址",
              ],
            },
    },
    footer: {
    style: 2,
    text: {
      left: '好好学习',
      right: '天天向上'
    },
    },
    switchDayNight: {
        enable: true,
        auto: {
            enable: true
        }
    },
    animate: {
    background: {
      enable: true,
    },
  },
  }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.6/dist/simpleMemory.js" defer></script>`

标题四

这当中有图片链接，大家找到相册，随后上传图片，点击打开相册，右键图片，复制图片地址即可得到链接！

标题五

至此大功告成，大家点击保存即可，刷新主页即可查看效果。

posted @ 2022-02-10 15:59 smartequation 阅读(420) 评论(1) 收藏举报

刷新页面返回顶部