Hexo-theme-next: 感觉浏览器留白太多，代码块看起来比较麻烦

[HanderWei]

因为大部分用户还是写技术文档，代码块使用的比例还是很高的，如果经常需要拖动查看代码，体验非常差。

如果我重置了Post的宽度，侧边栏就会显示不完整。

请问有什么方法可以解决吗？

thx

[ledisthebest]

什么意思？

[HanderWei]

@ledisthebest
就是说，页面两侧的空白太多，导致文章的宽度比较窄，一行代码如果显示不完整的话，就需要左右拖动才能查看整行代码，对于代码比较多的文章看起来就会比较累。

就像这样：

[iissnan]

试试增加 content-wrap 的宽度：http://theme-next.iissnan.com/faqs.html#custom-content-width

[HanderWei]

@iissnan 我试了增加 content-desktop 的值，这样会覆盖侧边栏

如何设置覆盖浏览器宽度？我觉得这样阅读体验会好一些

[iissnan]

对于 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); }

我并未对这个布局进行测试，自定义修改需要自己进行测试。另外，我觉得超过一定宽度后（一行内文字太多导致换行跨度太大），阅读体验都不怎么样。

[HanderWei]

@iissnan 确实如此，需要在代码行和文字内容之间取个平衡

[HanderWei]

谢谢 @iissnan ，亲测有效

[willxuecn]

感谢

[ethan-funny]

感谢，我要遇到这个问题。

[renzhaozhao]

我发现修改样式后本地有效果，部署上去就没效果了，这是为啥呢

[liuli1735]

@iissnan 建议这块做到自适应好些吧

[Hclmaster]

@renzhaozhao 你可以先进行hexo clean一下，我也是遇到你这个问题了，然后我clean了一下就好了。

[raykle]

请问一下，我现在按照上面的代码修改了使用百分比来显示宽度。但是这种情况下屏幕较小的话，width 会比较小体验不好，如果我想在百分比的前提下，让 width 有一个最小 960px 的宽度，要怎么设置呢？
谢谢~ 😄

[iTofu]

感谢 @iissnan 的方法，很有效！确实纠结代码阅读有段时间了！

建议使用 80%，阅读代码完全 ok，正常段落也不会留白太多，阅读体验更好！

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

[Zeeech]

感谢@iTofu，按照你的比例来设之后，确实效果好了很多！！！！

[xiaoli123]

修正下楼上少了个点‘.’，且要放到最下面
.header{ width: 80%; } /* 80% _/
.container .main-inner { width: 80%; } /_ 80% */
.content-wrap { width: calc(100% - 260px); }

[songyibin]

这样设置在桌面端可以，但是在移动端不适应啊，要怎么修改？ @iissnan

[hhysj]

把字体改小一点,比如12, 代码看起来更好.

[xiao-fang]

楼主推荐的这种方式在桌面端没问题, 但是在手机平板等响应式布局会有问题.

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

我尝试了以下修改:
next/source/css/_schemes/Pisces/_layout.styl
预览:http://xiao-fang.me/ 可以解决这个问题.

[heqiangflytosky]

Pisces Scheme 直接在source/css/_variables/custom.styl文件中添加

$main-desktop                   = 1200px
$content-desktop                = 900px

可以避免直接修改源码，可以解决内容宽度问题，而且在移动设备上显示正常。
可以看 http://www.heqiangfly.com 改动效果

[aidansu]

http://www.aidansu.com/2017/github-pages-build-blog/
修改方法如以上博客 3.NexT
效果如本博客，希望能帮到你

发自网易邮箱大师
在2017年06月30日 15:03，寒江蓑笠 写道：

Pisces Scheme 直接在source/css/_variables/custom.styl文件中添加

$main-desktop = 1200px
$content-desktop = 900px

可以避免直接修改源码，可以解决内容宽度问题，而且在移动设备上显示正常。
可以看 http://www.heqiangfly.com 改动效果

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[TonyPythoneer]

這個方法才是正解

$main-desktop                   = 1200px
$content-desktop                = 900px

或是統一一下 css 變數，可以避免文檔和實際的配置不一致

[XingwenZhang]

我修改之后本地是可以的，但是push上去之后没反应是怎么回事？已经执行了hexo clean了。

[guocheng1106]

感谢

[chchuj]

@XingwenZhang 我本来也是push没反应，hexo clean之后
GitHub Page没反应，Coding Page可以

[LeeHoT]

我想问一下，我的主页第一个文章与上边框的距离有点大，应该更改哪个配置？

[chuxubank]

直接在source/css/_variables/custom.styl中使用Scheme Gemini 的参数即可w

$main-desktop                   = 75%
$content-desktop                = calc(100% - 252px)

[at2008]

@xiao-fang 最佳解决办法 👍✔

[hzio]

@chuxubank The best solution 👍

[ivan-nginx]

NexT is rebased into organization repo.
If you want new feature, fix, or support, create new in NexT v6.x repo (desirable in English).

There is instructions on English or Chinese how to update from v5.1.x to v 6.x

You also may read this for details.