備份一下自己的部落格主題

2022-10-27 12:01:36

我其實來部落格園的時間不是很久,看了一下後臺也就2022-07-12,之前也是用node.js搭建hexo部落格部署在github.io上,只不過github在國內的存取速度比較慢,後面又用了簡書,簡書是直接可以使用markdown寫作,可以直接相容之前寫的部落格,不過簡書後面廣告氾濫,後來用了知乎,現在我主要在部落格園上創作,更多的樣式支援,可以有更多的創造空間,比如我經常要寫一些交換機路由器等網路裝置的命令,這些是語法高亮所不具備,需要人為的潤色。可以自定義主題的部落格,也就部落格園比較出名了。

更換主題

目前一直使用部落格園模板中東東製作的elf作為部落格園的主題。這種圓角矩形的質感是深得我心啊。

elf - 部落格面板 - 部落格園 (cnblogs.com)。 

 .二次修改css的效果

不過在手機上還是有一點小問題:貌似自定義的css在手機微信上是不生效的,其他瀏覽器是正常的,還有就是當時因為在電腦的基礎上調整的太多樣式用的電腦,感覺不是很美觀。

 

.手機上的css樣式不生效

奈何本人前端也是半桶水的功夫,所以我現在申請了JavaScript的許可權,打算直接用大佬的作為主題樣式吧。隨便分享一下之前的css也作為備份之用。

頁面客製化CSS

#home {
    /* opacity: 1.0; */
    margin: 0 auto;
    width: 70%;
    /* min-width: 70%; */
    /* background-color: #fff; */
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); */
}
/* #Header1_HeaderTitle{
    margin-left: 30px;
}
#mainContent {
    width: 80% !important;
    padding: 0px;
    margin: 0px;
}
#sideBar {
    width: 25% !important;
}
#header {
    width: 80% !important;
} */
#comment_form {
    padding: 30px;
    opacity:0.9;
    /* display: none !important; */
}
#topics {
    /* 文字區 */
    padding: 20px;
    opacity:0.9;
}
#sidebar_news {
    /* 新訊息 */
    padding: 15px;
    opacity:0.9;
}
#header {
    border-radius: 7px 7px 7px 7px;
    opacity:0.9;
    /* opacity:0.8; */
    /* background: #2EB1F2; */
}
.forFlow,.gallery {
    padding: 15px;
    opacity:0.9;
}
#sideBar {
    opacity:0.9;
}
.table-wrapper{
    text-align:center;
}
.dayTitle {
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
#navigator {
    width: auto !important;
}
body {
    /* 背景圖 有需要自己更換 部落格園支援圖床的*/
    background: rgb(6 51 4 / 28%) url(
        'https://images.cnblogs.com/cnblogs_com/blogs/764974/galleries/2225003/o_221002085029_1b73351dde193a3445a82b6e387910f0.jpg'
        ) fixed no-repeat;
    background-position: 50% 5%; 
    background-size: cover;
}
#blog-comments-placeholder {
    background: #fff;
    padding: 20px;
    border-radius: 7px 7px 7px 7px;
    margin-bottom: 20px;
    opacity:0.9;
}
.burynum {
    color:grey
}
.diggnum {
    font-size:18px;
    color:#2175bc;
    font-weight:bold;
}
.blogStats {margin-right: 20px !important;}
#navList {margin-left:10px !important;}
/* 隱藏廣告、上邊欄等一些不必要的樣式 */
#blog_nav_sitehome,#blog_nav_admin,#under_post_card1,#under_post_card2,#cnblogs_ch,#stats-comment_count,#sidebar_recentcomments {
    display: none !important;
}

其他的地方也沒有啥啦。

不知道各位大佬在用怎麼樣的主題呢?