一个Stylish脚本。

自从用上Readability/Pocket这一类的工具之后，有时候在知乎看文章就会想，要是能有个脚本可以把页面转换成类似于Pocket那样的样式就好了。当然我可以直接保存到Readability或者Pocket上，不过这样做就得按一次按钮并且打开Pocket的页面，或许还要登陆，其实也挺麻烦的。有些其他的页面firefox也支持阅读模式，但并不常见，所谓可遇而不可求。
直到前阵子，我发现了个FF有个插件叫Stylish。这个插件呢挺有意思的，可以说CSS版本的Greasemonkey。它有个脚本库，应用这些脚本库里用户上传的脚本，你可以随心所欲地自定义常用网站的样式。比如黑暗版谷歌：

Dark Google

当然啦，上面也有不少适用于知乎的自定义样式，比如由tomowm制作的知乎答案阅读模式。

Zhihu Answer Read Mode

看上去效果还蛮简洁大方的。但是我觉得还有调整的余地，一是知乎打开单个答案并不常用，二来字体大小、配色和布局我仍不太满意。于是无聊中花了点时间稍微修改了下，变成这样：

Zhihu Question Read Mode 1

有个比较不一样的地方在于，我认为问题页面要比答案页面常用，因此我的样式表匹配的是问题页面。有多个答案的时候是这样的：

Zhihu Question Read Mode 2

当然直接把所有的问题页面都改成这样也不好，有些按钮和操作也可能要用到。我又懒得真的为这个去开发一个插件出来，所以采用了折中的办法，把url的匹配表达式写成这样子

1
regexp("http://www.zhihu.com/question/.*\\?")

这样子，只要在问题页面地址栏加多一个问号再ENTER就可以转换成阅读模式了。

Zhihu Question Read Mode URL

最后，源代码如下，有兴趣的可自行修改添加到Stylish里面去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
@-moz-document regexp("https://www.zhihu.com/question/.*\\?") {

div.zu-top {
    display: none;
}

div.zm-tag-editor-labels.zg-clear {
    display: none;
}

div.zm-meta-panel {
    display: none;
}

div.zu-main-sidebar {
    display: none;
}

span.count {
    display: none;
}

button.up {
    display: none;
}

i.icon.vote-arrow {
    display: none;
}

span.label {
    display: none;
}

button.down {
    display: none;
}

div.zh-answers-title {
    display: none;
}

img.zm-list-avatar {
    display: none;
}

div.zm-item-vote-info {
    display: none;
}

div.more-awesome {
    display: none;
}

div.zh-summary.summary.clearfix {
    display: none;
}


a.zm-item-vote-count {
    display: none;
}
    
a.zg-link-litblue-normal {
    display: none;
}
    
a.zu-edit-button {
    display: none;
}

div.feed-item {
    display: none;
}
    
div.zm-editable-editor-wrap {
    display: none;
}

div.zg-wrap.zu-main {
    font-family: MSYH;
    font-size: 12px;
}
    
div.highlight {
    background-color: #F6FFEC;
}    
    
body {
    background-color: #F6F4EC;
}


button.up {
    display: none;
}

button.down {
    display: none;
}

a.zm-item-vote-count {
    display: none;
}

.zm-votebar .up, .zm-votebar .down{
    display: none;
}

.zm-item-expanded .zm-votebar, .zh-question-answer-wrapper .zm-votebar, .zh-question-answer-wrapper .zm-item-vote-info, .zm-item-expanded .zm-item-vote-info, .zm-item-expanded .zm-item-meta, .zm-item-expanded a.collapse, .zm-item-expanded .full-content {
display: none; 
}
    
div.zu-main-content-inner.with-indention-votebar {
    margin-left: 180px;
}
    
div.zu-main-content-inner {
    margin: 0px 180px 0px 0px;
}
    
div.zu-main-content {
    box-shadow: 0px 0px 4px 1px grey;   
    padding-top: 60px;
}
    
div.zm-item-answer {
    margin-top: 30px;
    margin-bottom: 20px;
}
    

div.zm-editable-content {
    font-style: normal;
}

div.zm-editable-content.clearfix {
    font-style: normal;
}
   
div.answer-status {
    background: #dddddd;
}


h3.zm-item-answer-author-wrap a {
    margin-top: 50px;
    margin-left: 0px;
    font-size: 16px;
}
}