多說(shuō)插件最近訪客樣式問(wèn)題和解決方法

前言

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

準(zhǔn)備

其實(shí)這個(gè)代碼很就簡(jiǎn)單，需要增加代碼的如下：

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

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

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

添加位置

文章模版結(jié)尾處添加

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

我的對(duì)應(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)樣式問(wèn)題

現(xiàn)在可以在本地測(cè)試看看，已經(jīng)有了效果了，但是頭像是豎著排的，因?yàn)閐s-recent-visitors .ds-avatar { display: inline;}。

解決思路

我試著去改了下display的屬性，用了重寫覆蓋的方法，但是重新加載后發(fā)現(xiàn)，我重寫的樣式?jīng)]有覆蓋掉原先的，那就應(yīng)該是我重寫的樣式優(yōu)先級(jí)沒(méi)有它引入的高，可能引入的樣式在我重寫之后，所以我被覆蓋掉了。 那現(xiàn)在我又懶得去看源碼分析CSS加載的先手順序，所以有了一個(gè)網(wǎng)上流傳的改法。

具體解決

通過(guò)設(shè)置float: left屬性來(lái)解決是可行的，因?yàn)樵鹊腃SS里沒(méi)有設(shè)置這個(gè)值，所以重寫有效。 具體代碼如下：

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

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

### 樣式問(wèn)題
設(shè)置了又有點(diǎn)樣式問(wèn)題
如圖：

這個(gè)問(wèn)題只有在文章最下面設(shè)置了一些懸賞或一些自定義話的時(shí)候才會(huì)出現(xiàn)這種問(wèn)題，如果都沒(méi)有設(shè)置的話，可能會(huì)出現(xiàn)你對(duì)文章創(chuàng)建的標(biāo)簽比如#hexo也在浮動(dòng)。

解決方法

具體原理我就不多說(shuō)了，直接放上解決方法： 添加一個(gè)這個(gè)樣式到

D:\hexo\blog\themes\next\source\css_custom\custom.styl

#ds-recent-visitors {
    width: 100%;
    height: 100px;
    padding-inline-start: 0px;
}

其實(shí)width可以不要，主要是給個(gè)高度，把ul這個(gè)容器撐起來(lái)，才能把后面的擠下去，ul標(biāo)簽是個(gè)塊級(jí)元素，之所以加個(gè)是為了調(diào)成了樣式方便，最后一個(gè)padding-inline-start: 0px;是為了重寫padding-inline-start: 40px;這個(gè)CSS，因?yàn)闉g覽器會(huì)自動(dòng)給ul加這個(gè)默認(rèn)樣式，我這里就改為0了，為了布局美觀。

End

到這里樣式基本修改完畢了。有問(wèn)題歡迎下方評(píng)論交流。