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
Labels

Comments

@HanderWei
Copy link

@HanderWei HanderWei commented Mar 27, 2016

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

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

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

thx

@ledisthebest
Copy link

@ledisthebest ledisthebest commented Mar 27, 2016

什么意思?

@HanderWei
Copy link
Author

@HanderWei HanderWei commented Mar 27, 2016

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

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

@iissnan
Copy link
Owner

@iissnan iissnan commented Mar 28, 2016

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

@HanderWei
Copy link
Author

@HanderWei HanderWei commented Mar 28, 2016

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

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

@iissnan
Copy link
Owner

@iissnan 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

@HanderWei HanderWei commented Mar 28, 2016

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

@HanderWei
Copy link
Author

@HanderWei HanderWei commented Mar 28, 2016

谢谢 @iissnan ,亲测有效

@HanderWei HanderWei closed this Mar 28, 2016
@willxuecn
Copy link

@willxuecn willxuecn commented Mar 29, 2016

感谢

@ethan-funny
Copy link

@ethan-funny ethan-funny commented Apr 19, 2016

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

@renzhaozhao
Copy link

@renzhaozhao renzhaozhao commented Jun 8, 2016

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

@liuli1735
Copy link

@liuli1735 liuli1735 commented Jul 8, 2016

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

@Hclmaster
Copy link

@Hclmaster Hclmaster commented Jul 30, 2016

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

@raykle
Copy link

@raykle raykle commented Aug 16, 2016

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

@iTofu
Copy link

@iTofu iTofu commented Aug 26, 2016

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

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

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

@Zeeech Zeeech commented Aug 26, 2016

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

@xiaoli123
Copy link

@xiaoli123 xiaoli123 commented Oct 18, 2016

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

@songyibin
Copy link

@songyibin songyibin commented Oct 26, 2016

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

@hhysj
Copy link

@hhysj hhysj commented Mar 17, 2017

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

@xiao-fang
Copy link

@xiao-fang 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

@heqiangflytosky heqiangflytosky commented Jun 30, 2017

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

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

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

@aidansu
Copy link

@aidansu aidansu commented Jun 30, 2017

@TonyPythoneer
Copy link

@TonyPythoneer TonyPythoneer commented Oct 20, 2017

這個方法才是正解

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

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

@XingwenZhang
Copy link

@XingwenZhang XingwenZhang commented Nov 1, 2017

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

@guocheng1106
Copy link

@guocheng1106 guocheng1106 commented Nov 3, 2017

感谢

@chchuj
Copy link

@chchuj chchuj commented Nov 20, 2017

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

@LeeHoT
Copy link

@LeeHoT LeeHoT commented Dec 4, 2017

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

@chuxubank
Copy link

@chuxubank 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 at2008 commented Dec 20, 2017

@xiao-fang 最佳解决办法 👍

phpsmarter added 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 hzio commented Apr 23, 2018

@chuxubank The best solution 👍

@ivan-nginx
Copy link
Collaborator

@ivan-nginx ivan-nginx commented Apr 23, 2018

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
@ivan-nginx ivan-nginx added the v6.x label Apr 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.