博客园主题设置

【更新】当前使用主题

直接用大佬@BNDong的模板(v2.1.2)：

博客：https://www.cnblogs.com/bndong/p/9132439.html
教程：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install

1. 博客的主题设置

就是默认的设置加一些简单的修改，过多的特效会导致在网络质量差的情况下加载缓慢，且分散阅读注意力(其实是不会写😂)。

基本设置

博客皮肤: SimpleMemory
设置代码高亮及显示行号

修改默认样式

页面定制CSS代码

/*去掉引用时的图片*/
.postBody blockquote {
background:none;
}
/*使用 jetbrains mono 字体*/
.hljs .hljs-ln .hljs-ln-line {
    font-family: jetbrains mono;
    font-size: 13px;
}
/*屏蔽底层广告*/
.under-post-card,
#under_post_card1,
#under_post_card2 {
    display:none; !important
}
/*返回顶部图标*/
.returnTop {
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 20px;
    _bottom: auto;
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid #abb8c3;
    border-radius:4px;
    background: #fff;
    box-shadow: 0 0 5px #F5F5F5;
    text-indent: -9999px;
    cursor: pointer;
}
.returnTop .s {
    position: absolute;
    top: -2px;
    _top: -20px;
    left: 10px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-color: transparent transparent #abb8c3;
    border-style: dashed dashed solid;
}
.returnTop .b {
    position: absolute;
    top: 18px;
    left: 16px;
    height: 12px;
    width: 8px;
    background: #abb8c3;
}

页脚HTML代码

<!-- Back to the top START -->
<div class="returnTop" title="返回顶部">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>
<script type="text/javascript">
$(function(){
  // 给 window 对象绑定 scroll 事件
  $(window).bind("scroll", function(){
      // 获取网页文档对象滚动条的垂直偏移
      var scrollTopNum = $(document).scrollTop(),
          // 获取浏览器当前窗口的高度
          winHeight = $(window).height(),
          returnTop = $("div.returnTop");
      // 滚动条的垂直偏移大于 100 时显示，反之隐藏
      (scrollTopNum > 100) ? returnTop.fadeIn("fast") : returnTop.fadeOut("fast");
      // 给 IE6 定位
      if (!-[1,]&&!window.XMLHttpRequest) {
          returnTop.css("top", scrollTopNum + winHeight - 200);
      }
  });
  // 点击按钮后，滚动条的垂直方向的值逐渐变为0，也就是滑动向上的效果
  $("div.returnTop").click(function() {
      $("html, body").animate({ scrollTop: 0 }, 100);
  });
});
</script>
<!-- Back to the top END -->

2. 曾使用过的主题设置

页面定制CSS代码

对SimpleMemory默认样式稍作了修改

.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 0px 0 0px 10px;
    background:rgba(245,245,245,0.3);
}
#cnblogs_post_body h3{
    border-left: 5px solid rgba(0, 235, 255, 0.3);
    padding: 2px 5px;
    background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{
    border-left: 5px solid rgba(222, 101, 114,0.3);
    padding-left: 5px;
    background: rgba(247,247,247,0.3);
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#blog-calendar td {
    font-size: 12px;
    font-family: "Comic Sans MS";
}
.input_my_zzk {
    border: 1px solid #ccc;
    background: none;
    height: 25px;
    padding-right: 30px;
    padding-left: 5px;
    outline: 0;
}
.CalDayHeader {
    background: rgba(245,245,245,0.3) !important;
    font-weight: 100;
    color: #5E5F63;
}
.CalTitle {
    background: none;
    width: 100%;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0;
    color: #FFF;
}
.CalTitle td {
    background: rgba(245,245,245,0.3) !important;
    border: 0px !important;
    color: #5E5F63;
    font-family: "Comic Sans MS";
}
a:link {
    color: cornflowerblue;
}
a:visited {
    color: cornflowerblue;
}
a:hover {
    color:cadetblue;
}
a:active {
    color:black;
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}

.postBody blockquote {
background:none;
}

页首HTML代码

右键烟花特效 + 自定义返回顶部小火箭;

<!-- Right fireworks effect START -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 100; pointer-events: none;" ></canvas>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/fireworks-anime.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/fireworks-fireworks-modify.js"></script>
<!-- Right fireworks effect END -->
<!-- Rocket back to the top START -->
<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
 // hide #back-top first
 $("#back-top").hide();
 $("#div_digg").hide();
 // fade in #back-top
 $(window).scroll(function() {
  if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
            $('#div_digg').fadeIn();
  } else {
            $('#back-top').fadeOut();
            $('#div_digg').fadeOut();
  }
 });
 // scroll body to 0px on click
 $('#back-top a').click(function() {
  $('body,html').animate({
   scrollTop: 0
  }, 800);
  return false;
 });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<!-- Rocket back to the top END-->

页脚HTML代码

输入烟花效果

<!-- Input effects START-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/activate-power-mode.js"></script>
<script type="text/javascript">    
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener('input', POWERMODE);
</script>
<!-- Input effects END-->

3. 其他可选的主题设置

1. fork me on github彩带

页首HTML代码

<!-- 修改为你的github地址-->
<a href="https://github.com/yourname">
<img style="position: absolute; top: 0; right: 0; border: 0;" 
    src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" 
    alt="Fork me on GitHub" 
    data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
</a>

2. 刷新随机切换背景图片

页面定制CSS代码

body {
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-image: url(https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302);
}

二次元图片API
https://api.3ewl.cc/acg/img.php

风景图片API
https://unsplash.it/1600/900?random

返回必应图片
https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

二次元环境背景
https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302

二次元人物背景
https://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302

bing图片官方接口
官方教程 https://github.com/xCss/bing
https://bing.ioliu.cn/v1/rand/?w=1920&h=1080

3. 添加代码行号

使用自定义代码高亮，先禁用设置中的代码高亮。

<link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

参考资料

  1. https://www.cnblogs.com/ECJTUACM-873284962/p/8470554.html
  2. https://www.cnblogs.com/seanshao/p/5716543.html
  3. https://www.cnblogs.com/zhwl/p/3586277.html
posted @   rustling  阅读(186)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS基础知识笔记
·  HTML基础知识笔记
·  【博客园主题美化】《 那些年换过的主题 - 04 》
·  博客园主题设置
·  博客园主题分享
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae