修改hexo的主题nexT中的Pisces主题宽度

若网络条件允许,可以直接看我的个人博客,可能阅读体验更好
点击查看

修改nexT Pisces主题内容区宽度

问题

默认的宽度觉得有点窄,想改宽一点

方法

在官网的指引下找到了方案
在测试后发现布局乱了,有点蓝瘦。。。

测试版本为,hexo:v3.3.8,hexo-theme-next:v5.1.2
上面的方案如下:

/*对于 Pisces Scheme,需要同时修改 header 的宽度、.main-inner 的宽度以及 .content-wrap 的宽度。
例如,使用百分比(Pisces 的布局定义在 source/css/_schemes/Picses/_layout.styl 中):*/

header{ width: 90%; }
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

改进方法

没办法,手动修改样式。。。
以下代码受上面方案启发,经过试验,在source/css/_schemes/Picses/_layout.styl文件末尾添加如下代码。

// 以下为新增代码!!
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

效果可点击查看

你可能感兴趣的:(工具类,博客,布局,hexo,nexT主题,Pisces主题)