【Flask 系统教程 4】Jinjia2模版和语法

Jinjia2 模板

模板的介绍

Jinja2 是一种现代的、设计优雅的模板引擎，它是 Python 的一部分，由 Armin Ronacher 开发。Jinja2 允许你在 HTML 文档中嵌入 Python 代码，以及使用变量、控制结构和过滤器来动态生成内容。它的语法简洁清晰，易于学习和使用。

模板的使用

from flask import Flask, render_template

app = Flask(__name__, template_folder="custom_templates")  


@app.route('/')
def index():
    return render_template('index.html')


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

template_folder指定模板文件夹 默认是同级目录的 templates

  • 在以上案例下的文件架构如下
project_folder/
│
├── flask_app.py
│
└── custom_templates/
    │
    └── index.html

模板传递参数

当我们需要通过传递参数来修改模板中的内容时，就可以通过模板传参来实现

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 定义要传递给模板的参数
    user = {'username': 'John', 'age': 30}
    fruits = ['Apple', 'Banana', 'Orange', 'Mango']
    return render_template('index.html', user=user, fruits=fruits)

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


<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Flask Template Example with Parameters</title>
</head>
<body>
    <h1>Hello, {{ user.username }}!</h1>
    <p>You are {{ user.age }} years old.</p>

    <h2>Favorite Fruits:</h2>
    <ul>
    {% for fruit in fruits %}
        <li>{{ fruit }}</li>
    {% endfor %}
    </ul>
</body>
</html>
  • 显示效果
    在这里插入图片描述

使用字典传参

对模板传参也支持使用字典的办法

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    # 定义要传递给模板的参数
    data = {
        'user': {'username': 'John', 'age': 30},
        'fruits': ['Apple', 'Banana', 'Orange', 'Mango']
    }
    return render_template('index.html', **data) # 这里使用**进行解包，这是Python3的特性


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

使用**解包传参，避免多参数的传参不便

模板中使用url_for函数

# app.py
from flask import Flask, render_template, url_for

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/hello')
def hello():
    return 'Hello, World!'

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


<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Flask Template Example with url_for()</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
    <p>This is a template example.</p>

    <p><a href="{{ url_for('hello') }}">Say Hello</a></p>
</body>
</html>

模板继承

继承允许你创建一个基础模板，并在其他模板中扩展它。

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

在父模板中定义 block代表可变对象，语法 {% block block_name %} {% endblock %}

<!-- index.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
    <h1>Hello, {{ name }}!</h1>
{% endblock %}

使用 extends 继承模板，使用 {% block block_name %}...{% endblock %}即可实现更改内容

include模板导入

在 Jinja2 模板中， include 指令允许你将一个模板导入到另一个模板中。这样可以使模板更具有模块化和可重用性，使代码更易于维护和管理。通过 include 指令，你可以将一个模板的内容嵌入到另一个模板中的任意位置。

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)
  • 定义 index.html作为主页
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>include</title>
</head>
<body>
<div class="container">
    {% include 'header.html' %}

    <h4>主题内容</h4>

    {% include 'footer.html' %}
</div>
</body>
</html>
  • 定义 header.html用来显示头部
<!-- header.html -->
<header>
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>
  • 定义 footer.html用来显示脚部
<!-- footer.html -->
<footer>
    <p>&copy; 2024 Flask Template Example. All rights reserved.</p>
</footer>
  • 效果
    在这里插入图片描述

使用静态资源

在 Web 开发中，静态资源（如样式表、JavaScript 文件、图像等）是构建用户界面和功能的重要组成部分。在 Flask 应用中，你可以使用静态资源来美化页面样式、增强交互性，并为用户提供更丰富的体验。下面是如何在 Flask 中使用静态资源的简单介绍：

组织静态资源文件夹

首先，你需要在 Flask 项目中创建一个文件夹来存放静态资源文件，通常命名为 static。在这个文件夹中，你可以按照你的项目结构组织样式表、JavaScript 文件、图像等静态文件。

your_flask_app/
│
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── img/
│       └── logo.png
│
├── templates/
│   └── index.html
│
└── app.py

使用静态资源

一旦你有了静态资源文件夹，你可以在模板中通过使用 url_for 函数来引用这些静态资源。例如，在模板中引用样式表文件 style.css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

