如何在博客園搭建自己的博客

     我的博客地址：https://www.cnblogs.com/themysteryofhackers/p/11902072.html

     更新時間：2019-11-20

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

     我的分享，希望能幫助到大家，我的博客背景的代碼是來源於另外一個博主，原博主的鏈接：https://www.cnblogs.com/Tangent-1231/p/10393759.html 。  

一、搭建博客的步驟

   1、要想在博客園搭建自己的博客，首先要注冊一個博客園的賬號。

   2、點擊右上角的賬號名，就進入了屬於你的主頁，然后點擊左中部的“寫博”，如下圖所示。

 

   3、點擊“寫博”后，網站會提示，要你申請寫博客，你就如實填寫理由申請就行了，一般會在幾個小時內就會通過的了，申請成功后，就會進入一個可以填寫一些參數，如博客博客名，Blog地址名（就是我的博客地址中的“themysteryofhackers”這部分）等等。

   4、如果關閉了后台頁面，也可以點擊“我的博客”里進入博客后台界面，如下圖所示。這里面有博客的一些常用設置，這些大家自己了解就行，這里就不多說了。

 

 

   5、到這一步就可以發表你的博客了（題外話：一般我們發表的是隨筆，展示我們博客的是隨筆，文章是比較正式內容，比較正規的作品），但是，你還沒有設置你博客的背景和樣式。這時候你就點擊后台管理界面的“設置”，往下拉就可以看到“時區”、“語言與時區”、“博客皮膚”還有“頁面定制CSS代碼”等選項，如下圖所示。

 

 

    6、博客設置好“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);
}

 

   7、就在“設置”的頁面繼續往下拉，你就會看到“博客側邊欄”和“首頁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或者其他的知識會以博客的形式分享出來，希望能對大家有幫助。

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

     如果有哪些問題、有哪些不妥或者侵犯到您的權益的地方，可以聯系我，我馬上修改。