首页 > 其他分享 >本博客园自定义样式

本博客园自定义样式

时间:2024-11-24 16:37:03浏览次数:5  
标签:cnblogs 自定义 title 样式 博客园 zhaoqingqing url https com

找文章,发现 https://www.cnblogs.com/zhaoqingqing 的博客样式很好, 在底部发现是基于Theme Silence v2.0.2,现在坐着已经更新到v3.0.0-rc2, 作者GitHub:https://github.com/esofar/cnblogs-theme-silence  ,自己做了一些小修改。
基本可以配置出差不多的,可以参考我的配置:

<script>
  window.$silence = {
    avatar: 'https://images.cnblogs.com/cnblogs_com/LungGiyo/2432949/o_241123065246_o_avatar.jpg',
    //favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
    github: 'https://github.com/aikunzhe',
    defaultMode: 'auto',
    defaultTheme: 'e',
            navbars: [
            {
                title: '编程语言',
                children: [
                    {
                        title: 'C#和.NET',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/527577.html',
                    },
                    {
                        title: 'Java语言',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/1278231.html',
                    },
                    {
                        title: 'C和C++',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/556352.html',
                    },
                    {
                        title: 'Lua/Js/Shell...',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/750410.html',
                    },
                    {
                        title: 'Python语言',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/2016077.html',
                    },
                    {
                        title: '汇编语言',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/584461.html',
                    },
                ]
            },
            {
                title: '游戏编程',
                children: [
                    {
                        title: 'Cocos2d-x',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/554286.html',
                    },
                    {
                        title: 'uGUI/Unity2D',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/563344.html',
                    },
                    {
                        title: 'NGUI/UI开发',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/835738.html',
                    },
                    {
                        title: 'Unity3D插件开发',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/555471.html',
                    },
                    {
                        title: 'VR/AR 技术',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/835025.html',
                    },
                    {
                        title: 'Unity3D项目开发',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/537262.html',
                    },
                    {
                        title: 'Unity3D经验技巧',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/514068.html',
                    },
                    {
                        title: 'Unity3D Editor开发',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/529305.html',
                    },
                    {
                        title: '自研引擎及项目开发',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/2016213.html',
                    },
                ]
            },
            {
                title: '更多内容',
                children: [
                    {
                        title: '关于我',
                        url: 'https://www.cnblogs.com/zhaoqingqing/p/about.html',
                    },
                    {
                        title: '图形学',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/623959.html',
                    },
                    {
                        title: '我的随笔',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/541042.html',
                    },
                    {
                        title: "文章归档",
                        url:"https://www.cnblogs.com/zhaoqingqing/p",
                    },
                    {
                        title: '数据结构与算法',
                        url: 'https://www.cnblogs.com/zhaoqingqing/category/610625.html',
                    },
                ]
            },
            {
                title: '后台管理',
                children: [
                    {
                        title: '博客管理',
                        url: 'https://i.cnblogs.com/settings',
                    },
                    {
                        title: '新建文章',
                        url: 'https://i.cnblogs.com/posts/edit',
                    },
                    {
                        title: '友情链接',
                        url: 'https://www.cnblogs.com/zhaoqingqing/p/link.html',
                    },
                    {
                        title:"我的动态",
                        url:"https://home.cnblogs.com/u/zhaoqingqing/",
                    },
                ]
            },
        ],
    
    showNavAdmin: false,
    catalog: {
      enable: true,
      index: true,
      active: true,
      levels: ['h2', 'h3', 'h4'],
    },
    signature: {
      enable: false,
      author: 'Tiny',
      license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    },
    sponsor: {
      enable: true,
      text: '如果你觉得文章有用,可以请我喝咖啡☕.',
      wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
      alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
    }
  };
</script>

去掉导航栏控件

https://i.cnblogs.com/preference


增加自定义公告内容

效果:
添加CSS样式:添加HTML代码:
<script>
    $(function()
    {
        /*增加公告*/
        var notice = `    <div id='SiteContent'>\
    <p>不积跬步,无以至千里;<br/>不积小流,无以成江海。</p><br />\
        <ul>\
            <li><a href='http://wpa.qq.com/msgrd?v=3&amp;uin=569032731&amp;site=qq&amp;menu=yes' target='_blank'>QQ 联系</a></li>\
            <li><a style='text-decoration: none' href='http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=wLqooa_xqa6nsamup-LygLGx7qOvrQ' target='_blank'>邮件联系</a></li>\
            <li><a href='https://github.com/zhaoqingqing' target='_blank'>我的GitHub</a></li>\
            <li><a href='https://zhaoqingqing.github.io/' target='_blank'>Git Blog</a></li>\
            <li><a href='https://www.zhihu.com/people/zhaoqingqing' target='_blank'>我在知乎</a></li>\
            <li><a href='https://www.cnblogs.com/zhaoqingqing/rss' target='_blank'>Rss订阅</a></li>\
            <li><a href='https://space.cnblogs.com/msg/send/zhaoqingqing' target='_blank'>站内消息</a></li>\
            <li><a href='https://www.cnblogs.com/zhaoqingqing/p/about.html' target='_blank'>我的资料</a></li>\
            <li><a href='https://www.cnblogs.com/cate/gamedev/' target='_blank'>园内游戏类</a></li>\
            <li><a href='https://www.cnblogs.com/zhaoqingqing/p/link.html' target='_blank'>友情链接</a></li>\
        </ul>\
        </div>`
        $("#sidebar_news").append(notice);
    })
