更强的 V2EX 界面修改方案 v2ex.k 0.1.0 发布！！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3606 天前的主题，其中的信息可能已经有所发展或是发生改变。

上周六晚上，我发布了 v2ex.k 的0.0.1版本，收到了很多的反馈和支持，这让我对这个项目充满信心。那个周末连续更新到了0.0.5版本。

但我希望这个项目可以做到更好。

经过几个晚上的加工，0.1.0版本终于定型。截至我写这个帖子的时候，已经达到了0.1.1版本，紧急修复了一个bug。

如果对v2ex.k 不太熟的同学可以先看一下原来的帖子： http://www.v2ex.com/t/169091

或者github主页： https://github.com/kokdemo/v2ex.k

或者直接安装一下试试： https://chrome.google.com/webstore/detail/v2exk/dnbmbhefokngmkalbdcgjdlgoppfhndn

特性

全新的界面颜色。
左侧导航栏。
快速阅读模式。
左侧显示通知条数。
自定义颜色设置。

6. 全键盘操作模式。

截图

观察力比较好的同学已经能看出一些端倪来了，主要修改的地方见下面的描述。

更新

2015.2.11:

全新的默认主题颜色。
正式迈入0.1版本，修改原有的iframe模式为ajax模式，读取速度更快。
修改CSS，减少页面空隙，提升页面利用率。
增加全键盘操作，提升了笔记本的阅读效率。
优化了快速阅读区域中的中文阅读效果，修改了字体渲染效果。
优化左侧导航栏的视觉效果，全部使用icon代替原有文字。

帮助

使用快速阅读只需要点击列表中除了链接之外的空白即可。
右侧的快速阅读区域可以点击进入具体的帖子。
自定义颜色设置具体如下

<code>

.k_color_dark{
    background-color: #3C7300;/*主要导航条颜色*/
}

.k_color_light{
    background-color: #5CB000;/*次级导航条颜色*/
}

span a.node.k_color_node{
    background-color: #B9D998;/*小标签背景颜色*/
    color: #FFF;
}

td a.count_livid.k_color_count{
    background-color: #3C7300;/*回帖数目背景颜色*/
}   

#Wrapper.k_color_background{
    background-color: #E2F1D0;/*背景颜色*/
}

.k_color_hover:hover{
    background-color: #2980B9;/*导航条放置变色*/
}

.k_color_item{
    background-color: #FFF;/*列表项背景颜色*/
}

.k_color_item a:link,.k_color_item a:visited,.k_color_item a:active{
    color: #3C3B47; /*列表项文字颜色*/
    text-shadow: none;
}

.k_color_choosen{
    background-color: #eeeeee;/*被选择的列表项的背景颜色*/
}

#k_tabbar a.tab_current:link, #k_tabbar a.tab_current:visited, #k_tabbar a.tab_current:active{
    background-color: #505770; /*次级导航条被选中颜色*/
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

</code>

4 . 全键盘使用：

在没有开启快速阅读模式下：
- 方向键上，方向键下，会自动选择帖子列表的第一项，并进入快速阅读模式。
- 空格键，会回到顶部。
- 方向键左，会回到上一页。
在开启了快速阅读模式之后：
- 方向键上下，切换上一条/下一条帖子。
- 空格键，会回到顶部。
- 方向键右，进入这个帖子。

For chrome

https://chrome.google.com/webstore/detail/v2exk/dnbmbhefokngmkalbdcgjdlgoppfhndn

感谢

首先要感谢V2EX Next项目 https://dribbble.com/shots/1355911-V2EX-Next 上一个版本的配色很受大家诟病，我将配色向next项目靠拢，果然好多了！

其次要感谢
@rainy3636
@loading
@romotc
@yrom
@vimutt
@233
@branchzero
@Jreen
@julijulilijuliju
@liwanglin12
@elvba 等同学的反馈，尤其是@branchzero反馈特别仔细；新的快速阅读的想法也是来自@elvba。

接着要感谢一下 @caoyue 制作的ff版本 https://github.com/caoyue/userjs/blob/master/v2ex.k.user.js

以及 @break 制作的衍生版本 https://github.com/jShi-git/purple-v2ex

我的思路和他的有很多相似的地方。

ps

写完帖子也有12点多了……希望大家能够用的开心！

还是那句话：

『用更好的UI开始新的一天。』

