修改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主题宽度相关推荐

如何让vs2019的主题变好看（NightOwl主题为例）？？？像vscode和webstorm一样自定义主题！！！
用C#编程毋庸置疑除了vscode就是visual studio最好用了,但是经典的vs主题就四个,我总结为"黑白灰"还有个特别丑的"高对比模式". 用过vsc ...
Hexo博客优化：在Next主题中设置进阶版Live2D看板娘————拒绝踩坑！！！！
最初级的用法使用官方包安装,安装非常简单,但效果一般 hexo live-2d地址:https://github.com/xiazeyu/live2d-widget-models git命令行中输入 ...
Hexo+Github博客搭建之Matery主题个性化修改篇（一）
首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F: ...
hexo主题应用中遇到的问题和解决方案（持续更新中）
1 常见问题解决技巧 1.1 主题仓库和博客仓库嵌套在使用github和hexo主题搭建个人博客过程中,我们使用hexo初始化的文件夹需要交给github进行代码托管,同时主题themes中的主题也 ...
html导航栏字体颜色怎么换,在WordPress的默认主题TwentyTen中修改导航条的颜色
安装了WordPress后一直使用自带的TwentyTen主题,感觉比较简洁,但是用得太久难免有些审美疲劳,于是决定换一个,懒得去网上再找了,耗时费力,又不一定有何意的,于是就决定修改TwentyTe ...
android设置主题的方法,Android_修改Android App样式风格的方法，android中可以自定义主题和风格 - phpStudy...
修改Android App样式风格的方法 android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/value ...
用hexo中的matery主题搭建个人博客（完整版）
1.初始化搭建: 使用 gitee | github + hexo 快速搭建 hexo-theme-matery 闪烁之狐主题の个人博客_扶摇而上者九万里的博客-CSDN博客注意:gitee搭建需要 ...
Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里前言马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
GitHub+Hexo搭建自己的Blog之(3)-主题配置(Next)
GitHub+Hexo搭建自己的Blog之-主题配置(Next) 前言 Blog的环境全部搭建完毕了,但是还没有内容,而且hexo默认的主题是不是感觉挺丑的,其实hexo给我们提供了很多主题模板,总有 ...
Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索
使用Next主题美化界面: 安装好hexo之后,主题使用的是hexo默认自带的landscape主题,Next主题是iissnan设计的,使用指南其实可以直接参考Next官方网:http://them ...

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

修改nexT Pisces主题内容区宽度

问题

方法

改进方法

修改hexo的主题nexT中的Pisces主题宽度相关推荐

最新文章

热门文章