在这个示例中，url_for('static', filename='path/to/resource') 函数用于生成静态资源的 URL。在调用时，第一个参数 'static' 是 Flask 中默认用于静态资源的端点，而第二个参数 'filename' 是静态资源的路径。

设置静态文件夹地址

from flask import Flask, render_template

app = Flask(__name__, static_folder="static2")  # 设置静态文件夹地址为 static2
# 第二种方式 app.static_folder = 'static2'

@app.route('/')
def index():
    return render_template('index.html')


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

Jinjia2 语法

Jinja2 是一种现代的、设计优雅的模板引擎，它为开发者提供了一种简单而强大的方式来创建动态内容。Jinja2 的语法清晰简洁，易于学习和使用。在这里，我将详细介绍 Jinja2 的主要语法元素：

定义变量

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Example</title>
</head>
<body>
    {% set title = "Title" %}

    {% with subtitle="subtitle" %}
        {% set combined_title = title + " " + subtitle %}

        <h1>{{ combined_title }}</h1>

        {% with paragraph="This is the paragraph content of my website." %}
            <p>{{ paragraph }}</p>
        {% endwith %}
    {% endwith %}

    <!--  此处出了with的范围则不可使用其中变量subtitle等  -->
</body>
</html>

with只在范围内可用， set则是全局， with和 set可以结合使用

插入变量

在 Jinja2 中，你可以使用双大括号 {{ ... }} 来插入变量。这些变量将在渲染模板时替换为实际的值。

<p>Hello, {{ name }}!</p>

流程控制

Jinja2 支持常见的控制结构，如条件语句和循环。控制结构使用 {% ... %} 包裹。

条件语句

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 假设这是从后端传递给前端的数据
    user = {'username': 'Alice', 'age': 30}
    return render_template('index.html', user=user)

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


<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>选择结构示例</title>
</head>
<body>
    <h1>欢迎访问我的网站！</h1>
    <p>用户信息：</p>
    <ul>
        <li>用户名：{{ user.username }}</li>
        <li>年龄：{{ user.age }}</li>
    </ul>

    {% if user.age < 18 %}
        <p>您未满18岁，属于未成年人。</p>
    {% elif user.age >= 18 and user.age < 60 %}
        <p>您已满18岁，属于成年人。</p>
    {% else %}
        <p>您已年满60岁，属于老年人。</p>
    {% endif %}
</body>
</html>
  • 效果
    在这里插入图片描述

循环

from flask import Flask, render_template

app = Flask(__name__)

# 假设这是你的数据
items = {
    "Apple": "Red",
    "Banana": "Yellow",
    "Orange": "Orange",
    "Grapes": "Purple"
}

@app.route('/')
def index():
    return render_template('index.html', items=items)

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Jinja2 Example</title>
</head>
<body>
    <h1>Fruit Colors</h1>
    <ul>
    {% for fruit, color in items.items() %}
        <li>{{ fruit }}: {{ color }}</li>
    {% endfor %}
    </ul>
</body>
</html>
  • 效果
    在这里插入图片描述

注释

