前言
簡單的講訴下如何添加最近游客，以及如何設(shè)置它到頁面想要的位置，和一些樣式修改。其實這個功能不是特別重要，實現(xiàn)起來也不是很困難，步驟很少，一下就能部署成功。
準(zhǔn)備
其實這個代碼很就簡單，需要增加代碼的如下：
<ul
class="ds-recent-visitors"
data-num-items="26" data-avatar-size="42" >
</ul>
講解一下最后兩個參數(shù)
data-num-items="26" //代表顯示訪客人數(shù)，建議為26，大家可以自行更改，因為我根據(jù)我設(shè)置的頭像大小發(fā)現(xiàn)在我筆記本上設(shè)置為26剛好是兩排，但在大點的屏幕上的話，就是1排半多點的樣子，不到兩排反正。
data-avatar-size="42" //這個就是設(shè)置頭像大小了
添加位置
文章模版結(jié)尾處添加
這個位置確實可以自己想添加到哪，一般人可能會在文章末尾添加這一段，那么為了避免重復(fù)操作，大家可以在生成page的模版文件里在末尾自動加上這段代碼。
我的對應(yīng)文件路徑如下D:\hexo\blog\scaffolds\page.md
完整修改后如下：
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---
### 最近訪客
<ul class="ds-recent-visitors" data-num-items="26" data-avatar-size="42" ></ul>
修改樣式
發(fā)現(xiàn)樣式問題
現(xiàn)在可以在本地測試看看，已經(jīng)有了效果了，但是頭像是豎著排的，因為ds-recent-visitors .ds-avatar {
display: inline;}。
解決思路
我試著去改了下display的屬性，用了重寫覆蓋的方法，但是重新加載后發(fā)現(xiàn)，我重寫的樣式?jīng)]有覆蓋掉原先的，那就應(yīng)該是我重寫的樣式優(yōu)先級沒有它引入的高，可能引入的樣式在我重寫之后，所以我被覆蓋掉了。
那現(xiàn)在我又懶得去看源碼分析CSS加載的先手順序，所以有了一個網(wǎng)上流傳的改法。
具體解決
通過設(shè)置float: left屬性來解決是可行的，因為原先的CSS里沒有設(shè)置這個值，所以重寫有效。
具體代碼如下：
添加路徑D:\hexo\blog\themes\next\source\css_custom\custom.styl
#ds-recent-visitors .ds-avatar {
float: left;
}
樣式問題
設(shè)置了又有點樣式問題
如圖：
這個問題只有在文章最下面設(shè)置了一些懸賞或一些自定義話的時候才會出現(xiàn)這種問題，如果都沒有設(shè)置的話，可能會出現(xiàn)你對文章創(chuàng)建的標(biāo)簽比如#hexo也在浮動。
解決方法
具體原理我就不多說了，直接放上解決方法：
添加一個這個樣式到
D:\hexo\blog\themes\next\source\css_custom\custom.styl
#ds-recent-visitors {
width: 100%;
height: 100px;
padding-inline-start: 0px;
}
其實width可以不要，主要是給個高度，把ul這個容器撐起來，才能把后面的擠下去，ul標(biāo)簽是個塊級元素，之所以加個是為了調(diào)成了樣式方便，最后一個padding-inline-start: 0px;是為了重寫padding-inline-start: 40px;這個CSS，因為瀏覽器會自動給ul加這個默認(rèn)樣式，我這里就改為0了，為了布局美觀。
End
到這里樣式基本修改完畢了。有問題歡迎下方評論交流。
