本文主要記錄一下博客美化的過程
在github上主要有兩個博客園美化的項目
第一種
作者博客地址https://www.cnblogs.com/bndong/
項目地址https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
部署文檔https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/
個人感受
優點：
- 酷炫，動畫多，完全看不出是博客園
- 菜單欄不錯，目錄也好看
- 部署文檔詳細，簡單好上手，也有很多可以根據自己意願開啟或者關閉的功能
- 有很多小功能小細節很有意思
缺點：
- 行間距之間，以及與圖片之間，間距小。閱讀還是有些別扭
- 因為酷炫，所以用到了很多js，所以用到很多托管在碼雲上的外鏈，有時候加載速度較慢，有一次甚至加載不出來
- 在手機端還是不太好看
效果
首頁
菜單欄
頂部
底部
補充
關於部署文檔中的流量統計，需要到友盟https://workbench.umeng.com注冊賬號，之后添加站點
其中這個就是你的id，之后看部署文檔即可
第二種
作者博客地址https://www.cnblogs.com/esofar/
項目地址https://github.com/esofar/cnblogs-theme-silence
部署文檔https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.md
個人感受
優點：
- 確實便於閱讀，簡潔，而且加載也快
- 部署也很簡單，還可以自己添加一些小功能
缺點：
- 作者的原始字體配置的不太好，有些發虛
- 部署文檔沒有第一種詳細
- 手機端也有一些問題
一些美化的tips
其實網上的美化教程很多，有很多有意思的小功能很有意思，大多數是代碼直接復制粘貼即可。應用上述模板也可以自己進行修改，或增加一些東西
一
補充一些小技巧，如果應用模板，看到哪個地方不滿意，可以F12查看源碼，點擊如下所示的小按鈕，選中想改的位置，就可以查看，修改對應的css代碼，調試好后，再到博客設置里的css代碼找到相應的位置修改即可，不過要有一點css的基礎
例如，我想該如上選中處的字體，選中后，發現font-size為16px，可以先在這修改不同大小
找到滿意的大小之后，到源代碼處，ctrl+f，查找上圖中.對應的entrylistPostSummary，找到后修改即可
二
博客園的美化很多問題其實有人提過了，並得到了解決，一些問題在這里搜索挺有用
https://group.cnblogs.com/ideas/
三
一些引用的外部代碼可以先保存下來，再上傳到這里
一來防止別人把代碼改動了，可能影響自己。二來提高響應速度
上傳文件后，點擊該文件，瀏覽器上顯示的url就是這個文件的鏈接，只要把原來的外部鏈接替換為這個就可以了
四
修改網頁上的titledocument.title='定義的字符串'
進而實現動態顯示
<script>
document.addEventListener('visibilitychange', function (){
if (document.visibilityState == 'hidden') {
normal_title=document.title;
document.title = '改變為……';
} else {
document.title=normal_title;
}
});
</script>
寫博客的工具
自己先后嘗試了很多工具
- 直接在博客園上寫，體驗不好
- 使用Open Live Writer，體驗也不好
- 小書匠，有網頁版和客戶端版，體驗還不錯，可以直接在這個上面發布博客
- 想學嗎，和小書匠相似
- 在有道雲筆記上寫完復制上去。圖片不好辦。
- typroa，也感覺不適合
- 用vs code中一個插件WriteCnblog，還可以，現在正在用這個，雖然也有一些bug。作者的博客和使用說明https://www.cnblogs.com/caipeiyu/p/11774968.html