如何DIY有個性的部落格園主題(一)

2022-05-06 11:42:12 字數 1199 閱讀 3428

看到很多人的用了自己的主題,很是羨慕,但是又不想用跟別人一樣的主題,就想著能不能diy的主題呢?

已知如下幾個條件:

那是否可以通過js來修改原本的樣式呢?

前置條件

實驗首先嘗試利用js修改的頂端導航欄的css屬性display為none來隱藏自帶的頂端導航欄。

但是js獲取dom元素太麻煩了。如果有jquery就好了。如果本身已經引入了jquery,我就可以使用jquery來操作頁面元素了。

引入jquery了嗎?

進入。f12開啟瀏覽器開發者工具,檢視網頁原始碼。發現如下:

的原始碼中已經引入了jquery。看來可以直接使用jquery來控制頁面元素了。

在側邊欄裡寫的js**能對側邊欄以外的頁面元素生效嗎?

首先f12開啟瀏覽器開發者工具,尋找自帶的導航欄元素

找到了頂部導航欄元素,對應的頁面部分是包含頭像和搜尋框的部分

在後台編輯側邊欄**,使用jquery隱藏頂部導航欄

儲存後回到前台檢視效果

可以看到頂部導航欄被隱藏了。

對於自己想要替代的元件,利用jquery將其隱藏。之後利用jquery直接生成頁面元素,新元素的內容利用jquery從對應的元素中獲取。

而樣式檔案決定使用bootstrap框架的樣式進行控制。

首先引入bootstrap4框架,這部分需要放在最前方

然後利用id獲取原本導航欄的jquery物件,並將其隱藏

使用jquery按序建立自己需要的元件

使用迴圈獲取原本導航欄的內容和鏈結

在迴圈中加入篩選,只新增自己想要的內容

按父子順序插入元素

**

如何DIY有個性的部落格園主題(二)

經濟學上有個很有趣的說法,狄德羅效應。18世紀法國有個哲學家叫丹尼斯 狄德羅。有一天,朋友送他一件質地精良 做工考究的睡袍,狄德羅非常喜歡。可他穿著華貴的睡袍在書房走來走去時,總覺得身邊的一切都是那麼的不協調 家具破舊不堪,而且風格也不對,地毯的針腳也粗得嚇人。於是為了與睡袍配套,他把舊的東西先後更...

我的部落格園主題

首先,感謝gshang 這位大佬。我的主題原型就是他做的bili2.0 主題,個人很喜歡。在這個主題的基礎上,我進行了一些修改,得到了現在的主題。我的主題 並不打算發不出來,主要有以下兩個原因。我是根據個人喜好進行的修改,它不一定可以滿足你。未得到原作者允許,將基於bili2.0修改的主題共享出來不...

部落格園個性化樣式設定(一)

這只是上半部分,下半部分傳送門 1 進入的設定介面 2 進入 部落格側邊欄 點選 申請js許可權 3 編寫申請內容 順便提供例子 1 尊敬的管理員 請問是否可以幫我開通js許可權,我想對文章的樣式和布局需要js 進行調整外觀。謝謝您的幫助。2 尊敬的管理員 您好,我希望用js美化下我的部落格頁面,麻...