</script>

为文章设置过期提示

这里使用的效果,是基于cnblogs-theme-silence 的,具体效果如下:添加HTML代码
 /*为文章设置过期提示*/
    var start = new Date($("#post-date").attr("data-date-updated")).getTime();
    var end=new Date().getTime();
    var num =((end-start)/(1000*60*60*24)).toFixed(0);//总计时数
    if(num>30)$(".postTitle").after('<div class="esa-post-signature"> <p>本文最后更新发布于' + "&nbsp;" + num + "&nbsp;" + '天前,部分信息可能有时效性,请谨慎参考本文内容。请在下方<a href="#commentform_title"><b>留言</b></a>或联系我</p></div>');


博客园鼠标特效

作者GitHub:  https://github.com/shuiche-it/cnblog-mouse  效果:添加HTML代码:
<script src="https://blog-static.cnblogs.com/files/xuange306/mouse.min.js"></script>
<script type="text/javascript">
    $.shuicheMouse({
        type:11, 
        color:false
    })
</script>



标签:cnblogs,自定义,title,样式,博客园,zhaoqingqing,url,https,com
From: https://www.cnblogs.com/LungGiyo/p/18565926

相关文章

  • 深入解析 WezTerm 的自定义功能:键绑定和鼠标绑定
    WezTerm是一个高性能的跨平台终端模拟器,它提供了广泛的自定义选项,包括键绑定和鼠标绑定,使得用户可以根据自己的需求优化操作界面。本文将详细介绍几个关键的自定义功能,解释它们的用途,并展示如何配置这些功能来提升终端使用体验。创建一个键绑定WezTerm的键绑定功能允许用户为......
  • 博客园管理记录
       2024年11月2011.06入园时间~【这个时间我在上大一欸~】大道至简,知易行难。从今天开始改变,这是对平庸生活最好的回击。   点击右上角即可分享......
  • 从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘
    从HTML到CSS:开启网页样式之旅(二)——深入探索CSS选择器的奥秘前言一、CSS基本选择器1.通配选择器2.元素选择器3.类选择器4.id选择器5.基本选择器总结二、CSS复合选择器1.后代选择器2.子选择器3.相邻兄弟选择器4.交集选择器5.并集选择器6.属性选择器(1)选择具......
  • js和CSS3自定义鼠标特效
    在线预览 下载  这是一款js和CSS3自定义鼠标特效。该特效中,使用一个DIV元素来自定义鼠标,通过CSS代码来构建鼠标的形状,并通过js代码来驱动鼠标的动画。 使用方法 HTML结构基本的HTML结构如下。<!--鼠标形状元素--><divid="cursorBlob"></div><!--页面内容-......
  • 【小记】 Matplotlib 中设置自定义中文字体的正确姿势
    最近做实验涉及到用Matplotlib绘制图表,我希望相同的代码能不仅在本地运行,且还能在GoogleColab,Binder这些线上平台运行。问题就来了,为了在各个平台上都能绘制中文字符,该如何在Matplotlib中使用自定义的字体?(毕竟国外的一些平台不会预装支持中文字符的字体)网上查了一下,很......
  • 二十七步天注定,逆流河上任我行-自定义类型:结构体
    ---当你累到不行,还继续坚持,那就是梦想的力量1.结构体类型的声明2.结构体变量的创建和初始化结构成员访问操作符结构体内存对齐结构体传参1:结构体类型的声明structtag {   member-list;}variable-list;如果说描述一个人的身份数据:structstu{ charna......
  • 基于STL的自定义栈与队列实现:灵活选择底层容器的模板设计
    文章目录代码模板设计主要成员函数底层容器的选择模板设计底层容器的选择关于stack的示例代码关于queue的示例代码前言:在本文中,我们将分析一个模拟C++标准模板库(STL)栈的自定义实现以及模仿C++标准模板库(STL)队列的自定义实现。该stack类模板允许在底层容器的选择......
  • 推荐15个 Vue 常用自定义指令,含实现原理与使用方式
    前言Vue.js是一个流行的前端框架,它的核心理念是通过指令(Directives)来扩展HTML的能力。尽管Vue.js已经内置了一些非常实用的指令(比如v-if,v-show,v-for等),但有时候我们还是需要创建自定义指令来满足特定的需求。今天我们就来聊聊Vue常用的自定义指令,它们能让你的......
  • 提现生成器【APP】自定义生成小游戏提现截图
    今天发个避坑帖!首先看看下面这种收益图,你们肯定见过不少!‘割割’们让你上车,必须得有一些吸引你的东东啊,不然怎么割你吗?其实这种截图都是软件生成的,我网站上分享过非常多的类似软件,什么聊天记录生成的啊,什么ZFB,微信零钱转账记录,余额多少啊。。。。。都可以生成。像这种......
  • C#的自定义Tip窗体 - 开源研究系列文章
          上次编写了自定义的提示和对话框窗体,这次记录的是自定义的Tip窗体,用于显示提示操作。有时间没编程了,这次就当进行了记录。 1、项目目录;  2、源码介绍;1)实现;  2)应用;  3、运行界面;  4、使用介绍......