nginx的配置,设定这个模板映射的路径
location /assets/{
alias /home/luichun/lc/Pyfile/Pyhome/app/statichome_to_nginx/pifu/dist/assets/;
}
1：设定一个主页的路由【django主要用来设定逻辑】
2：设定主页的响应内容【使用boostrap框架来对前端展示进行美化】
3：根据模板的js 与css 加入到页面
4：根据想要的内容一点点填充上去
5：分开页面头部，身体，页脚
设置它这个页面html代码的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title _msttexthash="59172854" _msthash="0">企业 |空间 - 多用途响应式模板</title>
<!-- Favicon -->
<link rel="shortcut icon" href="./favicon.ico">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="./assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
<!-- <link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css"> -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- CSS Space Template -->
<link rel="stylesheet" href="./assets/css/theme.min.css">
</head>
<body>
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand-lg navbar-light navbar-end bg-white">
<div class="container">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="#" aria-label="Space">
<img class="navbar-brand-logo" src="./assets/svg/logos/logo.svg" alt="Image Description">
</a>
<!-- End Default Logo -->
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggler -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- Landings -->
<li class="hs-has-mega-menu nav-item" data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "30rem"
}
}'>
<a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle"
aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right-fix dropdown-menu"
aria-labelledby="landingsMegaMenu" style="min-width: 30rem;">
<!-- Main Content -->
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="dropdown-header">Classic</span>
<a class="dropdown-item" href="#">Corporate</a>
<a class="dropdown-item" href="#">Agency</a>
<a class="dropdown-item" href="#">Consulting</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">Business</a>
</div>
<div class="col-sm">
<span class="dropdown-header">Apps</span>
<a class="dropdown-item" href="#">Growth</a>
<a class="dropdown-item" href="#">SaaS</a>
<a class="dropdown-item" href="#">Wallet</a>
<a class="dropdown-item" href="#">API</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Main Content -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Landings -->
<!-- Pages -->
<li class="hs-has-mega-menu nav-item">
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#"
role="button" aria-expanded="false">Pages</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu w-100"
aria-labelledby="pagesMegaMenu" style="min-width: 42rem;">
<!-- Main Content -->
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm-6 col-md">
<span class="dropdown-header">Company</span>
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">Customer Stories</a>
<a class="dropdown-item" href="#">Single Customer Story</a>
<a class="dropdown-item" href="#">Help Center</a>
<a class="dropdown-item" href="#">Help Center Categories</a>
<a class="dropdown-item" href="#">Single Help Center</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header invisible">Company</span>
<a class="dropdown-item" href="#">Careers</a>
<a class="dropdown-item" href="#">Careers Single</a>
<a class="dropdown-item" href="#">Hire Us</a>
<a class="dropdown-item" href="#">Contacts</a>
<a class="dropdown-item" href="#">Log In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">Forgot Password</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header">Portfolio</span>
<a class="dropdown-item" href="#">Modern</a>
<a class="dropdown-item" href="#">Classic</a>
<a class="dropdown-item" href="#">Case Study</a>
</div>
<div class="col-sm-6 col-md">
<span class="dropdown-header">Specialty pages</span>
<a class="dropdown-item" href="#">Pricing</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Error 404</a>
<a class="dropdown-item" href="#">Terms & Conditions</a>
<a class="dropdown-item" href="#">Privacy & Policy</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Main Content -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Pages -->
<!-- Blog -->
<li class="hs-has-sub-menu nav-item">
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#"
role="button" aria-expanded="false">Blog</a>
<!-- Mega Menu -->
<div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu"
style="min-width: 12rem;">
<a class="dropdown-item" href="#">Classic</a>
<a class="dropdown-item" href="#">Author Profile</a>
<a class="dropdown-item" href="#">Single Article</a>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Blog -->
<!-- Docs -->
<li class="hs-has-mega-menu nav-item" data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "20rem"
}
}'>
<a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#"
role="button" aria-expanded="false">Docs</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="docsMegaMenu"
style="min-width: 20rem;">
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<img src="/assets/vendor/duotone-icons/gen/gen005.svg" alt="Your SVG File">
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Documentation <span
class="badge bg-primary rounded-pill ms-1">v1.0</span></span>
<p class="navbar-dropdown-menu-media-desc">Development guides for building
projects with Space</p>
</div>
</div>
</a>
<!-- End Link -->
<div class="dropdown-divider"></div>
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<img src="/assets/vendor/duotone-icons/cod/cod010.svg" alt="Your SVG File">
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Snippets</span>
<p class="navbar-dropdown-menu-media-desc">Move quickly with
copy-to-clipboard feature</p>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Docs -->
<li class="nav-divider"></li>
<!-- Log in -->
<li class="nav-item">
<a class="js-animation-link btn btn-ghost-secondary btn-no-focus me-2 me-lg-0"
href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#signupModal"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
<a class="js-animation-link d-lg-none btn btn-primary" href="javascript:;" role="button"
data-bs-toggle="modal" data-bs-target="#signupModal" data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>
<i class="bi-person-circle me-1"></i> Sign up
</a>
</li>
<!-- End Log in -->
<!-- Sign up -->
<li class="nav-item">
<a class="js-animation-link d-none d-lg-inline-block btn btn-primary" href="javascript:;"
role="button" data-bs-toggle="modal" data-bs-target="#signupModal"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>
<i class="bi-person-circle me-1"></i> Sign up
</a>
</li>
<!-- End Sign up -->
</ul>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body p-sm-5">
<!-- Log in -->
<div id="loginModalForm">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Log in</h4>
<p>Don't have an account yet?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalForm",
"groupName": "idForm"
}'>Sign up here</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-2">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/google-icon.svg"
alt="Image Description">
Log in with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#" data-hs-show-animation-options='{
"targetSelector": "#loginWithEmailModalForm",
"groupName": "idForm"
}'>Log in with Email</a>
</div>
</div>
<!-- End Log in -->
<!-- Log in with Modal -->
<div id="loginWithEmailModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Log in</h4>
<p>Don't have an account yet?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalForm",
"groupName": "idForm"
}'>Sign up here</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email"
id="loginModalFormEmail" placeholder="email@site.com" aria-label="email@site.com"
required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginModalFormPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#forgotPasswordModalForm",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password"
id="loginModalFormPassword" placeholder="8+ characters required"
aria-label="8+ characters required" required minlength="8">
<span class="invalid-feedback">Please enter a valid password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Sign up</h4>
<p>Already have an account?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>Log in here</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-3">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/google-icon.svg"
alt="Image Description">
Sign up with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#" data-hs-show-animation-options='{
"targetSelector": "#signupWithEmailModalForm",
"groupName": "idForm"
}'>Sign up with Email</a>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and
Conditions</a></p>
</div>
</div>
</div>
<!-- End Sign up -->
<!-- Sign up with Modal -->
<div id="signupWithEmailModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Sign up</h4>
<p>Already have an account?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>Log in here</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email"
id="signupModalFormEmail" placeholder="email@site.com" aria-label="email@site.com"
required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password"
id="signupModalFormPassword" placeholder="8+ characters required"
aria-label="8+ characters required" required>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormConfirmPassword">Confirm password</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword"
id="signupModalFormConfirmPassword" placeholder="8+ characters required"
aria-label="8+ characters required"
data-hs-validation-equal-field="#signupModalFormPassword" required>
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
</div>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and
Conditions</a></p>
</div>
</form>
</div>
<!-- End Sign up with Modal -->
<!-- Forgot Password -->
<div id="forgotPasswordModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Forgot password?</h4>
<p>Enter the email address you used when you joined and we'll send you instructions to reset
your password.</p>
</div>
<!-- En dHeading -->
<form class="js-validate need-validate" novalidate>
<div class="mb-3">
<!-- Form -->
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="resetPasswordSrEmailModalForm" tabindex="0">Your
email</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small me-1"></i> Back to Log in
</a>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<input type="email" class="form-control form-control-lg" name="email"
id="resetPasswordSrEmailModalForm" tabindex="1"
placeholder="Enter your email address" aria-label="Enter your email address"
required data-msg="Please enter a valid email address.">
</div>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<!-- End Forgot Password -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer d-block text-center py-sm-5">
<small class="text-cap mb-4">Trusted by the world's best teams</small>
<div class="w-85 mx-auto">
<div class="row justify-content-between">
<div class="col">
<img class="img-fluid" src="./assets/svg/brands/gitlab-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="./assets/svg/brands/fitbit-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="./assets/svg/brands/flow-xo-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="./assets/svg/brands/layar-gray.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- 让鼠标悬停能够触发下拉，必须放在body中的最后面进行初始化 -->
<!-- 首页需要的js -->
<!-- JS 文件（如果需要在页面加载时立即执行） -->
<!-- JS 实现插件JS Implementing Plugins -->
<script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="./assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<!-- JS Space -->
<!-- JS Plugins Init. -->
<script>
(function () {
// INITIALIZATION OF MEGA MENU
// =======================================================
const megaMenu = new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
})()
</script>
</body>
</html>
默认主页中的图片，它这边是建议使用npm的方式来进行捆绑打包的，但是我觉得太麻烦了，所以
原文件如下
<span class="svg-icon svg-icon-sm text-primary">
@@include("../../assets/vendor/duotone-icons/gen/gen005.svg")
</span>
更改为
<span class="svg-icon svg-icon-sm text-primary">
<img src="/assets/vendor/duotone-icons/gen/gen005.svg" alt="Your SVG File">
</span>
