如何在博客園搭建本身的博客

     個人博客地址：http://www.javashuo.com/article/p-arwbcmlw-e.html

     更新時間：2019-11-20

     我一直想要搭建一個屬於本身的博客，讓本身有空的時候能夠在博客寫下一些想法、感悟，或者生活上學習到的知識，因而我查找了比較多的博客，因而我來到了博客園，在博客園搭建了本身的博客。在這裏分享一下我在博客園搭建本身博客和如何修改本身博客的一些樣式的經驗。

     個人分享，但願能幫助到你們，個人博客背景的代碼是來源於另一個博主，原博主的連接：http://www.javashuo.com/article/p-wfxbmgpu-db.html 。  

1、搭建博客的步驟

   一、要想在博客園搭建本身的博客，首先要註冊一個博客園的帳號。

   二、點擊右上角的帳號名，就進入了屬於你的主頁，而後點擊左中部的「寫博」，以下圖所示。

 

   三、點擊「寫博」後，網站會提示，要你申請寫博客，你就如實填寫理由申請就好了，通常會在幾個小時內就會經過的了，申請成功後，就會進入一個能夠填寫一些參數，如博客博客名，Blog地址名（就是個人博客地址中的「themysteryofhackers」這部分）等等。

   四、若是關閉了後臺頁面，也能夠點擊「個人博客」裏進入博客後臺界面，以下圖所示。這裏面有博客的一些經常使用設置，這些你們本身瞭解就行，這裏就很少說了。

 

 

   五、到這一步就能夠發表你的博客了（題外話：通常咱們發表的是隨筆，展現咱們博客的是隨筆，文章是比較正式內容，比較正規的做品），可是，你尚未設置你博客的背景和樣式。這時候你就點擊後臺管理界面的「設置」，往下拉就能夠看到「時區」、「語言與時區」、「博客皮膚」還有「頁面定製CSS代碼」等選項，以下圖所示。

 

 

    六、博客設置好「darkgreentrip」的皮膚後，這時候可就在「頁面定製CSS」複製下面的代碼進入就好了，若是想要更改背景圖片，就能夠在下面body{}代碼塊中修改background屬性中的url地址，你能夠先將背景圖片上傳到你的相冊中，而後複製圖片地址到這裏粘貼，將我原來的地址換掉就好了。

 

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*頁面頂部的寬度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/themysteryofhackers/1594084/t_191119103422bg_img01.png') fixed no-repeat;   //修改背景圖片
    background-position: 50% 5%;
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(240,255,255,0.5);   //博客標題的背景
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #FF1493;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #FF1493;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color:rgba(135,206,205, 0.5);          //標題欄下的顏色
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color:     #FF6A6A;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}
.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 發表時間左邊距離*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}
.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(255,110,180,0.6);   //欄目的條紋顏色
}
#topics{
    background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
    display: none;
}
#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);
}

 

   七、就在「設置」的頁面繼續往下拉，你就會看到「博客側邊欄」和「首頁HTML代碼」兩個區域，而「博客側邊欄」這個區域能夠放入js代碼，不過要申請，直接去申請就好了，一兩個小時就會經過的，不去申請也無所謂。而在頁面加上live2d老闆娘，就要下面的代碼複製進「首頁HTML代碼塊」。

 

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/themysteryofhackers/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

 

        文件下載地址  

 

     點擊文件地址下載文件，就會獲得

• waifu.css
• lived2d.js
• waifu-tip.js

     三個文件，將這三個文件上傳到後臺中「文件」裏面，以下圖所示：

 

     而後獲取三個文件的連接地址(選中資源，直接右擊，複製連接地址，相冊中的圖片的連接也是這樣去獲取)，再將第7部中的代碼中的這三個文件的連接修改爲你本身的就能夠了。

     最後一行的flat-ui.min.css不用修改，而後點擊保存。

     最後，你從新進入你的博客，你的博客首頁就會像下圖所示：

 

    在文章的結尾，我想說，我是一個Java程序員，這是我第一次寫博客，是個小白，之後我會陸續將本身學習到的Java或者其餘的知識會以博客的形式分享出來，但願能對你們有幫助。

     喜歡小編的就給我一個關注吧！

     若是有哪些問題、有哪些不妥或者侵犯到您的權益的地方，能夠聯繫我，我立刻修改。