利用JS生成博文目錄及CSS定制博客
本文實(shí)例為大家介紹了利用JS生成博文目錄及CSS定制博客的方法,分享給大家供大家參考,具體內(nèi)容如下
1.JS代碼
想要生成目錄,許多都說需要JS修改權(quán)限,那個(gè)這里就直接進(jìn)入設(shè)置頁面,找到下方的聯(lián)系郵箱直接發(fā)去就行了,工作人員回復(fù)的還是很快的。
拿到權(quán)限之后,下面就是將編(搜)寫(尋)的JS代碼放在頁腳HTML代碼的方框內(nèi),然后點(diǎn)擊保存就可以了。要注意目錄的生成是幾級標(biāo)題,這一點(diǎn)可是很重要的。JS代碼如下,基本沒有變化,拷貝了原作者的寫法,可以生成二級目錄,分別為h2和h3,這點(diǎn)需要注意。
綜合來說,這個(gè)目錄有以下幾點(diǎn)的特點(diǎn),這些也都可以在本文中看到(二級目錄本博文沒有使用)。
1). 可以在博文首部生成兩級目錄
2). 每個(gè)一級目錄上方有一個(gè)回到頂部的鏈接
JS代碼如下。
<script language="javascript" type="text/javascript">
// 生成兩級目錄索引列表
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2'); //如果你的章節(jié)標(biāo)題不是h2,只需要將這里的h2換掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目錄</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>
2. 一級標(biāo)題CSS格式
我在觀察zzq同學(xué)的一些博文里面的一級標(biāo)題有一個(gè)淺灰色的背景,覺得添加之后看起來很不錯(cuò)。在這里就借用一下該圖片作為一級標(biāo)題的背景,圖片和CSS的說明如下。
#cnblogs_post_body h2 {
background-repeat: no-repeat;
background-image: url('http://xxxx');
}
以上就是本文的詳細(xì)內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
- node.js實(shí)現(xiàn)博客小爬蟲的實(shí)例代碼
- js 博客內(nèi)容進(jìn)度插件詳解
- 用js實(shí)現(xiàn)博客打賞功能
- JS實(shí)現(xiàn)新浪博客左側(cè)的Blog管理菜單效果代碼
- 基于jsp+servlet實(shí)現(xiàn)的簡單博客系統(tǒng)實(shí)例(附源碼)
- javascript實(shí)現(xiàn)博客園頁面右下角返回頂部按鈕
- js使用ajax讀博客rss示例
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實(shí)現(xiàn)方法(js+jquery等)
- 用js實(shí)現(xiàn)的仿sohu博客更換頁面風(fēng)格(簡單版)
- nodejs個(gè)人博客開發(fā)第七步?后臺登陸
相關(guān)文章
jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解)
下面小編就為大家分享一篇jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
這篇文章主要介紹了javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加,需要的朋友可以參考下2014-09-09
使用JS實(shí)現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實(shí)現(xiàn)縮小功能
這篇文章主要介紹了使用JS實(shí)現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實(shí)現(xiàn)縮小功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
javascript讀取Xml文件做一個(gè)二級聯(lián)動菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級聯(lián)動菜單,需要的朋友可以參考下2014-03-03
javascript解析json格式的數(shù)據(jù)方法詳解
這篇文章主要介紹了javascript解析json格式的數(shù)據(jù)方法詳解,文章通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js原生實(shí)現(xiàn)FastClick事件的實(shí)例
下面小編就為大家?guī)硪黄猨s原生實(shí)現(xiàn)FastClick事件的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11

