多說插件最近訪客樣式問題和解決方法

前言

簡單的講訴下如何添加最近游客，以及如何設置它到頁面想要的位置，和一些樣式修改。其實這個功能不是特別重要，實現(xiàn)起來也不是很困難，步驟很少，一下就能部署成功。

準備

其實這個代碼很就簡單，需要增加代碼的如下：

<ul
class="ds-recent-visitors" 
data-num-items="26" data-avatar-size="42" >
</ul> 

講解一下最后兩個參數(shù)

data-num-items="26" //代表顯示訪客人數(shù)，建議為26，大家可以自行更改，因為我根據(jù)我設置的頭像大小發(fā)現(xiàn)在我筆記本上設置為26剛好是兩排，但在大點的屏幕上的話，就是1排半多點的樣子，不到兩排反正。
data-avatar-size="42" //這個就是設置頭像大小了

添加位置

文章模版結尾處添加

這個位置確實可以自己想添加到哪，一般人可能會在文章末尾添加這一段，那么為了避免重復操作，大家可以在生成page的模版文件里在末尾自動加上這段代碼。

我的對應文件路徑如下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ōu)先級沒有它引入的高，可能引入的樣式在我重寫之后，所以我被覆蓋掉了。 那現(xiàn)在我又懶得去看源碼分析CSS加載的先手順序，所以有了一個網(wǎng)上流傳的改法。

具體解決

通過設置float: left屬性來解決是可行的，因為原先的CSS里沒有設置這個值，所以重寫有效。 具體代碼如下：

添加路徑D:\hexo\blog\themes\next\source\css_custom\custom.styl

#ds-recent-visitors .ds-avatar {
float: left;
}

### 樣式問題
設置了又有點樣式問題
如圖：

這個問題只有在文章最下面設置了一些懸賞或一些自定義話的時候才會出現(xiàn)這種問題，如果都沒有設置的話，可能會出現(xiàn)你對文章創(chuàng)建的標簽比如#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標簽是個塊級元素，之所以加個是為了調(diào)成了樣式方便，最后一個padding-inline-start: 0px;是為了重寫padding-inline-start: 40px;這個CSS，因為瀏覽器會自動給ul加這個默認樣式，我這里就改為0了，為了布局美觀。

End

到這里樣式基本修改完畢了。有問題歡迎下方評論交流。