第 1 条附言 · 2015-02-12 08:17:42 +08:00

0.1.2更新：

修复快速阅读模式https的支持

background

颜色

阅读

103 条回复 • 2017-04-03 16:01:23 +08:00

1 2

❮

❯

oott123

2015-02-12 00:19:43 +08:00 via Android

有火狐，没烦恼！

jsonline

2015-02-12 00:19:44 +08:00

皮肤不错，可惜V2的内容变水了。

chmlai

2015-02-12 00:34:16 +08:00

伸手党等safari

typcn

2015-02-12 00:36:54 +08:00

为什么没有自动更新呢？

typcn

2015-02-12 00:39:22 +08:00

好吧搞错了。。卸了重新去商店装好了。

建议 @Livid 提供一些不跨域的 API ，支持 ajax 加载就太好了。

fyhqy

2015-02-12 00:43:35 +08:00 via iPhone

不错，明测试一下

rainy3636

2015-02-12 00:45:28 +08:00

你好，我想问一下，那个“选项”是空的，还是我的浏览器有问题？

rainy3636

2015-02-12 00:54:24 +08:00

新版本，在https下，使用快速阅读，需要加载脚本变成

Dukec

2015-02-12 00:57:45 +08:00

快速阅读不支持https

icedx

2015-02-12 01:05:59 +08:00

颜色终于正常了

branchzero

2015-02-12 01:11:58 +08:00

@kokdemo
新版看着好赞！感谢LZ用心。
顺带建议把.box的margin(上下)给重新补上：）
貌似文本框里输东西的时候按左右箭头也会跳，不知道算不算BUG。。。
最后，还是无尽的感谢~实在是太棒了。

pinlin168

2015-02-12 01:25:24 +08:00

用起来太爽了，感谢LZ

blessme

2015-02-12 01:37:28 +08:00

感觉右边很大空白，造成不适。

master

2015-02-12 02:59:56 +08:00

快速阅读能支持上https就好了 >_<

loveminds

2015-02-12 05:52:15 +08:00

那個郵政綠的配色真心丑

SharkIng

2015-02-12 07:19:51 +08:00

试用了下但是还是不习惯换回去了

还是支持

Mihuwa

2015-02-12 07:37:20 +08:00 via iPhone

看起来很不错。

kokdemo

2015-02-12 08:17:14 +08:00

早上上班之前赶快修复一下这个bug……

已经发布了0.1.2版本，请更新一下

@rainy3636 option我还没写呢…… [捂脸]

@rainy3636
@Dukec
@master https已经支持了。

sorcerer

2015-02-12 08:39:07 +08:00

快速阅读模式下,不会显示评论吗?

songxajh

2015-02-12 08:42:41 +08:00

cool，换上去了。

Winny

2015-02-12 08:59:40 +08:00

主力是Firefox用不上，单纯支持一下。

andy1987

2015-02-12 09:30:31 +08:00

很不错，在布局上跟孢子社区有点像哦

ZhaoMiing

2015-02-12 09:38:16 +08:00

很不错，但搜索框圆的有点违和

hewigovens

2015-02-12 09:38:54 +08:00

侧边栏的图标目测大小不一, 看着很难受

jimmy

2015-02-12 09:55:19 +08:00

竟然没有自动更新的功能，我本地还是0.0.5
只能卸载重装了。

JkCola

2015-02-12 09:57:59 +08:00

@kokdemo 简直赞
但是提点建议，我想要[滚动条]，要不回复列表太长，我都不知道看了多少

gqfBzoLVY3Wl4Tng

2015-02-12 09:58:32 +08:00

chrome 有tampermonkey

kokdemo

2015-02-12 10:02:50 +08:00

@sorcerer 关于你的问题，其实是三部分的原因促成我这么来做。

1. 用iframe来加载，虽然能够完整的加载全部的页面，但是对iframe的控制力太小，导致右侧与整体界面格格不入，也减少对她的扩展的可能性。

2. 我认为快速阅读就是需要更快一些，让我们的浏览更有效率，如果你对这个帖子真的有兴趣，那么无论是按一下右方向键还是点击一下右侧区域，都可以直达这个帖子。

3. 好吧，上面都是我编的，其实是因为v2ex没有提供读取一个帖子回复的接口……

@ZhaoMiing 这是下一步要修改的。

