正文

从零开始：用Flask框架轻松搭建个性化简历网站教程

/0 浏览量
0514

引言

在这个数字化时代，一个精美的在线简历网站不仅能展示你的专业技能，还能展现你的个人风格。Flask是一个轻量级的Web应用框架，非常适合初学者快速搭建网站。本文将带你从零开始，使用Flask框架搭建一个个性化的简历网站。

准备工作

在开始之前，请确保你的电脑上已安装以下软件：

  • Python 3.x
  • Flask
  • 一个代码编辑器（如Visual Studio Code、Sublime Text等）

第一步：创建项目结构

首先，创建一个名为resume_site的新目录，用于存放项目文件。然后，在resume_site目录下创建以下文件和文件夹：

resume_site/
│
├── app.py        # Flask应用主文件
├── templates/    # HTML模板文件
│   └── base.html  # 基础模板
│   └── index.html  # 首页模板
│   └── resume.html # 简历模板
│
└── static/       # 静态文件（如CSS、JavaScript、图片等）

第二步：安装Flask

在终端中，进入resume_site目录，并运行以下命令安装Flask：

pip install flask

第三步：编写Flask应用

在app.py文件中，编写以下代码：

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

这段代码创建了一个名为app的Flask实例，并定义了两个路由：/（首页）和/resume（简历页）。当访问这些路由时，Flask将渲染相应的HTML模板。

第四步：编写HTML模板

在templates目录下，创建base.html、index.html和resume.html文件，并编写以下代码：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>{{ title }}</h1>
    </header>
    <main>
        {% block content %}
        {% endblock %}
    </main>
    <footer>
        <p>版权所有 &copy; 2021</p>
    </footer>
</body>
</html>

index.html

{% extends "base.html" %}

{% block content %}
<h2>欢迎来到我的简历网站</h2>
<p>这里将展示我的个人简历和项目经验。</p>
{% endblock %}

resume.html

{% extends "base.html" %}

{% block content %}
<h2>个人简历</h2>
<p>姓名：张三</p>
<p>年龄：25岁</p>
<p>职业：前端开发工程师</p>
<p>技能：HTML、CSS、JavaScript、React、Vue等</p>
{% endblock %}

第五步：添加CSS样式

在static目录下创建style.css文件，并编写以下代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

第六步：运行Flask应用

在终端中，进入resume_site目录，并运行以下命令启动Flask应用：

python app.py

然后，在浏览器中访问http://127.0.0.1:5000/，你应该能看到一个简单的简历网站。

总结

通过本文的教程，你已经成功使用Flask框架搭建了一个个性化的简历网站。你可以根据自己的需求，进一步丰富网站内容和样式。希望这篇文章对你有所帮助！

-- 展开阅读全文 --