利用JS生成博文目录及CSS定制博客-前端开发

下面是“利用JS生成博文目录及CSS定制博客”的完整攻略：

下面是“利用JS生成博文目录及CSS定制博客”的完整攻略：

1. 生成博文目录

1.1 实现原理

利用JS生成博文目录的原理是通过JS获取博客文章的标题、对应的dom节点和锚点，然后利用DOM操作动态生成目录并插入到博客页面的特定位置。

1.2 示例代码

以下是一个简单的JS生成目录的示例代码，实现了获取所有标题，创建目录结构并添加到页面对应位置的功能。

// 获取所有文章标题元素
const h2List = document.querySelectorAll('h2')

// 创建目录列表元素
const ul = document.createElement('ul')

// 遍历所有标题并创建对应目录项链接
for (let i = 0; i < h2List.length; i++) {
  const h2 = h2List[i]
  const li = document.createElement('li')
  const a = document.createElement('a')
  const text = document.createTextNode(h2.innerText)

  a.appendChild(text)
  a.href = `#title${i}`
  li.appendChild(a)
  ul.appendChild(li)

  h2.id = `title${i}`
}

// 添加目录列表到页面特定位置
const nav = document.querySelector('.nav') // 导航栏容器元素
const div = document.createElement('div')
div.classList = 'blog-toc'

const title = document.createElement('h3')
title.innerText = '文章目录'
div.appendChild(title)
div.appendChild(ul)

nav.prepend(div)

1.3 注意事项

对于异步加载页面内容的博客，需要等页面内容加载完成后再运行JS生成目录。
为了避免目录占用页面过多空间，建议设置目录的固定高度并添加滚动条功能。
目录链接需要与文章标题的锚点对应，否则点击目录链接无法跳转到目标位置。

2. CSS定制博客

2.1 实现原理

利用CSS定制博客的原理是通过修改博客页面中各元素的样式，实现美化博客的效果。

2.2 示例代码

以下是一个简单的CSS定制博客的示例代码，实现了修改标题字体、调整图片大小、添加背景图和调整导航栏样式的功能。

/* 修改标题字体 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 调整图片大小 */
img {
  max-width: 100%;
  height: auto;
}

/* 添加背景图 */
body {
  background-image: url(bg.jpg);
  background-size: cover;
}

/* 调整导航栏样式 */
.nav {
  background-color: #fff;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
}

.nav a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
}

.nav a:hover {
  background-color: #e5e5e5;
}