@hewigovens 应该是一样大的，是不是最上面那个提醒的icon不居中？

kokdemo

2015-02-12 10:04:33 +08:00

@jimmy 我不太清楚这个自动更新怎么搞……

@JkCola 滚动条这个我也很纠结，保留滚动条的话，视觉上会很不连贯

jimmy

2015-02-12 10:06:56 +08:00

新版本更新上了，用的时候有几个地方相当的别扭。
1、快速阅读的时候，点击整个页面的任何地方都跳转到详细页去，误操作很频繁。
2、在详情页里应当屏蔽方向键，特别是人家在输入内容的时候，方向键是用来调整输入内容的，现在一触发方向键，输入的内容就等于作废了。
3、快速阅读最好能打评论也显示出来，毕竟“论坛”嘛，评论比主题关注度更高，主题不会变，但评论时刻都在变。现在这种方式，快速阅读的意义就没有了。
先这样吧，免得等下我又不小心碰到方向键。
PS.这是我第5次输入这些内容……orz...

kokdemo

2015-02-12 10:10:18 +08:00

@jimmy

方向键这个误操作……是我设计的问题，我考虑改用一些用的比较少的键位上或者是在输入框中屏蔽掉。

至于显示评论真的还做不到……快速阅读这个点击跳跃就是这么设计的，如果你对这个很感兴趣，那么点击一下进入详情。

我今天再收集一些反馈，晚上整理一下，看看这些交互是否需要改一下。

JkCola

2015-02-12 10:10:44 +08:00

@kokdemo 我个人感觉还是加上的好，加个比较漂亮的滚动条，也会太损失美感

jimmy

2015-02-12 10:23:03 +08:00

自动更新：点击编辑，然后就会有上传更新包的地方，用这种方式上传的版本，就会自动更新了。
PS. 关于键位，我觉得j、k这种翻页操作可以用到这里。。。

kokdemo

2015-02-12 10:32:37 +08:00

@jimmy 总之我先把输入框屏蔽加上吧……

longquanwo

2015-02-12 10:57:45 +08:00

good

lhx2008

2015-02-12 11:18:06 +08:00

ff的怎么同步更新。。基本不可用的样子

pzhang

2015-02-12 11:22:06 +08:00

置顶的帖子标志位置好像有点问题：

mazk

2015-02-12 11:23:58 +08:00 via iPhone

我有个疑问……把css加到设置里，如果到没有这个插件的浏览器上看，岂不是会乱……？

happywowwow

2015-02-12 11:25:06 +08:00

眼花缭乱的

还是支持

另外同上，置顶的标识位置有问题

kokdemo

2015-02-12 11:47:46 +08:00

@pzhang
@happywowwow 置顶的我给忘了……

@mazk 会这样的，但是chrome的插件是会同步的，应该问题不大。

alexapollo

2015-02-12 11:57:56 +08:00

不错，很印象笔记style

panxianhai

2015-02-12 12:36:52 +08:00

点击连接的时候，快速阅读也会触发，所以就卡顿了一下。

asca

2015-02-12 15:56:16 +08:00

油猴脚本左侧也会显示铜币，而且很难看...

garth

2015-02-12 16:04:58 +08:00

@asca 哪里有油猴脚本？？

justfindu

2015-02-12 16:19:08 +08:00

我觉得快速阅读的快捷键使用 J和K
方向键不要绑定事件了... 在编辑状态方向键会回退都不能够回退修改了上下键习惯滑动结果会从第一条开始快捷阅读

asca

2015-02-12 16:21:11 +08:00

@garth 贴子里的 Firefox 版就是油猴脚本啊

kokdemo

2015-02-12 16:30:50 +08:00

@justfindu 其实只要解决了在输入框情况下屏蔽快捷键功能就行

heliar

2015-02-12 16:34:00 +08:00

。。。还有在帖子列表中开启快速阅读模式后用上下方向键选择帖子时列表无法跟随滚动。。所以还是没法完全用键盘操作

kokdemo

2015-02-12 16:35:36 +08:00

@heliar 我在mac下都是ok的……这属于兼容性问题……我晚上处理一下

justfindu

2015-02-12 16:52:12 +08:00

但是始终觉得上下键是快速阅览还是不太妥...因为我不是mac用户的关系喜欢上下键慢慢滚

jemyzhang

