搭建个人博客--1、前端页面

背着吉他去流浪2024-10-09 10:25

采用bootstrap前端框架：

Anchor - a free Bootstrap UI Kit综合使用bootstrap框架做一个Aotm Blog个人博客_基于bootstrap的博客-CSDN博客

做出模板base.html

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <link rel="apple-touch-icon" sizes="76x76" href="{% static 'assets/img/favicon.ico' %}">
    <link rel="icon" type="image/png" href="{% static 'assets/img/favicon.ico' %}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
        
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">
        
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        
    <!-- Main CSS -->
    <link href="{% static 'assets/css/main.css' %}" rel="stylesheet"/>
        
    <!-- Animation CSS -->
    <link href="{% static 'assets/css/vendor/aos.css' %}" rel="stylesheet"/>

    <style>
        /* 左右菜单内边距40 */
        .element {  
            padding: 40px; 
        }
    </style>
    {% block css %}{% endblock %}
    
    
    
</head>


<body style="background-color: red;">
<!-- 博客导航 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4" >
    <div class="container">
        <a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>首页</strong> Kit</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown-1">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Design</a><a class="dropdown-item" href="#">Development</a><a class="dropdown-item" href="#">Marketing</a>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Examples </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="./landing.html">Home Landing</a>
                        <a class="dropdown-item" href="./login.html">User Login</a>
                        <a class="dropdown-item" href="./blog.html">Blog Index</a>
                        <a class="dropdown-item" href="./page.html">Sample Page</a>
                    </div>
                </li>
                
                <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-facebook"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-github"></i></a></li>
            </ul>
        </div>
    </div>
</nav>


<!--body身体部分：左菜单+右内容-->
<div class="row border-bottom border-dark" style="background-color: red">
    <!--左菜单-->
    <div class="col-lg-2 element" style="background-color: lightblue" >
        <h5 class="font-weight-bold">
            博客分类
        </h5>
        <!--垂直菜单-->
        <div class="border-top-color">
            <ul class="list-unstyled pt-2">
                <li class="pl-2 pb-2 xinqing">
                    <a href="#" class="nav-text">心情记录</a>
                </li>
                <li class="pl-2 pb-2 xuexi">
                    <a href="#" class="nav-text">学习笔记</a>
                </li>
                <li class="pl-2 pb-2  lvxing">
                    <a href="#" class="nav-text">旅行相册</a>
                </li>
                <li class="pl-2 pb-2 meishi">
                    <a href="#" class="nav-text">美食打卡</a>
                </li>
            </ul>
        </div>
        <h5 class="font-weight-bold">
            关于博主
        </h5>     
        <!--博主信息-->
        <div class="border-top-color pt-2">
            <img src="{% static 'assets/img/demo/coffee.png' %}"  class="rounded-circle w-25" />
            <ul class="list-unstyled pt-2">
                <li class="pl-2 pb-2 ">博主：迪迦
                    <a class="nav-text" href="#">
                        <abbr title="个人信息编辑"><span class="iconfont icon-bianji1"></span></abbr>
                    </a>
                </li>
                <li class="pl-2 pb-2 ">出生日期：未知</li>
                <li class="pl-2 pb-2 ">星座：水瓶座</li>
                <li class="pl-2 pb-2 ">新居城市：M78星</li>
                <li class="pl-2 pb-2 ">职业：奥特曼</li>
                <li class="pl-2 pb-2 ">爱好：打怪兽</li>

            </ul>
            <!--图标链接-->
            <div class=" mb-3 ml-5">
                <svg class="icon mr-2" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
                <svg class="icon mr-2" aria-hidden="true">
                    <use xlink:href="#icon-csdn"></use>
                </svg>
                <svg class="icon mr-2" aria-hidden="true">
                    <use xlink:href="#icon-QQ1"></use>
                </svg>
                <svg class="icon mr-2" aria-hidden="true">
                    <use xlink:href="#icon-shouji"></use>
                </svg>
                <svg class="icon mr-2" aria-hidden="true">
                    <use xlink:href="#icon-bumenyouxiang"></use>
                </svg>
            </div>
            
            <div class="container">
                <p class="text-center copy-text">&copy;2024 caicaizi 版权所有</p>
            </div>
        </div>
    </div>

    
    <!-- 正文 -->
    
    <div class="col-lg-8" style="background-color: lightgreen;">
        {% block content %}{% endblock %}
            {% comment %} <!-- 轮播 -->
            <div id="demo" class="carousel slide" data-bs-ride="carousel">
        
                <!-- 横杠指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>
        
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block" src="{% static 'assets/img/demo/1.jpg' %}"  >
                    </div>
                    <div class="carousel-item">
                        <img class="d-block" src="{% static 'assets/img/demo/2.jpg' %}"  >
                    </div>
                    <div class="carousel-item">
                        <img class="d-block" src="{% static 'assets/img/demo/3.jpg' %}"  >
                    </div>
                </div>
            
                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div> {% endcomment %}
    </div>
    

    <!-- 右菜单 -->
    <div class="col-lg-2 element" style="float: right; background-color: lightblue;"> 
        
        <h5 class="font-weight-bold">
            博客分类
        </h5>
        <!--垂直菜单-->
        <div class="border-top-color">
            <ul class="list-unstyled pt-2">
                <li class="pl-2 pb-2 xinqing">
                    <a href="#" class="nav-text">心情记录</a>
                </li>
                <li class="pl-2 pb-2 xuexi">
                    <a href="#" class="nav-text">学习笔记</a>
                </li>
                <li class="pl-2 pb-2  lvxing">
                    <a href="#" class="nav-text">旅行相册</a>
                </li>
                <li class="pl-2 pb-2 meishi">
                    <a href="#" class="nav-text">美食打卡</a>
                </li>
            </ul>
        </div>
        
    </div>

   
