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 <spanclass="badge bg-primary rounded-pill ms-1">v1.0</span></span><p class="navbar-dropdown-menu-media-desc">Development guides for buildingprojects 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 withcopy-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 andConditions</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 andConditions</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 resetyour 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">Youremail</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>