2015-02-12 16:53:21 +08:00

快速阅读模式，向下键，右边帖子内容会更新，但是左边列表滚动到底部后，不会继续往下滚动。

heliar

2015-02-12 17:03:19 +08:00

@kokdemo chrome 40.0.2214.111 m，win8.1这个环境。。

cwhong4399

2015-02-12 17:09:42 +08:00

为了这个，win和mac都转战chrome上v2ex了，支持

cwhong4399

2015-02-12 17:18:58 +08:00

更新后发现快速阅读不能看评论了，希望加上……
v2ex没有提供读取一个帖子回复的接口？之前的版本好像可以……

kokdemo

2015-02-12 17:48:43 +08:00

@jemyzhang 会继续往下滚动的……就是兼容问题没有正常显示。

@cwhong4399 感谢你的支持，我确实没有找到读取回复的借口。关于这两种模式，应该会有一个选项来切换。

Dukec

2015-02-12 19:20:26 +08:00

@kokdemo 建议给左侧图标加上个title值注释一下代表的含义。

tmacshuai

2015-02-12 19:38:09 +08:00

感觉好屌啊。。。

cwhong4399

2015-02-12 20:02:00 +08:00

@SharkIng 旧版插件在哪里？怎么恢复

est

2015-02-12 20:15:00 +08:00

好屌啊。。。什么licence啊。。。。。。我可以拿去抄袭么。。。。。。。。。。。。。。。。

blue7wings

2015-02-12 20:20:00 +08:00

不错不错，已用。。。

kira2

2015-02-12 21:21:03 +08:00

很好看简单大方
但是我装好之后，中间那一块浅色区域没有节点链接了。。。

kokdemo

2015-02-12 21:23:48 +08:00

@kira2 截个图吧

kira2

2015-02-12 21:28:29 +08:00

kokdemo

2015-02-12 21:29:58 +08:00

@kira2 额少侠，这个二级导航条只有在主页以及少数页面才有……

6IbA2bj5ip3tK49j

2015-02-12 21:36:56 +08:00

firefox 版本好像有点问题，最左侧的font icon都不能显示。

godonlyknows

2015-02-12 21:47:07 +08:00

希望快速阅读能在浏览器里留下历史记录

kira2

2015-02-12 21:48:07 +08:00

@kokdemo 哈哈哈和哈哈哈哈哈哈哈哈哈对不起哈哈哈（被自己蠢到

6IbA2bj5ip3tK49j

2015-02-12 21:54:33 +08:00

@xgfan 自己动手修正了，
fontawesome-webfont 路径有错误

tSQghkfhTtQt9mtd

2015-02-12 22:26:39 +08:00

谢谢楼主啦~不过我这边好像有一些错位现象呢
http://file.lwl12.com/img/v2ex/170329-01.png http://file.lwl12.com/img/v2ex/170329-02.png
还有一点就是，我在编辑框里用方向键移动光标会导致后退页面。。。这点略蛋疼，希望尽快修复~

kokdemo

2015-02-12 22:57:20 +08:00

@xgfan 这个是个例吗？

kokdemo

2015-02-12 23:44:27 +08:00

@branchzero
@blessme
@sorcerer
@jimmy
@pzhang
@happywowwow
@justfindu
@heliar
@jemyzhang
@Dukec
@liwanglin12

首先是通知一下大家0.1.3已经更新了，包括以下的修改：

1. 让人蛋疼的方向键问题修复了，在现在情况下，如果输入框和文本域是正在输入的状态下，快捷键绑定的功能将会失效。移开焦点之后，快捷键恢复。

2. 主页的列表项在使用方向键的时候，位置会自动改变，保证不会掉到视野之外。

3. 快速阅读模式现在的逻辑如下：
如果这个帖子的正文很短（小于140个字符），那么将会以iframe的形式加载整个页面。
如果正文很长，就讲以快速阅读的模式渲染页面。
如果你在短时间内大量的使用快速阅读模式，这个接口可能会被v2ex封闭一段时间，此时，将会继续使用iframe加载页面。

4. 左侧的标志都加上了title

5. 一些不正常的留白和对齐错误也修复了。

最后说一下59楼的问题，我性子比较冲，就不at他本人了。
欢迎fork这个项目，做出更有意思的东西来，比如purple-v2ex，里面都是很赞的创意和设计。但是我不明白，难道我没有licence这件事情就可以被视为『可以抄袭』？