你可以在模板中使用 {#...#}添加注释，这些注释不会在最终渲染的输出中显示。

{# This is a comment #}

过滤器

过滤器允许你在输出中应用转换。它们以管道符 | 的形式使用。

官方使用文档

<p>{{ sentence|capitalize }}</p>
过滤器描述示例用法
capitalize将变量的首字母转换为大写。{{ variable_name|capitalize }}
lower将变量转换为小写。{{ variable_name|lower }}
upper将变量转换为大写。{{ variable_name|upper }}
title将每个单词的首字母转换为大写。{{ variable_name|title }}
trim移除变量的首尾空格。{{ variable_name|trim }}
escape将 HTML 转义为安全的字符串。{{ variable_name|escape }}
safe标记变量为安全，告诉模板引擎不要转义该变量。{{ variable_name|safe }}
length返回变量的长度。{{ variable_name|length }}
default如果变量为 False、None 或空，使用默认值。 {{variable_name|default('default_value',boolean=True)}}
简单办法 {{ variable_name or "default_value" }}
urlencode对 URL 进行编码。{{ variable_name|urlencode }}
join使用指定字符将列表中的元素连接起来。{{ list_variable|join(', ') }}
slice从列表中取出一部分元素。{{ list_variable|slice(start, stop) }}
sort对列表进行排序。{{ list_variable|sort }}
reverse将列表倒序。{{ list_variable|reverse }}
dictsort对字典按键或值进行排序。{{ dict_variable|dictsort(attribute='key') }}
abs返回变量的绝对值。{{ variable_name|abs }}
round四舍五入到指定的小数位数。{{ variable_name|round(precision=2) }}
striptags删除字符串中所有的
HTML标签，如果出
现多个空格，将替换
成一个空格		{{ variable_name|striptags }}
replace字符串替换 {{ text |replace('old', 'new') }}

自定义过滤器

# app.py
from flask import Flask, render_template

app = Flask(__name__)


# @app.template_filter("reverse") # 注册自定义过滤器
def reverse_filter(s):  # 自定义过滤器函数
    return s[::-1]


app.jinja_env.filters['reverse'] = reverse_filter  # 注册自定义过滤器的第二种方法


# 路由
@app.route('/')
def index():
    # 在模板中使用自定义过滤器
    message = "Hello, World!"
    return render_template('index.html', message=message)


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

使用装饰器或者 app.jinja_env.filters都可以设置过滤器

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Filter Example</title>
</head>
<body>
<p>origin message: {{ message }}</p>
<p>Reversed message: {{ message | reverse }}</p>
</body>
</html>

定义宏

宏类似于函数，允许你定义可重用的代码块。

  • 宏没有返回值

在Python文件中定义宏

from flask import Flask, render_template

app = Flask(__name__)


# 定义一个简单的宏，用于在模板中显示消息
@app.template_global()
def display_message(message):
    return f"Message: {message}"


@app.route('/')
def index():
    return render_template('index.html', message="Hello, world!")


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

在 py文件中直接定义了宏方法，可在 html文件中直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Example</title>
</head>
<body>
    <!-- 使用宏显示消息 -->
    {{ display_message(message) }}
</body>
</html>

在html文件中定义宏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Example</title>
</head>
<body>
    <!-- 定义宏 -->
    {% macro display_message(message) %}
        <p>Message: {{ message }}</p>
    {% endmacro %}

    <!-- 使用宏 -->
    {{ display_message("Hello, world!") }}
</body>
</html>
  • 效果
    在这里插入图片描述

宏文件引用

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html', message="Hello, world!")


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


<!-- 引入宏文件并传递变量 -->
{% import 'macros/macros.html' as macros with context %}
<!--引入宏而不传递变量-->
{% import 'macros/macros.html' as macros %}


<!-- 另一种引入方式 -->
{% from 'macros/macros.html' import display %}

<!-- 使用宏并传参 -->
{{ macros.display_message(message) }}
<!-- 使用宏 -->
{{ display() }}
  • 在引入宏的时候，可以使用 with context来共享变量，意思是此时的宏中能直接使用当前环境下有的变量。
  • 注意文件架构
project_folder/
│
├── flask_app.py
│
└── macros/
    │
    └── macros.html

<!-- macros.html -->
{% macro display_message(content) %}
<p>Content: {{ content }}</p>
{% endmacro %}


{% macro display(content) %}
<p>Content: {{ message }}</p>
{% endmacro %}

变量过滤器

Jinja2 提供了一些内置的变量过滤器，用于对变量进行处理，例如格式化日期、字符串截断等。

{{ user.created_at|date("Y-m-d") }}

转义

在插入变量时，默认情况下 Jinja2 会自动转义 HTML 字符，以防止 XSS 攻击。但是，你也可以使用 safe 过滤器来禁用转义。

{{ unsafe_html|safe }}

过滤器链

你可以将多个过滤器串联在一起，以便在一个变量上应用多个转换。

{{ sentence|capitalize|truncate(50) }}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/589647.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

java发送请求2次开发-get请求json

java发送请求2次开发-get请求json

因为你请求参数不为空&#xff0c;接口都会把这个参数带上 所以借鉴HttpPost类 继承这个类&#xff0c; 这个类是可以带消息的 httpgetwithentity&#xff0c;httpget请求带上消息 复写 构造方法复制过来进行使用 二次开发类让其get请求时可以发送json
阅读更多...
IOS上线操作

IOS上线操作

1、拥有苹果开发者账号 2、配置证书&#xff0c;进入苹果开发者官网&#xff08;https://developer.apple.com/&#xff09; 3、点击账户&#xff08;account&#xff09;&#xff0c;然后创建一个唯一的标识符 4、点击"Identifiers"&#xff0c;然后点击"&qu…
阅读更多...
SpringBoot的ProblemDetails

SpringBoot的ProblemDetails

1.RFC 7807 之前的项目如果出现异常&#xff0c;默认跳转到error页面。或者是抛出500 异常。 但是对于前后端分离的项目&#xff0c;Java程序员不负责页面跳转&#xff0c;只需要 把错误信息交给前端程序员处理即可。而RFC 7807规范就是将异常 信息转为JSON格式的数据。这个…
阅读更多...
android init进程启动流程

android init进程启动流程

Android系统完整的启动流程 android 系统架构图 init进程的启动流程 init进程启动服务的顺序 bool Service::Start() {// Starting a service removes it from the disabled or reset state and// immediately takes it out of the restarting state if it was in there.flags_…
阅读更多...
每天五分钟深度学习框架pytorch：如何创建多维Tensor张量元素？

每天五分钟深度学习框架pytorch：如何创建多维Tensor张量元素？

本文重点 上节课程我们学习了如何创建Tensor标量，我们使用torch.tensor。本节课程我们学习如何创建Tensor向量，我们即可以使用torch.Tensor又可以使用torch.tensor，下面我们看一下二者的共同点和不同点。 Tensor张量 tensor张量是一个多维数组，零维就是一个点（就是上一…
阅读更多...
llama-factory/peft微调千问1.5-7b-chat

llama-factory/peft微调千问1.5-7b-chat

目标 使用COIG-CQIA数据集和通用sft数据集对qwen1.5-7b-chat进行sft微调，使用公开dpo数据集进行dpo对齐。学习千问的长度外推方法。 一、训练配置 使用Lora方式, 将lora改为full即可使用全量微调。 具体的参数在 该框架将各个参数、训练配置都封装好了，直接使用脚本，将数…
阅读更多...
毫米波雷达多人呼吸心跳检测MATLAB仿真

毫米波雷达多人呼吸心跳检测MATLAB仿真

本文基于TI的IWR1642毫米波雷达 2T4R MIMO阵列&#xff0c;通过实际采集数据算法仿真&#xff0c;实现多人呼吸心跳检测。 文章末尾给出了本文的仿真代码。 主要内容包含&#xff1a; &#xff08;1&#xff09;雷达参数设定 &#xff08;2&#xff09;ADC数据导入 &#xff08…
阅读更多...
Windows Server 安全策略配置

Windows Server 安全策略配置

前言 Windows Server是由微软开发的一种操作系统&#xff0c;主要用于在企业或机构的服务器上运行。它提供了一系列的功能和工具&#xff0c;旨在提高服务器的性能、可靠性、安全性和管理性。 特点 强大的性能&#xff1a;Windows Server具有高度优化的内核和资源管理&#x…
阅读更多...
【MySQL | 第十篇】重新认识MySQL索引匹配过程

【MySQL | 第十篇】重新认识MySQL索引匹配过程

文章目录 10.重新认识MySQL索引匹配过程10.1匹配规则10.2举例&#xff1a;联合索引遇到范围查询&#xff08;>、<、between、like&#xff09;10.2.1例子一&#xff1a;>10.2.2例子二&#xff1a;>10.2.3例子三&#xff1a;between10.2.4例子四&#xff1a;like 10…
阅读更多...
SQL数据库

SQL数据库

一.什么是数据库 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储。&#xff08;database 简称DB&#xff09; 数据库管理系统&#xff1a;管理数据库的大型软禁&#xff08;DataBase Management System 简称DBMS&#xff09; SQL&#xff1a;操作关系…
阅读更多...
Deep Learning Part Seven基于RNN生成文本--24.5.2

Deep Learning Part Seven基于RNN生成文本--24.5.2

不存在什么完美的文章&#xff0c;就好像没有完美的绝望。 ——村上春树《且听风吟》 本章所学的内容 0.引子 本章主要利用LSTM实现几个有趣的应用&#xff1a; 先剧透一下&#xff1a;是AI聊天软件&#xff08;现在做的ChatGPT&#xff08;聊天神器&#xff0c;水论文高手…
阅读更多...
Windows Server安装DHCP和DNS

Windows Server安装DHCP和DNS

前言 本期将教大家如何在Windows server上部署DHCP服务和DNS服务&#xff0c;用于模拟给内网主机分配IP地址。虽然用于演示的系统比较老&#xff0c;如果在新版本如Windows server2016、19、22上部署&#xff0c;操作基本一致。在此之前先给大家科普一波理论&#xff0c;需略过…
阅读更多...
【docker 】push 镜像到私服

【docker 】push 镜像到私服

查看镜像 docker images把这个hello-world 推送到私服 docker push hello-world:latest 报错了。不能推送。需要标记镜像 标记Docker镜像 docker tag hello-world:latest 192.168.2.1:5000/hello-world:latest 将Docker镜像推送到私服 docker push 192.168.2.1:5000/hello…
阅读更多...
Django数据库创建存储及管理

Django数据库创建存储及管理

一、什么是ORM Django的ORM(Object-Relational Mapping)是Django框架中一个非常重要的组件。ORM可以让开发者以面向对象的方式操作数据库,而不需要直接编写SQL语句。 具体来说,Django ORM提供了以下功能: 模型定义:开发者可以在Django应用中定义Python类来表示数据库表,这些…
阅读更多...
基于寄存器的STM32操作流程

基于寄存器的STM32操作流程

寄存器点灯 寄存器操作STM32的好处是不需要依靠外部文件&#xff0c;自由度更高&#xff0c;更为底层&#xff0c;但也更加繁杂。 通过寄存器点灯&#xff0c;需要按照电路结构与手册配置寄存器&#xff1a; 电路结构如下&#xff1a;可知需配置的GPIO为GPIOB5与GPIOE5。 在…
阅读更多...
Docker构建LNMP部署WordPress

Docker构建LNMP部署WordPress

前言 使用容器化技术如 Docker 可以极大地简化应用程序的部署和管理过程&#xff0c;本文将介绍如何利用 Docker 构建 LNMP 环境&#xff0c;并通过部署 WordPress 来展示这一过程。 目录 一、环境准备 1. 项目需求 2. 安装包下载 3. 服务器环境 4. 规划工作目录 5. 创…
阅读更多...
excel怎么删除条件格式规则但保留格式?

excel怎么删除条件格式规则但保留格式?

这个问题的意思就是要将设置的条件格式&#xff0c;转换成单元格格式。除了使用VBA代码将格式转换外&#xff0c;还可以用excel自己的功能来完成这个任务。 一、将条件格式“留下来” 1.设置条件格式 选中数据&#xff0c;点击开始选项卡&#xff0c;设置条件格式&#xff0…
阅读更多...
2024年 Java 面试八股文——SpringMVC篇

2024年 Java 面试八股文——SpringMVC篇

目录 1.简单介绍下你对springMVC的理解? 2.说一说SpringMVC的重要组件及其作用 3.SpringMVC的工作原理或流程 4.SpringMVC的优点 5.SpringMVC常用注解 6.SpringMVC和struts2的区别 7.怎么实现SpringMVC拦截器 8.SpringMvc的控制器是不是单例模式&#xff1f;如果是&am…
阅读更多...
XUbuntu24.04之更换国内高速源(二百二十八)

XUbuntu24.04之更换国内高速源(二百二十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
无人机+飞行汽车：低空经济新引擎，有望爆发式增长

无人机+飞行汽车：低空经济新引擎，有望爆发式增长

无人机和飞行汽车作为低空经济的新引擎&#xff0c;正在引领一场全新的交通革命。随着技术的不断进步和政策的支持&#xff0c;低空经济有望成为未来经济发展的重要领域&#xff0c;实现爆发式增长。 首先&#xff0c;无人机和飞行汽车具有独特的优势和应用场景。无人机可以在…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站