Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
HanderWei opened this issue Mar 27, 2016 · 30 comments
Closed

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

HanderWei opened this issue Mar 27, 2016 · 30 comments

Comments

@HanderWei
Copy link

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

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

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

thx

@ledisthebest
Copy link

什么意思?

@HanderWei
Copy link
Author

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

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

@iissnan
Copy link
Owner

iissnan commented Mar 28, 2016

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

@HanderWei
Copy link
Author

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

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

@iissnan
Copy link
Owner

iissnan commented Mar 28, 2016

对于 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
Copy link
Author

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

@HanderWei
Copy link
Author

谢谢 @iissnan ,亲测有效

@willxuecn
Copy link

感谢

@ethan-funny
Copy link

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

@renzhaozhao
Copy link

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

@liuli1735
Copy link

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

@Hclmaster
Copy link

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

@raykle
Copy link

raykle commented Aug 16, 2016

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

@iTofu
Copy link

iTofu commented Aug 26, 2016

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

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

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

@Fynes
Copy link

Fynes commented Aug 26, 2016

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

@xiaoli123
Copy link

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

@songyibin
Copy link

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

@hhysj
Copy link

hhysj commented Mar 17, 2017

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

@xiao-fang
Copy link

xiao-fang commented Jun 2, 2017

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

.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
Copy link

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

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

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

@aidansu
Copy link

aidansu commented Jun 30, 2017 via email

@TonyPythoneer
Copy link

這個方法才是正解

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

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

@XingwenZhang
Copy link

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

@guocheng1106
Copy link

感谢

@chchuj
Copy link

chchuj commented Nov 20, 2017

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

@LeeHoT
Copy link

LeeHoT commented Dec 4, 2017

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

@chuxubank
Copy link

chuxubank commented Dec 18, 2017

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

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

@at2008
Copy link

at2008 commented Dec 20, 2017

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

phpsmarter pushed a commit to React-Apollo/React-Apollo.github.io that referenced this issue Jan 20, 2018
*** 简短说明干了什么**
 What:
iissnan/hexo-theme-next#759 (comment)
---------------------------------------
*** 为什么这么做?**
Why:

***怎么解决的**
How:

---------------------------------------

``

---------------------------------------
@hzio
Copy link

hzio commented Apr 23, 2018

@chuxubank The best solution 👍

@ivan-nginx
Copy link
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 Apr 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests