自定義裝點博客的「門面」

時間  2019-11-19
標籤 自定義 裝點 博客 門面 简体版
原文   原文鏈接

初來乍到，算是一個博客園的新人，受了園裏許多前輩的啓發正在一點點定製本身的小空間。
也但願個人文章可以成爲你們DIY的啓發，就算是拋磚引玉了。效果能夠直接在個人博客中看到，因此不另外貼圖了。javascript

引入js文件與css文件

引入js文件須要先申請js權限，語言誠懇一點幾個小時(?)就能夠拿到權限了。css

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

調整頁面css樣式的通常方式

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

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

背景的蜘蛛網

html:java

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

蜘蛛網的原做者是github上的canvas-nest.js
下面的連接是我使用的稍做修改的.js文件，一樣的，你們能夠自行修改，將文件上傳到博客園，再複製URL。
nest.jsgit

修改博客的icon

html:github

<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文件在線就能夠生成的，我是在這裏生成的。chrome

回到頂部的懸浮小按鈕

css:bootstrap

<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區就行。canvas

自定義推薦懸浮按鈕

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補間動畫。

最後，若是你們以爲有能夠改進的地方，歡迎交流！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程