Skip to content

感觉浏览器留白太多,代码块看起来比较麻烦 #759

@HanderWei

Description

@HanderWei

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

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

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

thx

Activity

ledisthebest

ledisthebest commented on Mar 27, 2016

@ledisthebest

什么意思?

HanderWei

HanderWei commented on Mar 27, 2016

@HanderWei
Author

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

就像这样:
2016-03-27 10 09 22

iissnan

iissnan commented on Mar 28, 2016

@iissnan
Owner
HanderWei

HanderWei commented on Mar 28, 2016

@HanderWei
Author

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

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

iissnan

iissnan commented on Mar 28, 2016

@iissnan
Owner

对于 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

HanderWei commented on Mar 28, 2016

@HanderWei
Author

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

HanderWei

HanderWei commented on Mar 28, 2016

@HanderWei
Author

谢谢 @iissnan ,亲测有效

willxuecn

willxuecn commented on Mar 29, 2016

@willxuecn

感谢

ethan-funny

ethan-funny commented on Apr 19, 2016

@ethan-funny

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

renzhaozhao

renzhaozhao commented on Jun 8, 2016

@renzhaozhao

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

liuli1735

liuli1735 commented on Jul 8, 2016

@liuli1735

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

chenghong-lin-nu

chenghong-lin-nu commented on Jul 30, 2016

@chenghong-lin-nu

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

raykle

raykle commented on Aug 16, 2016

@raykle

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

iTofu

iTofu commented on Aug 26, 2016

@iTofu

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

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

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

8 remaining items

aidansu

aidansu commented on Jun 30, 2017

@aidansu
TonyPythoneer

TonyPythoneer commented on Oct 20, 2017

@TonyPythoneer

這個方法才是正解

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

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

XingwenZhang

XingwenZhang commented on Nov 1, 2017

@XingwenZhang

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

guocheng1106

guocheng1106 commented on Nov 3, 2017

@guocheng1106

感谢

chchuj

chchuj commented on Nov 20, 2017

@chchuj

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

LeeHoT

LeeHoT commented on Dec 4, 2017

@LeeHoT

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

chuxubank

chuxubank commented on Dec 18, 2017

@chuxubank

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

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

at2008 commented on Dec 20, 2017

@at2008

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

added a commit that references this issue on Jan 20, 2018
hzio

hzio commented on Apr 23, 2018

@hzio

@chuxubank The best solution 👍

ivan-nginx

ivan-nginx commented on Apr 23, 2018

@ivan-nginx
Collaborator

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.

Repository owner locked and limited conversation to collaborators on Apr 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @iissnan@liuli1735@ethan-funny@raykle@hzio

        Issue actions

          感觉浏览器留白太多,代码块看起来比较麻烦 · Issue #759 · iissnan/hexo-theme-next