自定義裝點博客的“門面”（不定期更新）

来源:https://www.cnblogs.com/alva-rabbit-hole/archive/2018/12/03/10057658.html
-Advertisement-
Play Games

初來乍到，算是一個博客園的新人，受了園裡許多前輩的啟發正在一點點定製自己的小空間。 也希望我的文章能夠成為大家DIY的啟發，就算是拋磚引玉了。效果可以直接在我的博客中看到，所以不另外貼圖了。 引入js文件與css文件 引入js文件需要先申請js許可權，語言誠懇一點幾個小時(?)就可以拿到許可權了。 引入 ...


初來乍到，算是一個博客園的新人，受了園裡許多前輩的啟發正在一點點定製自己的小空間。
也希望我的文章能夠成為大家DIY的啟發，就算是拋磚引玉了。效果可以直接在我的博客中看到，所以不另外貼圖了。

引入js文件與css文件

引入js文件需要先申請js許可權，語言誠懇一點幾個小時(?)就可以拿到許可權了。

  • 引入javascript文件格式（這裡針對的是對於前端還不太熟悉的朋友，瞭解前端的話這部分可以跳過啦）
    <script type="text/javascript" src="javascrpt文件URL"></script>
  • 引入css文件格式
    <link type="text/css" rel="stylesheet" href="css文件URL">
  • html的部分一般都很短，直接粘貼就好了

調整頁面css樣式的一般方式

這裡以chrome瀏覽器為例，介紹一下基本的調整頁面控制項css樣式的方法：
1、右鍵想要查看代碼的控制項，選擇“Inspect”（因為用的是英文版所以不太清楚對應的中文是什麼，不過應該是在相同的位置），如果直接“ctrl+shift+i”會進入對於整體頁面的開發者模式，適合對全局的調整。

2、進入開發者模式後，通過選擇上方html文件的內容，可以在下方看到對應的css樣式表，這裡的樣式是可以修改的，而且可以直接在頁面上看到效果。
效果滿意時，就可以拷貝下對應的css樣式內容，再粘貼到博客園的設置中。

背景的蜘蛛網

html:

<script type="text/javascript" src="此處粘貼js文件的URL地址"></script>

蜘蛛網的原作者是github上的canvas-nest.js
下麵的鏈接是我使用的稍作修改的.js文件，同樣的，大家可以自行修改，將文件上傳到博客園，再複製URL。
nest.js

修改博客的icon

html:

<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = ".ico文件的URL地址";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

.ico文件線上就可以生成的，我是在這裡生成的。

回到頂部的懸浮小按鈕

css:

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 150px;
     height: 174px;
     display: block;
     background:url(這裡粘貼小按鈕的圖片URL)no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').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>

頁角的github小貓

在這個網站Github Corners選擇喜歡的一款拷貝到頁首html區就行。

自定義推薦懸浮按鈕

css:

#div_digg {
    position: fixed;
    top: 380px;
    left: 90px;
    padding: 10px;
    background-color: #FFFFFF89;
    border-radius: 5px 5px 5px 5px !important;
    box-shadow: 0 0 0 0px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    z-index: 999999;

}
@media screen and (max-width: 1200px)
#div_digg {
    position: inherit;
}
#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 100px;
    font-size: 12px;
    width: 52px;
    text-align: center;
    margin-top: 10px;
}


.diggit {
    background: url(http://images.cnblogs.com/cnblogs_com/alva-rabbit-hole/1351589/o_tumbup2.png) no-repeat;
}

.diggit {
    float: left;
    width: 58px;
    height: 36px;
    text-align: left;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

div {
    display: block;
}
* {
    margin: 0;
    padding: 0;
}

#div_digg .diggnum {
    line-height: 3.9em!important;
    padding-left: 25px;
}

.diggnum {    
    font-size: 13px;
    color: #1d9021;
    font-family: Verdana;
}

.buryit {
    display: none;
}

文章旁的目錄索引

有參考這篇文章《為自己的博客園添加目錄錨點和返回頂部》

首先，需要引入一個bootstrap的js文件，文件如下：
bootstrap.js

接下來就是設置目錄錨點的js文件，為了照顧閱讀體驗，文件也放在下麵了，因為這部分沒有什麼可以DIY的地方，所以不在這裡貼代碼了，文件如下：
sidebar.js

最後就是可以自由發揮的css文件：

#sideToolbar {
    position: sticky;
    bottom: 50px;
    left: 900px;
    width: 250px;
    height: 440px;
}

#sideCatalog{
    background-color: #FFFFFFE3;
    border-radius:5px;
}

#sideCatalog-catalog {
    height: 400px;
    padding-top: 20px;
    padding-bottom: 30px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 23px;
    position: relative;
}