</div> 


 

<!--JAVASCRIPTS-->    

<script src="{% static 'assets/js/vendor/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/vendor/popper.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/vendor/bootstrap.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/vendor/share.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/functions.js' %}" type="text/javascript"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}">
// 图标js
<script src="{% static 'assets/js/vendor/iconfont.js' %}">

<!-- Animation -->
<script src="{% static 'assets/js/vendor/aos.js' %}" type="text/javascript"></script>


<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
    
<!-- Carousel Height Smooth -->
<script>    
    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
    </script>
    
<!-- Popovers -->
<script>
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    $('.popover-dismiss').popover({
      trigger: 'focus'
    })
    </script>
    
<!-- Tooltips -->
<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>
    

</body>


</html>

采取模板继承做出index.html

html 复制代码 
{% extends 'base.html' %}
{% load static %}

{% block css %}
<style>
	/* 设置轮播图的宽度和高度（这里以固定值为例，你可以根据需要调整） */  
	.carousel { 
		width: 900px; /* 或者使用百分比、vw等 */  
		height: 500px; /* 或者使用百分比、vh等，或者根据图片比例设置 */  
		margin: 0 auto; /* 居中显示 */  
	}  
	
	/* 确保轮播图的内部容器和每个项目都继承相同的尺寸 */  
	.carousel-inner,  
	.carousel-item {  
		width: 100%;  
		height: 100%;  
	}  
	
	/* 使图片适应容器，同时保持宽高比并裁剪以适应 */  
	.carousel-item img {  
		width: 100%;  
		height: 100%;  
		object-fit: cover; /* 这将确保图片覆盖整个容器，同时保持其宽高比 */  
	}	

</style>
{% endblock %}

{% block content %}
<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

	<!-- 横杠指示符 -->
	<ul class="carousel-indicators">
		<li data-target="#demo" data-slide-to="0" class="active"></li>
		<li data-target="#demo" data-slide-to="1"></li>
		<li data-target="#demo" data-slide-to="2"></li>
	</ul>

	<!-- 轮播图片 -->
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block" src="{% static 'assets/img/demo/1.jpg' %}"  >
		</div>
		<div class="carousel-item">
			<img class="d-block" src="{% static 'assets/img/demo/2.jpg' %}"  >
		</div>
		<div class="carousel-item">
			<img class="d-block" src="{% static 'assets/img/demo/3.jpg' %}"  >
		</div>
	</div>

	<!-- 左右切换按钮 -->
	<a class="carousel-control-prev" href="#demo" data-slide="prev">
		<span class="carousel-control-prev-icon"></span>
	</a>
	<a class="carousel-control-next" href="#demo" data-slide="next">
		<span class="carousel-control-next-icon"></span>
	</a>
</div>
{% endblock %}

其中轮播图图片大小不一导致，引用的bootstrap的轮播边框大小变化，写了CSS样式代码，固定住了边框。

相关推荐
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】＜CPU调度（13）＞选择题（带答案与解析）
java·linux·前端·算法·操作系统
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼2 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态2 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API：alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
啵咿傲3 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy3 小时前
HTML&CSS：数据卡片可以这样设计
前端·javascript·css·3d·html
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