1.JS代码
想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的。
拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了。要注意目录的生成是几级标题,这一点可是很重要的。JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意。
综合来说,这个目录有以下几点的特点,这些也都可以在本文中看到(二级目录本博文没有使用)。
1).
可以在博文首部生成两级目录
2).
每个一级目录上方有一个回到顶部的链接
JS代码如下。
<script
language="javascript"
type="text/javascript">
//
生成两级目录索引列表
function
GenerateContentList()
{
var
mainContent
=
$('#cnblogs_post_body')
var
h2_list
=
$('#cnblogs_post_body
h2')//如果你的章节标题不是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.
一级标题CSS格式
我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景,觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景,图片和CSS的说明如下。
#cnblogs_post_body
h2
{
background-repeat:
no-repeat
background-image:
url('http://xxxx')
}
以上就是本文的详细内容,希望对大家的学习有所帮助。
JavaScript作为网站前端的核心知识是非常重要的,但是如何学习JavaScript是很多初学者面对的一个难题,下面我说一下个人对于如何学习JavaScript的一点心得,希望能帮到大家。
1、首先学习基础,尤其是JavaScript与其他语言不同的基础知识。
学习每个编程语言可能都要从基础的变量函数结构等学起,JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方,这些东西是尤其需要我们注意的,比如说自调函数、比如说变量值为空不是null而是undefined的等,这些东西都是和主流的编程的语言如c++、java等是有区别的,所以想要学好JavaScript,这些基础的知识一定要把握好学习好才行。
2、关于学习JavaScript的进阶
JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西,这些东西都是深入学习JavaScript的难点,简单的说一下JavaScript是基于对象的浏览器脚本语言,但是为了使JavaScript也能够支持面向对象编程,人们就使用了很多的方法来模拟面向对象的的特点,这些就变成了JavaScript的一些难点,比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等,这些东西都是和其他支持面向对象的语言是不同的,所以就导致了一些难点。关于进阶学习JavaScript,还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文,这些东西都是JavaScript比较深入的知识、
最后说明,JavaScript作为前端的核心语言绝对没有没有想象的那么简单,要想学好JavaScript除了以上提到的知识和注意点,还需要的就是多动手和实践,我们都知道网页上的所有特效都是借助JavaScript来实现,那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效,当然学习使用jQuery等JavaScript类库进行开发也十分的重要,但是这绝对不能是取代我们学习JavaScript的方法。
来看看js代码的用法。
我们在使用JavaScript代码有两种写法:一种是在HTML页面中直接嵌入js代码,另一种是通过链接外部的JavaScript文件。
我们先来看第一种用法:在HTML页面中直接嵌入js代码
如果在HTML页面中直接嵌入JavaScript代码,我们需要使用 <script>标签,<script>和 </script>会告诉 JavaScript 在何处开始和结束。
<script>和 </script>之间的代码行包含了 JavaScript:
<script>
alert("My First JavaScript")
</script>
在HTML页面的任何位置(head部分 body部分 body的后面 较好)都可以插入script标签。
你有可能会在 <script>标签中看到使用 type="text/javascript",但是现在已经不必这样做了。JavaScript现在已经是所有现代浏览器以及 HTML5 中的默认脚本语言。
我们来看一个具体的示例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("<h1>This is a heading</h1>")
document.write("<p>This is a paragraph</p>")
</script>
</body>
</html>
上述代码就是在在HTML页面中直接嵌入js代码。
接着我们来看看js代码的第二种用法:通过链接外部的JavaScript文件。
有时JavaScript代码过多的话,我们可以将代码单独放在JavaScript文件中然后链接起来。
我们链接外部JavaScript文件可以有以下步骤
1、首先我们建立一个JavaScript文件,扩展名是.js
2、然后将要编写的js代码写到Js文件中,并保存文件。
3、使用script标签将JavaScript文件链接到HTML文件中
<script type="text/javascript" src="JavaScript文件名和路径"></script>
需要注意一点的是,在一个已经引入外部js文件的script标签中,不能在它的开始标签和结束标签中写Js命令了。
我们来看一个具体的示例
我们先建一个js文件sample.js
然后写入js代码
document.write("<p>This is a paragraph</p>")
最后使用script标签将JavaScript文件链接到HTML文件中
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="sample.js"></script>
</body>
</html>
以上就是js代码使用的两种方法