个人中心页

个人中心分为左右两栏，左边是个人信息与操作目录，右边是对应的内容展示。

点击左边的操作目录，会触发对应不同的 html 子页面。

个人中心静态页面

个人中心页面的前端页面为 account/index.html ，然后根据首页会延伸出很多个子页面。

创建个人中心页 account/index.html ，并在 forum 目录下创建视图函数存储的 py 文件 views/index.py

@index_bp.get('/account/index.html')
def account_view():
    return render_template('account/index.html')

新建 /static/css/account.css、/static/js/account.js 用来编写个人中心的样式与逻辑。

然后编写 account/index.html 文件内容，并添加视图函数进行返回

account/index.html

{% extends 'base.html' %}

{% block header_script %}
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    {#首页内容样式#}
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">

    <link rel="stylesheet" href="/static/css/account.css">
    <link rel="stylesheet" href="/static/css/article.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/account.js"></script>
{% endblock %}

{% block header %}
    <a href="/" class="logo">
        正心全栈论坛
    </a>

    <!--登录注册栏-->
    <div class="login">
        <a href="javascript:;" class="login_btn">登录</a> /
        <a href="javascript:;" class="register_btn">注册</a>
    </div>
    <!-- 用户登录后显示下面 -->
    <div class="login" style="display: none">
        <img src="/static/images/person01.png" class="login-pic" alt="">
        <a href="#">用户张三</a>
        <a href="#">退出</a>
    </div>
{% endblock %}

{% block main %}
    <div class="account_left">
        <div class="user_avatar">
            <img src="/static/images/user_pic.png" alt="用户图片">
        </div>
        <div class="user_name">用户李思</div>

        <!--个人信息操作列表-->
        <ul class="option_list">
            <li class="active"><a href="/account/re_info.html">基本资料</a></li>
            <li><a href="/account/re_password.html">密码修改</a></li>
            <li><a href="/account/re_avatar.html">头像设置</a></li>
            <li><a href="/account/my_followed.html">我的关注</a></li>
            <li><a href="/account/my_collected.html">我的收藏</a></li>
            <li><a href="/account/article_release.html">文章发布</a></li>
            <li><a href="/account/article_list.html">文章列表</a></li>
        </ul>

    </div>

    <div class="account_right">
        {% block right_container %}
            <h3>个人中心</h3>
        {% endblock %}
    </div>

{% endblock %}

{% block footer %}
    <div class="footer-links">
        <a href="">关于我们</a>
        <span>|</span>
        <a href="">联系我们</a>
        <span>|</span>
        <a href="">招聘人才</a>
        <span>|</span>
        <a href="">友情链接</a>
    </div>
    <p class="copyright">
        CopyRight © 2024 正心全栈编程 All Rights Reserved
    </p>
    <p class="copyright"> 电话：010-****888 湘 ICP 备*******8号</p>
{% endblock %}

{% block footer_script %}

{% endblock %}

account.css

body {
  background: #eff1f5;
  font-family: "Microsoft YaHei", serif;
}

.account_left {
  width: 320px;
  min-height: 600px;
  background: #fff;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid #ececee;
}

.account_left .user_avatar {
  width: 198px;
  height: 198px;
  margin: 20px auto;
}

.account_left .user_avatar img {
  width: 198px;
  height: 198px;
  border-radius: 99px;
}

.account_left .user_name {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

.option_list {
  width: 268px;
  margin: 20px auto 0;
}

.option_list a {
  text-align: center;
  display: block;
  list-style: node;
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 14px;
  border-radius: 5px;
  padding: 0 5px;
}

.option_list a:hover {
  background-color: #f5f5f5;
}

.option_list .active a {
  color: #16baaa;
  background-color: #f5f5f5;
}

.account_right {
  padding: 20px;
  margin: 5px;
  width: 100%;
  border: 1px solid #ececee;
  background: #fff;
}

.user_pic {
  /*用户头像修改*/
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

/*我的关注*/
.my_followed {
  display: flex;
  width: 100%;
  height: 100px;
  border-radius: 4px;
  margin-top: 20px;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.author_card {
  display: flex;
  border-radius: 5px;
  flex-direction: column;
  justify-content: space-around;
  width: calc(50% - 20px);
  box-sizing: border-box;
  border: 1px solid #ececee;
  padding: 10px;
}

.author_card .author_pic img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.author_card .author_name {
  color: #333;
  font-size: 22px;
  line-height: 60px;
  margin-left: 16px;
}

.author_card .author_name:hover {
  color: #1482f0;
}

.author_card .author_resume {
  width: 100%;
  font-size: 13px;
  color: #666;
  margin-top: 10px;
}

.author_card .writings,
.author_card .follows {
  float: left;
  margin: 20px 30px 0 0;
}

.author_card .writings span,
.author_card .follows span {
  display: block;
  font-size: 12px;
  color: #999;
}

.author_card .writings b,
.author_card .follows b {
  display: block;
  font-weight: normal;
  font-size: 18px;
  color: #333;
}

.focused {
  margin-top: 20px;
}

.release_form {
  margin-top: 20px;
}

.account_right h3 {
  margin-bottom: 20px;
}

点击左侧内容之后，页面会进行跳转，并且需要高亮选中的选项

/static/js/account.js

layui.use(function () {
  let $ = layui.$;

  $(".option_list li").addClass("active").siblings().removeClass("active");
  let path = location.pathname;
  $(`a[href="${path}"]`).parent("li").addClass("active");
});