Python BeautifulSoup 侧向导航树(1)

📌 相关文章

📜 Python BeautifulSoup 侧向导航树(1)

📅 最后修改于: 2023-12-03 15:04:04.277000 🧑 作者: Mango

Python BeautifulSoup 侧向导航树

Python BeautifulSoup 是一个非常常用的用于解析 HTML 和 XML 文件的 Python 库。在开发 Web 应用中，我们经常需要构建具有结构性的导航树以便梳理页面结构，方便用户浏览和导航。本文将介绍如何使用 Python BeautifulSoup 实现侧向导航树。

安装 Python BeautifulSoup

使用 pip 工具可以很轻松地安装 Python BeautifulSoup：

pip install beautifulsoup4

构建侧向导航树

首先，我们需要准备一个 HTML 页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧向导航树</title>
</head>
<body>
    <div class="page">
        <header>
            <h1>侧向导航树</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#section1">第一章</a></li>
                <li><a href="#section2">第二章</a></li>
                <li><a href="#section3">第三章</a></li>
            </ul>
        </nav>
        <main>
            <section id="section1">
                <h2>第一章</h2>
                <p>这是第一章的内容。</p>
            </section>
            <section id="section2">
                <h2>第二章</h2>
                <p>这是第二章的内容。</p>
            </section>
            <section id="section3">
                <h2>第三章</h2>
                <p>这是第三章的内容。</p>
            </section>
        </main>
    </div>
</body>
</html>

我们为页面添加了一个顶部的标题，一个左侧的导航栏和一个主要内容区域。导航栏包含了3个链接，对应了页面中的3个章节。

接下来我们使用 BeautifulSoup 解析 HTML 文件，并提取导航栏中的链接。

from bs4 import BeautifulSoup

# 读取 HTML 文件
with open('index.html') as f:
    soup = BeautifulSoup(f, 'html.parser')

# 提取导航栏链接
links = []
for link in soup.select('nav ul li a'):
    links.append({'title': link.text, 'href': link['href']})

print(links)

上面的代码中，我们使用 with open 语句读取了 HTML 文件，并且将其解析成了一个 BeautifulSoup 对象。接着，我们使用 soup.select 方法提取了导航栏中的所有链接。该方法返回的是一个列表，每个元素都是一个 a 标签对象。我们遍历这个列表，将每个链接的文本和目标 URL 存入一个字典中，最终将所有字典组成一个列表并打印出来。

输出结果为：

[{'title': '第一章', 'href': '#section1'},
 {'title': '第二章', 'href': '#section2'},
 {'title': '第三章', 'href': '#section3'}]

接下来，我们使用 Flask 框架构建 Web 应用，并编写一个简单的模板来展示导航栏。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    with open('index.html') as f:
        soup = BeautifulSoup(f, 'html.parser')

    links = []
    for link in soup.select('nav ul li a'):
        links.append({'title': link.text, 'href': link['href']})

    return render_template('index.html', links=links)

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们首先导入 Flask 和 render_template 函数。然后定义了一个 index 函数，用于渲染模板。该函数读取 HTML 文件并提取导航栏链接，最终将链接列表传给模板。最后，我们判断是否在主程序运行时执行，若是则启动 Flask 应用。

在模板文件 index.html 中，我们使用 Bootstrap4 中的导航栏和列表组件来展示导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧向导航树</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav flex-column">
                    {% for link in links %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ link.href }}">{{ link.title }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>

我们使用了 Bootstrap4 中的导航栏和列表组件，使得导航栏的样式看起来更加美观。同时，我们使用了 Jinja2 模板语法来遍历链接列表并生成 li 和 a 标签。

最终效果如下所示：

侧向导航树效果图

这种侧向导航树的展示方式比一般的顶部导航栏更加清晰明了，能够让用户更加直观地了解页面结构和内容。