更好的使用看云 · php筆記

## 更好的使用看云 ![](http://cdn.aipin100.cn/18-4-12/87776352.jpg) 看云寫文檔、做筆記很方便。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空間做存儲空間。更多好用的工具請閱讀：[開發工作流 · 產品設計 · 看云](http://www.hmoore.net/xiak/product/384784) PS: 現在可以直接使用看云提供的 [云圖片] 插件了 * * * * * ### 4. 實用小工具 #### 進度條 ![](http://progressed.io/bar/80) ``` ![](http://progressed.io/bar/80) ``` #### 勛章 ![](https://img.shields.io/badge/build-passing-ff69b4.svg) ![](https://img.shields.io/badge/%E5%98%BB%E5%98%BB-SF-brightgreen.svg?style=for-the-badge) ``` ![](https://img.shields.io/badge/build-passing-ff69b4.svg) ![](https://img.shields.io/badge/%E5%98%BB%E5%98%BB-SF-brightgreen.svg?style=for-the-badge) ``` #### 占位圖 ![](http://placehold.it/200x100&text=placehold) ``` ![](http://placehold.it/200x100&text=placehold) ``` #### 在線計數器 [Amazing Counters - Free Web Counter Free Hit Counters](http://amazingcounters.com/) ![](http://cc.amazingcounters.com/counter.php?i=3247063&c=9741502) ---- #### 訪問統計 https://s11.flagcounter.com/index.html ![](https://s11.flagcounter.com/count2/WnD/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/) * * * * * ### 5. 隨機圖片API 更多用法見：https://source.unsplash.com ![](https://source.unsplash.com/random/400x200) ![](https://source.unsplash.com/user/erondu/400x200) ~~~ ![](https://source.unsplash.com/random/400x200) ![](https://source.unsplash.com/user/erondu/400x200) ~~~ 參考：[幾條經驗美化你的GitHub開源項目 - SegmentFault](https://segmentfault.com/p/1210000008176432?from=timeline) * * * * * ### 6. 要注意的一些地方 1. 如果使用了html的話，要和md內容部分空一行，不然渲染時可能無法正常顯示。 * * * * * 待續…… last update：2018-10-11 18:26:29