Hexo NexT 7.7 最新版本主題美化

網上很多關於主題美化的教程都是老版本 next 5.1 的，最近更新到 next 7 之後摸索了好久才找到簡單有效的自定義主題方式，下面是具體的操作。

修改主題下 _config.yml 文件，找到下面這一部分，也即註釋掉最後一行

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

然後在博客根目錄下創建文件 your_blog/source/_data/styles.styl，注意是博客根目錄下的 source/ 而不是主題下的目錄 source/，然後我們就可以在這個文件裏邊添加自定義配置。

注意想自定義博客外觀的話儘量都在這個文件裏修改，不要修改其他原始文件，畢竟這個修改壞了刪掉就是了，後面所有的修改都是在這一個文件裏邊添加內容，是不是很簡單呢？

// 修改背景圖片
body {
    background: url(/images/background/blue.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
}

// 修改主體透明度
// 這個設置並不好使，會使整個頁面蒙上一層不透明白色圖層，不建議使用
// 建議使用下面的 .post-block 與 .comments
//.main-inner {
//    background: #fff;
//    opacity: 0.8;
//}

// 修改文章塊透明度
.post-block {
	padding: $content-desktop-padding;
	background: rgba(255,255,255,0.9);   //white;
	box-shadow: $box-shadow-inner;
	border-radius: $border-radius-inner;
}

// Comments blocks.
.comments {
	padding: $content-desktop-padding;
	margin: initial;
	margin-top: sboffset;
	background: rgba(255,255,255,0.9);   //white;
	box-shadow: $box-shadow;
	border-radius: $border-radius;
}

// 修改菜單欄透明度
.header-inner {
    opacity: 0.8;
}

// 設置主頁面寬度
.header{
    width: 90%;
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}
.container .main-inner {
    width: 90%;
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}
.content-wrap {
    width: calc(100% - 260px);
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}

下面是我的個人博客，就是修改後的外觀
https://glooow1024.github.io/
https://glooow.gitee.io/