更好的使用看云
最后更新于：2022-04-02 04:27:12
## 更好的使用看云
看云写文档、做笔记很方便。git版本管理，md增强语法对程序员来说简直太友好了。下面分享一些实用的技巧和方法，让你更好的使用看云。
> 推荐使用 [flomo · 浮墨笔记](https://flomoapp.com/register2/?MTYzNjY1) 记录想法、灵感片段，帮助整理思想碎片。
* * * * *
### 1. 自动发布
>[tip] 开启自动发布后，点击同步按钮后会自动发布，这样做可以保证文档永远都是呈现最新的版本。
* * * * *
### 2. 解决代码块一行过长不方便看的问题：
点击右上角下拉按钮 **\[样式设置\]**，加入以下样式即可解决。
```css
/* 代码块换行 */
pre, code { white-space: pre-wrap!important; word-wrap: break-word!important; }
```
* * * * *
### 3. 自定义样式
如你所见，我文档中的很多样式都是经过自定义美化过的。
```css
/* 全黑字体更好看 */
p, ul, ol, pre {
color: #000;
}
/* 美化引用段落样式 */
blockquote {
padding: 15px;
margin-bottom: 20px;
position: relative;
}
/* 下方阴影部分 */
blockquote:after {
content: '';
height: 20px;
background-image: url(http://cdn.aipin100.cn/18-4-12/47765313.jpg);
background-size: 50% 100%;
background-repeat: no-repeat;
position: absolute;
width: 100%;
bottom: -20px;
left: -4px;
}
/* 改变默认的引用段落样式 */
blockquote.default {
border-left: 4px solid #2ebd88;
background: #f5f5f5;
color: #555;
}
/* 扩展样式：不仅能改变样式，还能新增样式class：增加一个引用样式，使用方法： >[nice] XXX */
blockquote.nice {
border-left-color: #2ac152;
color: #22c34b;
background-color: #e2ffea;
}
blockquote.tip {
border-left-color: #f75151;
color: #666;
background-color: #f8f8f8;
padding: 15px 23px;
}
blockquote.tip:before {
position: absolute;
top: 30%;
left: -12px;
background: #f75151;
border-radius: 50%;
content: "!";
width: 20px;
height: 20px;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* 改变文档标题样式 */
.m-manual .manual-title .text {
font-size:24px;
font-weight:400;
}
/* 代码块换行 */
pre, code { white-space: pre-wrap!important; word-wrap: break-word!important; }
/* 美化代码小块`` */
pre code {
border: none;
padding: 0px;
margin: 0px;
background: none;
}
code {
background: #f9fafa;
border: 1px solid #ded9d9;
margin: 0px 5px;
padding: 2px 6px;
}
/* 标题加粗 */
h1, h2, h3, h4, h5, h6, h7 {
font-weight: bold;
}
/* 使得更显眼一点 */
h1, h2, h3, h4, h5, h6, h7, b, strong {
text-shadow: 0 1px white;
color: #000;
}
/* 标题与上边的间距 */
h3, h4, h5, h6, h7 {
margin-top: 35px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size:1.2em;
margin-top: 25px;
}
/* 让段落有分割距离 */
p {
margin-bottom: 1em;
}
blockquote p {
color: inherit;
}
blockquote p:last-child {
margin-bottom: 0!important;
}
blockquote strong, blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6, blockquote h7 {
color: #000;
}
blockquote.info strong , blockquote.info h1, blockquote.info h2, blockquote.info h3, blockquote.info h4, blockquote.info h5, blockquote.info h6, blockquote.info h7 {
color: #048eb7;
}
blockquote.danger strong , blockquote.danger h1, blockquote.danger h2, blockquote.danger h3, blockquote.danger h4, blockquote.danger h5, blockquote.danger h6, blockquote.danger h7 {
color: #da0505;
}
blockquote.nice strong , blockquote.nice h1, blockquote.nice h2, blockquote.nice h3, blockquote.nice h4, blockquote.nice h5, blockquote.nice h6, blockquote.nice h7 {
color: #049028;
}
blockquote.baby strong, blockquote.baby h1, blockquote.baby h2, blockquote.baby h3, blockquote.baby h4, blockquote.baby h5, blockquote.baby h6, blockquote.baby h7{
color: #FE007F;
}
blockquote.baby {
border-left-color: #FE007F;
color: #FE007F;
background-color: #ffecf6;
}
/* 图片描述 */
.img-desc {
color: #b9b9b9; text-align: center; font-size: 12px;
}
/* 更好看的分割线样式 */
hr {
border: 0;
border-bottom: 1px solid #ddd;
margin-bottom: 25px;
margin-top: 25px;
box-shadow: 0 2px 0 rgba(229, 229, 229, 0.4);
}
li {
margin: 10px 0;
}
a {
/* 腾讯的产品用户体验最好，腾讯系产品爱用的链接颜色 */
color: #3481cf;
}
a:hover {
color: #00a4ff;
text-decoration: underline;
}
```
简单几个样式，从此让你的文档更加漂亮，更加易于阅读和赏心悦目。
* * * * *
### 3. 文章配图：使用免费图床外链
没有什么比形象的图片更具有说服力和情景代入感的了，不要吝啬使用精彩的配图。
看云有空间容量限制，如果你只是写文字，其实用不了多少空间，但是如果你经常上传图片的话，那么空间占用就很可观了，所以就需要寻找一款图床工具了。
我目前使用的 [极简图床](http://jiantuku.com/#/) 很不错，可以使用七牛云的免费10G空间做存储空间。
更多好用的工具请阅读：[开发工作流 · 产品设计 · 看云](https://www.kancloud.cn/xiak/product/384784)
PS: 现在可以直接使用看云提供的 [云图片] 插件了
* * * * *
### 4. 实用小工具
#### 进度条
```
```
#### 勋章
```
```
#### 占位图
```
```
#### 在线计数器
[Amazing Counters - Free Web Counter Free Hit Counters](http://amazingcounters.com/)
----
#### 访问统计
https://s11.flagcounter.com/index.html
* * * * *
### 5. 随机图片API
更多用法见：https://source.unsplash.com
~~~
~~~
参考：[几条经验美化你的GitHub开源项目 - SegmentFault](https://segmentfault.com/p/1210000008176432?from=timeline)
* * * * *
### 6. 要注意的一些地方
1. 如果使用了html的话，要和md内容部分空一行，不然渲染时可能无法正常显示。
* * * * *
待续……
last update：2018-10-11 18:26:29
';