建站和美化汇总

1.首页

上方导航栏，下面文章列表等，在中已讲明。

2.文章阅读页面

目标：文章背景和目录栏设置一定透明度

2-1.文章背景

打开文件Hexo\themes\keep\source\css\layout\article-content.styl

开始位置有如下代码：

.article-content-container {

  keep-container(false, 0, 0, 30px, 30px);
  
  .article-title {
    color: var(--second-text-color);
    font-weight: 600;
    ......

加一条，改为：

.article-content-container {

  keep-container(false, 0, 0, 30px, 30px);

  background: rgba(255,255,255,0.9);
  
  .article-title {
    color: var(--second-text-color);
    font-weight: 600;
    ......

2-2.左侧目录

打开文件Hexo\themes\keep\source\css\layout\page.styl

在较后位置找到以下代码：

.page-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: - $page-aside-width;
    width: $page-aside-width;
    height: 100%;
    z-index: $z-index-6;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;	
    background: var(--background-color);
	......

background的值改为：rgb（2-1中文章背景颜色）

background下加一条font-weight: bold;使目录文字加粗。

3.归档页面

目标：下图列表背景设置一定透明度。

打开文件Hexo\themes\keep\source\css\layout\archive-content.styl

里面有：

1
2
3

.archive-container {
  keep-container(false, 0, 0, 30px, 30px);
}

修改为：

.archive-container {
  keep-container(false, 0, 0, 30px, 30px);
  background: rgba(255,255,255,0.9);
}

4.分类页面

目标：分类列表背景设置一定透明度。

图示与”3.归档页面“类似。

打开文件Hexo\themes\keep\source\css\layout\category-list.styl

在开始位置有：

.category-list-container {

  keep-container(false, 0, 0, 30px, 0);

  .category-list-content {

    .all-category-list {

      li.all-category-list-item {
	.......

加一条，修改为：

.category-list-container {

  keep-container(false, 0, 0, 30px, 0);
  background: rgba(255,255,255,0.9);

  .category-list-content {

    .all-category-list {

      li.all-category-list-item {
	.......

5.标签页面

目标：标签云背景设置一定透明度。

图示与”3.归档页面“类似。

打开文件Hexo\themes\keep\source\css\layout\_partial\tagcloud.styl

在开始位置有：

.tagcloud-container {

  keep-container(false, 0, 0, 20px, 0);

  .tagcloud-content {
	.......

加一条，修改为：

.tagcloud-container {

  keep-container(false, 0, 0, 20px, 0);
  background: rgba(255,255,255,0.9);

  .tagcloud-content {
	.......

6.关于页面

目标：关于中文字背景设置一定透明度。

图示与”3.归档页面“类似。

打开文件Hexo\themes\keep\source\css\layout\_partial\page-template.styl

在开始位置有：

.page-template-container {

  keep-container(false, 0, 0, 30px, 30px);

  .page-template-content {
	.......

加一条，修改为：

.page-template-container {

  keep-container(false, 0, 0, 30px, 30px);
  background: rgba(255,255,255,0.9);

  .page-template-content {
	.......