如果真的有必要，我会把licence加上的。

yujizmq

2015-02-13 00:06:29 +08:00

branchzero

2015-02-13 00:48:20 +08:00

作者简直劳模啊，赞一记。
这回体验良好，想要拿来正常使用的V2er可以下手了，强力推荐~
同样还是建议把box上下补上边距，完~

Stof

2015-02-13 02:37:09 +08:00

Firefox 32

kokdemo

2015-02-13 07:56:38 +08:00 via Android

@branchzero
@Stof 建议你们咨询一下 @xgfan ，他好像fix了这个问题

garth

2015-02-13 08:40:58 +08:00

@asca 在非火狐浏览器上使用会错位的。
@kokdemo 为什么不直接制作油猴脚本？

heliar

2015-02-13 08:52:03 +08:00

额。。别在列表处玩上下键，频繁加载会被禁ip的。。（刚从小黑屋出来

kokdemo

2015-02-13 09:13:36 +08:00

@garth 因为油猴脚本不如chrome插件好做。

@heliar 在那个接口被封掉之后，应该会默认显示iframe加载吧。

@livid 能否放宽这个限制？

asca

2015-02-13 09:13:57 +08:00

@garth Firefox 36

heliar

2015-02-13 09:19:43 +08:00

@kokdemo 并不会。。直接被禁止了

iqav

2015-02-13 09:24:04 +08:00

挺棒的，不过用着第一感觉还不够精致，期待慢慢完善。

kokdemo

2015-02-13 09:31:27 +08:00

@heliar ……那在0.1.3版本之后，帖子正文内容小于140个字符的就不会调用这个接口，应该能减轻一些压力吧。

ctsed

2015-02-13 09:33:17 +08:00

@kokdemo 看不到追加的内容

majunbo

2015-02-13 09:48:20 +08:00

已安装，支持楼主。

kokdemo

2015-02-13 09:49:00 +08:00

@ctsed 因为接口里面没有哈……

googlefans

2015-02-13 11:18:55 +08:00

强！！

kn007

2015-02-13 12:00:04 +08:00

我还是喜欢这个

6IbA2bj5ip3tK49j

2015-02-13 13:27:15 +08:00

@Stof
firefox 需要修改脚本的font.css,把所有的webfont都改为
//www.v2ex.com/static/font/[font name]?v=[version]
比如：

金币则需要在v2ex设置里面把显示账户余额给关掉了。

kokdemo

2015-02-13 14:42:20 +08:00

@xgfan 显示金币余额应该已经改掉了，不知道咋还是出现……

6IbA2bj5ip3tK49j

2015-02-13 15:04:28 +08:00

@kokdemo 可能油猴脚本没有更新吧。

bladecamper

2015-02-13 15:24:21 +08:00

碉堡了，不过右边怎么没看到快速回复的地方，是必要点链接才行吗

kokdemo

2015-02-13 15:30:35 +08:00

@bladecamper 是的，点击一下帖子列表除了链接之外的地方就行

bladecamper

2015-02-13 15:33:23 +08:00

@kokdemo 我意思右侧快速阅读区没有回复和用户评论，不过似乎不是所有帖子都这样，是为什么？

kokdemo

2015-02-13 15:38:08 +08:00

@bladecamper 请关注一下71楼我的逻辑解释

bladecamper

2015-02-13 15:56:07 +08:00

@kokdemo 懂了，刚才没看到，sorry。

tSQghkfhTtQt9mtd

2015-02-13 17:55:28 +08:00

我这边看来侧边栏退出按钮还是错位，然后就是我发现360极速的滚动条没有了。。

caoyue

2015-02-14 11:13:21 +08:00

GreaseMonkey 版本已更新到 0.1.3
另外加了一个可以选择 Ajax 还是 iframe 加载的 GreaseMonkey 选项 :)

Pete

2015-02-14 19:43:15 +08:00

在首页节点选择那里即第二列 hover的时候背景是白色的字也是白色的而且有border-radius
另外这三列的宽度让我感觉很别扭啊....

lingoys

2015-02-15 13:26:57 +08:00

我觉得好不方便啊0 0

100

kokdemo

2015-02-15 14:04:31 +08:00

@lingoys 具体是拉你不方便呢？

1 2

❮

❯