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

Comments

Projects
None yet
@HanderWei

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

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

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

thx

@ledisthebest

This comment has been minimized.

Show comment
Hide comment
@ledisthebest

ledisthebest Mar 27, 2016

什么意思?

什么意思?

@HanderWei

This comment has been minimized.

Show comment
Hide comment
@HanderWei

HanderWei Mar 27, 2016

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

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

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

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

@iissnan

This comment has been minimized.

Show comment
Hide comment
Owner

iissnan commented Mar 28, 2016

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

@HanderWei

This comment has been minimized.

Show comment
Hide comment
@HanderWei

HanderWei Mar 28, 2016

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

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

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

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

@iissnan

This comment has been minimized.

Show comment
Hide comment
@iissnan

iissnan Mar 28, 2016

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

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

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

This comment has been minimized.

Show comment
Hide comment
@HanderWei

HanderWei Mar 28, 2016

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

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

@HanderWei

This comment has been minimized.

Show comment
Hide comment
@HanderWei

HanderWei Mar 28, 2016

谢谢 @iissnan ,亲测有效

谢谢 @iissnan ,亲测有效

@HanderWei HanderWei closed this Mar 28, 2016

@willxuecn

This comment has been minimized.

Show comment
Hide comment

感谢

@ethan-funny

This comment has been minimized.

Show comment
Hide comment
@ethan-funny

ethan-funny Apr 19, 2016

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

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

@renzhaozhao

This comment has been minimized.

Show comment
Hide comment
@renzhaozhao

renzhaozhao Jun 8, 2016

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

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

@liuli1735

This comment has been minimized.

Show comment
Hide comment
@liuli1735

liuli1735 Jul 8, 2016

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

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

@Hclmaster

This comment has been minimized.

Show comment
Hide comment
@Hclmaster

Hclmaster Jul 30, 2016

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

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

@raykle

This comment has been minimized.

Show comment
Hide comment
@raykle

raykle Aug 16, 2016

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

raykle commented Aug 16, 2016

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

@iTofu

This comment has been minimized.

Show comment
Hide comment
@iTofu

iTofu Aug 26, 2016

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

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

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

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

This comment has been minimized.

Show comment
Hide comment
@Zeeech

Zeeech Aug 26, 2016

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

Zeeech commented Aug 26, 2016

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

@xiaoli123

This comment has been minimized.

Show comment
Hide comment
@xiaoli123

xiaoli123 Oct 18, 2016

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

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

@songyibin

This comment has been minimized.

Show comment
Hide comment
@songyibin

songyibin Oct 26, 2016

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

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

@hhysj

This comment has been minimized.

Show comment
Hide comment
@hhysj

hhysj Mar 17, 2017

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

hhysj commented Mar 17, 2017

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

@xiao-fang

This comment has been minimized.

Show comment
Hide comment
@xiao-fang

xiao-fang 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/ 可以解决这个问题.

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

This comment has been minimized.

Show comment
Hide comment
@heqiangflytosky

heqiangflytosky Jun 30, 2017

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

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

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

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

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

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

@aidansu

This comment has been minimized.

Show comment
Hide comment
@aidansu

aidansu Jun 30, 2017

aidansu commented Jun 30, 2017

@TonyPythoneer

This comment has been minimized.

Show comment
Hide comment
@TonyPythoneer

TonyPythoneer Oct 20, 2017

這個方法才是正解

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

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

這個方法才是正解

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

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

@XingwenZhang

This comment has been minimized.

Show comment
Hide comment
@XingwenZhang

XingwenZhang Nov 1, 2017

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

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

@guocheng1106

This comment has been minimized.

Show comment
Hide comment

感谢

@chchuj

This comment has been minimized.

Show comment
Hide comment
@chchuj

chchuj Nov 20, 2017

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

chchuj commented Nov 20, 2017

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

@LeeHoT

This comment has been minimized.

Show comment
Hide comment
@LeeHoT

LeeHoT Dec 4, 2017

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

LeeHoT commented Dec 4, 2017

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

@chuxubank

This comment has been minimized.

Show comment
Hide comment
@chuxubank

chuxubank Dec 18, 2017

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

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

chuxubank commented Dec 18, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@at2008

at2008 Dec 20, 2017

@xiao-fang 最佳解决办法 👍

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

**key:修改next主题的宽度**
*** 简短说明干了什么**
 What:
iissnan/hexo-theme-next#759 (comment)
---------------------------------------
*** 为什么这么做?**
Why:

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

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

``

---------------------------------------
@hzio

This comment has been minimized.

Show comment
Hide comment
@hzio

hzio Apr 23, 2018

@chuxubank The best solution 👍

hzio commented Apr 23, 2018

@chuxubank The best solution 👍

@ivan-nginx

This comment has been minimized.

Show comment
Hide comment
@ivan-nginx

ivan-nginx Apr 23, 2018

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.

Collaborator

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.X label Apr 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.