zoukankan      html  css  js  c++  java
  • cnblogs-theme-silence 主题设置简约风格

    本文参考

    更改博客皮肤

    更改博客皮肤为Custom

    页面定制CSS代码

    1. 勾选禁用模板默认CSS
    2. 导入该文件中的内容复制该文件内容到代码框中
    3. 配置代码块复制功能 样式 和 右侧滑动条样式
    /*复制功能添加按钮 begin*/
    .cnblogs-markdown pre {
      position: relative;
    }
    .cnblogs-markdown pre > span {
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 2px;
      padding: 0 10px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      cursor: pointer;
      display:none;
    }
    .cnblogs-markdown pre:hover > span {
      display:block;
    }
    .cnblogs-markdown pre > .copyed {
      background: #67c23a;
    }
    /*复制功能添加按钮 end*/
    
    /*滚动条功能 begin*/
    /*css主要部分的样式*/
    ::-webkit-scrollbar {
     15px; /*对垂直流动条有效*/
    height: 15px; /*对水平流动条有效*/
    }
    
    /*定义滚动条的轨道颜色、内阴影及圆角*/
    ::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: gainsboro;
    border-radius: 3px;
    }
    
    
    /*定义滑块颜色、内阴影及圆角*/
    ::-webkit-scrollbar-thumb{
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #42b983;
    }
    
    /*定义两端按钮的样式*/
    ::-webkit-scrollbar-button {
    background-color:white;
    }
    
    /*定义右下角汇合处的样式*/
    ::-webkit-scrollbar-corner {
    background:white;
    }
    /*滚动条功能 begin*/
    

    博客侧边栏公告

    <script type="text/javascript">
        window.$silence = {
            avatar: 'https://images.cnblogs.com/cnblogs_com/whalefall541/2033891/t_210920062756123.jpg',// 定义首页头像
            
            favicon: 'https://files.cnblogs.com/files/whalefall541/1152748.gif', //定义网页前小标签
    
            github: 'https://github.com/whalefall541',
    
            defaultMode: 'auto', //自动夜间模式
    
            defaultTheme: 'c', //右下角 工具栏颜色样式
    
            catalog: {
                enable: true,
                index: true,
                active: false,
                levels: ['h2', 'h3', 'h4']
            },
    
            signature: {
                enable: true,
                author: 'whalefall541',
                license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
                remark: 'all corpright reserved, if reprinted must include origin website',
            },
    
            sponsor: {
                enable: true,
                text: '欢迎关注微信公众号哦``',
                wechat: 'https://images.cnblogs.com/cnblogs_com/whalefall541/2033891/o_210920064116weichat.jpg',
                
            }
        };  
    </script>
    
    <script src="https://files.cnblogs.com/files/whalefall541/silence.min.js"></script>
    

    页脚HTML代码

    <script src="https://files.cnblogs.com/files/whalefall541/clipboard.min.js"></script>
    <script src="https://files.cnblogs.com/files/whalefall541/cp.js"></script>
    

    本文参考文献
    本文参考仓库地址
    如转载 必须注明 文章出处 以及 参考的文献

  • 相关阅读:
    更换Ubuntu源为国内源的操作记录
    Dockerfile构建容器镜像
    Nginx负载均衡中后端节点服务器健康检查
    Linux系统下CPU使用(load average)梳理
    android:怎么实现一个控件与另一个指定控件左对齐
    Android Studio一直 Fetching Documentation...
    px、pt、ppi、dpi、dp、sp之间的关系
    Android中如何在代码中设置View的宽和高?
    硬中断与软中断的区别!
    Java 日期时间获取和显示
  • 原文地址:https://www.cnblogs.com/whalefall541/p/15314340.html
Copyright © 2011-2022 走看看