Fork me on GitHub

博客园定制css 记录

最近些日子,把自建的blog都转到这里了,为的是方便些。之前自己维护github的博客觉得有点麻烦,也没写出什么高质量的blog,大多都是记录一些操作,真不如放这里方便快捷。体验了下,发现园子里默认字体太小了,看着着实费劲!也不太想花太多时间研究,查了半天百度,把界面做了些调整,主题选择drakgreentip效果好一点,关键是不用调整其他复杂设置了,节约点时间做正事。

必要的配置

  • 主题选择drakgreentip
  • 代码渲染引擎: prismjs
  • 代码字体: Fira Code
  • 系统浅色时主题(38): prism

页面css代码贴出来:

/* 头部背景颜色的修改 */
#blogTitle {
	background-color: #D2D8DE!important;
	}
#blogTitle h1 #Header1_HeaderTitle {
	font-size: 22px!important;
	color: #778899!important;
	}
#blogTitle h2 {
	font-size: 18px!important;
	color: #778899!important;
	}
#navigator {
	background-color: lightslategrey;
}
#navList li a {
    font-weight: bold;
    color: white!important;
    padding: 10px;
}
#navList>li>a:hover {
	background-color: #D2D8DE;
	font-weight:normal;
	color: #778899!important;
	font-size: 18px!important;
}
.pager a {
	color: #778899;
	border: 0px;
}
div.pager  {
font-size: 16px;	
}
.entrylistItemTitle span{
	font-size: 32px;
}

/* 博客内容字体的修改 */
.postTitle, .postTitle2 span {
	font-size: 32px!important;
	line-height: 2!important; 
}
.cnblogs_code p,code,li,a {
font-size: 15px!important;
line-height: 1.5!important;
}

p{
font-size: 16px!important;
line-height: 1.5!important;   
}

.c_b_p_desc {
font-size: 16px!important;	
}

PostLis a, a:hover {
	text-decoration:none
}

/* 表格美化 */
#cnblogs_post_body table {
text-align: center;
width: 100%;
border: 1px solid #dedede;
margin: 15px 0;
border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
background: #efefef;
}

/*屏蔽底层广告*/
	.under-post-card,
	#under_post_card1,
	#under_post_card2{
 		display:none; !important
	}
/*顶部导航栏*/
	#top_nav{
		display: none;
	}





(右上角github标签,可选)页首HTML代码:

<a href="https://github.com/symphonyh/">  
 <img style="position: absolute; top: 0; right: 0; border: 0;" 
     src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" 
     alt="Fork me on GitHub" 
     data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
</a>

参考:
https://www.cnblogs.com/cursorhu/p/6141365.html
https://tool.4xseo.com/article/245811.html
https://www.manongdao.com/article-2256571.html

posted @ 2023-01-19 17:47  Cloudhan  阅读(32)  评论(0编辑  收藏  举报