#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
    cursor: pointer;
    top: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
    bottom: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
    height: 10px;
    left: -5px;
    overflow: hidden;
    position: absolute;
    width: 10px
}
#sideCatalog li {
    margin: 0px;
    padding: 4px 7px;
    text-align: left;
    position: relative
}
#sideCatalog li: hover {
    background-color: #f5f5f5
}
#sideCatalog-catalog ul .active {
    background-color: #f5f5f5
}
#sideCatalog-catalog .active a {
    color: #155fad
}
#sideCatalog-catalog a: hover {
    color: #519cea
}
#sideCatalog span: first-child {
    color: #999;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding-right: 5px
}
#sideCatalog li.h2Offset {
    padding-left: 45px;
    text-indent: -25px
}
#sideCatalog li.h3Offset {
    padding-left: 90px;
    text-indent: -50px
}
#sideCatalog a {
    text-decoration: none;
    color: #3c3c3c;
    font-weight: initial;
}
.sideCatalog-dot {
    background: url(http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png) repeat scroll 0 -219px transparent;
    cursor: pointer;
    font-size: 12px;
    height: 15px;
    left: -10px;
    line-height: 12px;
    overflow: hidden;
    position: absolute;
    top: 4px;
    width: 6px;
}
#sideCatalog .highlight .sideCatalog-dot {
    background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -271px -38px transparent;
    height: 13px;
    left: -23px;
    top: 3px;
    width: 18px
}

#sideToolbar-up {
    background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent;
    border-radius: 2px;
    display: block;
    height: 45px;
    margin-left: 5px;
    width: 45px;
    outline: 0
}
#sideToolbar-up:hover {
    background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent
}
#div_digg{
    z-index: 999;
}
}

大家可以在瀏覽器里右鍵控制項inspect邊調邊改，當然不想改直接copy也沒問題啦。

調整MarkDown的一些模塊渲染

css:

.cnblogs-markdown code, .cnblogs-post-body code {
font-family: "Source Code Pro",Consolas,Menlo,Monaco,"Courier New",monospace! important;
}

.cnblogs-markdown code, .cnblogs-post-body code{
border: none! important;
}

為了避免css樣式被覆蓋，所以加上!important以強行提高優先順序

公告欄里滑鼠移上會顫動的"follow"按鈕（稍顯幼齒）

html:

<a onclick="用瀏覽器inspect自己的“關註”按鈕得到相應代碼" href="javascript:void(0);" class="follow">
<img src="http://images.cnblogs.com/cnblogs_com/alva-rabbit-hole/1351589/o_follow.png" class="item" style="position:relative">

<style>
.follow:hover
.item{animation:updown 300ms infinite}

@keyframes updown
{
0%   {top:0px;}
50%  {top:4px;}
100% {top:0px;}
}
</style>
</a>

這部分的自定義空間還是很大的，可以嘗試其他的@keyframes補間動畫。

最後，如果大家覺得有可以改進的地方，歡迎交流！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • footer固定在頁面底部的實現方法總結
    方法一：footer高度固定+絕對定位 HTML代碼： CSS代碼： 實現的效果： 首先，設置body的高度至少充滿整個屏幕，並且body作為footer絕對定位的參考節點； 其次，設置main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證 ...
  • Vue 基礎指令學習
    學習Vue的一些總結，第一次寫博客，文筆實在是很差 不過我會不斷寫的。 這裡只寫了一部分常用的vue的指令，後面還會有的。 ...
  • 08 . 12/3 事件對象
    12.3事件對象 1.每個元素身上的事件都是天生自帶的，不需要我們去定義，只需要我們給這個事件綁定一個方法， 2.事件綁定的寫法 1.div.onclick=function(){} DOM 0級事件綁定 2.div.addEventListener()或div.attachEvent()　DOM2 ...
  • 前端面試題（一）JS篇
    內置類型 JS 中分為七種內置類型，七種內置類型又分為兩大類型：基本類型和對象（Object）。 基本類型有六種： ，`undefined boolean number string symbol`。 其中 JS 的數字類型是浮點類型的，沒有整型。並且浮點類型基於 IEEE 754標準實現，在使用中 ...
  • 上傳文件進度條（筆記）
    參考資料：CSDN-真實的上傳進度條 ...
  • 前端入門11-JavaScript語法之數組
    聲明 本系列文章內容全部梳理自以下幾個來源： 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，在其基 ...
  • react-router的簡單使用
    React Router是一個基於React之上的強大路由庫，可以讓你嚮應用中快速的添加視圖和數據流，同時保持頁面與URL間的同步。 1.安裝： 2.問題說明： 剛開始的時候由於沒有註意到版本信息，導致出現了一些錯誤，現在記錄如下： 這是我package.js中的版本信息， 說明1：react-ro ...
  • webpack4配置詳解之常用插件分享
    "前言" 繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件，如有分析不到位的，歡迎糾錯， 嗯，這些東西文檔都有，大佬可繞過 。 Wepack4之後廢棄了很多的插件，這裡只會講解webpack4還支持的（ ），已經廢棄的將不再闡述。 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類