Loading

记录收集博客园样式美化代码

初始微改版

预览

页面

点击查看代码
/* 全局字体设定 */
#cnblogs_post_body {
    font-family: 'Roboto', sans-serif;
    color: #333; /* 增强字体颜色对比度,提高可读性 */
}

/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    margin: 20px 0;
}

/* 二级标题 */
#cnblogs_post_body h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    background-color: #007bff; /* 使用Bootstrap标准蓝色 */
    padding: 10px;
    margin: 20px 0;
}

/* 三级标题 */
#cnblogs_post_body h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    background-color: #6c757d; /* 深灰色背景 */
    padding: 10px;
}

/* 四级标题 */
#cnblogs_post_body h4 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    background-color: #343a40; /* 更深的灰色背景 */
    padding: 10px;
}

/* 五级标题 */
#cnblogs_post_body h5 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    background-color: #495057; /* 中等深度灰色 */
    padding: 8px;
}

/* 六级标题 */
#cnblogs_post_body h6 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    background-color: #adb5bd; /* 较浅灰色 */
    padding: 8px;
}

/* 引用样式 */
#cnblogs_post_body blockquote {
    font-size: 14pt;
    font-style: italic;
    color: #555;
    border-left: 10px solid #007bff; /* 蓝色左边界线 */
    padding: 10px 20px;
    margin: 20px 0;
}

/* 正文 */
#cnblogs_post_body p {
    font-size: 12pt; /* 增大正文字号 */
    line-height: 1.8; /* 增加行距 */
}

简约版

请先确认已开通js编辑权限

参考链接(原博客)

  1. 页面定制 CSS 代码 -> ☑️禁用模板默认CSS -> source
  2. 页首 HTML 代码 -> source
  3. 页脚 HTML 代码 -> source

silence

首页地址

SimpleMemory美化插件 (目前在用)

请先确认已开通js编辑权限

参考博主链接
文档链接

预览
主页
文章页

自定义内容主要在{博客侧边栏公告处}

附上我目前的配置,点击查看代码
<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'Fcat', // 您的用户名
        startDate: '2023-10-19', // 您的入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
        avatar: 'https://s2.loli.net/2024/07/05/Wva8HTgDUQnK6ep.png', // 您的头像 URL 地址
        blogIcon: 'https://s2.loli.net/2024/07/05/q2iBvwfE5Iumjzl.jpg',
      },
      sidebar: {
        infoBackground: 'https://s2.loli.net/2024/07/05/leVZJxEg8wMOzyI.jpg', //侧边背景
      },
      banner: {
        home: {
            background: [ // 主页背景
                "https://s2.loli.net/2023/12/04/wP2NfizpuvJKkUI.jpg",
                "https://s2.loli.net/2024/07/05/GJanVIsqxzYSovL.jpg",
                "https://s2.loli.net/2024/07/05/vjVHIuSxTXCcN46.jpg",
                "https://s2.loli.net/2024/07/05/leVZJxEg8wMOzyI.jpg",
                "https://s2.loli.net/2024/07/05/5QUHDiVyg1FYCLJ.jpg",
            ],
            // title: '测试',
        },
      article: {
            background: [  // 文章背景
                "https://s2.loli.net/2024/07/05/DwBJmqEjL3c2Qrx.jpg",
                "https://s2.loli.net/2024/07/05/JYGRvtWXw19HUfl.jpg",
                "https://s2.loli.net/2024/07/05/v7gVWElJ92XUFSw.jpg",
                "https://s2.loli.net/2024/07/05/HXvVEZp4d2WtxIj.jpg",
            ],
        },
        },
      articleContent: {
        prefixIcon: { // 文章标题前的图标
            enable: true,
            // options:{ // 替换图标不知道为什么有问题,等修复
            //     link: 'https://at.alicdn.com/t/c/font_4611513_d9x3wa98yhn.js',
            //     iconfontArr: ['hebaodan'],
            // }
            
        }
      },
      animate: {
        homeBannerTitle: { // banner名字特效
            enable: true
        },
        // articleTitle: {  // 文章标题名动效
        //     enable: true
        // },
        // articleBanner: {
        //     enable: true
        // },
        bannerImages: { //图片自己切换
            enable: true,
            options:{
                current: -1,
            }
        },
        backgroundMouse: { // 背景横幅,跟随鼠标
            enable: true
        },
      },
}
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.5/dist/simpleMemory.js" defer></script>

<!-- 也可以使用下面的地址进行加载,CDN 使用哪家,大家自己权衡 -->
<!-- <script src="https://jsd.cdn.zzko.cn/gh/BNDong/Cnblogs-Theme-SimpleMemory@{VERSION}/dist/simpleMemory.js" defer></script> -->
posted @   F丶cat  阅读(33)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示