本部落格園自定義樣式

LungGiyo發表於2024-11-24
找文章,發現 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>



相關文章