9 changed files with 474 additions and 436 deletions
@ -1,15 +0,0 @@ |
|||||
html, |
|
||||
body { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
height: 100%; |
|
||||
font-family: Arial, sans-serif; |
|
||||
color: #333; |
|
||||
scroll-behavior: smooth; |
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
min-height: 100vh; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
@ -1,51 +1,53 @@ |
|||||
|
style |
||||
|
include ./style.css |
||||
footer.footer.shadow |
footer.footer.shadow |
||||
.footer-panel(class="bg-white border-t border-gray-200") |
.footer-panel(class="bg-white border-t border-gray-200") |
||||
.footer-content.container(class="pt-12 pb-6") |
.footer-content.container(class="pt-12 pb-6") |
||||
.footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8") |
.footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8") |
||||
.footer-section |
.footer-section |
||||
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title} |
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title} |
||||
p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。<br>岁月催人老，用真情对待自己。 |
p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。<br>岁月催人老，用真情对待自己。 |
||||
|
|
||||
.footer-section |
|
||||
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接 |
|
||||
ul.footer-links(class="space-y-3") |
|
||||
li |
|
||||
a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页 |
|
||||
li |
|
||||
a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我 |
|
||||
li |
|
||||
a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我 |
|
||||
li |
|
||||
a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心 |
|
||||
|
|
||||
.footer-section |
|
||||
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持 |
|
||||
ul.footer-links(class="space-y-3") |
|
||||
li |
|
||||
a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款 |
|
||||
li |
|
||||
a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策 |
|
||||
li |
|
||||
a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题 |
|
||||
li |
|
||||
a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈 |
|
||||
|
|
||||
.footer-section |
|
||||
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我 |
|
||||
.social-links(class="flex space-x-4 flex-wrap") |
|
||||
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信") |
|
||||
//- span.streamline-ultimate-color--wechat-logo |
|
||||
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ") |
|
||||
//- span.cib--tencent-qq |
|
||||
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") |
|
||||
//- span.ri--github-fill |
|
||||
a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") |
|
||||
span.icomoon-free--blog |
|
||||
|
|
||||
.footer-bottom(class="border-t border-gray-200 pt-6") |
.footer-section |
||||
.footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center") |
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接 |
||||
.copyright(class="text-gray-500 text-sm mb-4 md:mb-0") |
ul.footer-links(class="space-y-3") |
||||
| © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。 |
li |
||||
.footer-actions(class="flex items-center space-x-6") |
a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页 |
||||
//- a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图 |
li |
||||
//- a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅 |
a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我 |
||||
|
li |
||||
|
a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我 |
||||
|
li |
||||
|
a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心 |
||||
|
|
||||
|
.footer-section |
||||
|
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持 |
||||
|
ul.footer-links(class="space-y-3") |
||||
|
li |
||||
|
a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款 |
||||
|
li |
||||
|
a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策 |
||||
|
li |
||||
|
a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题 |
||||
|
li |
||||
|
a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈 |
||||
|
|
||||
|
.footer-section |
||||
|
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我 |
||||
|
.social-links(class="flex space-x-4 flex-wrap") |
||||
|
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信") |
||||
|
//- span.streamline-ultimate-color--wechat-logo |
||||
|
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ") |
||||
|
//- span.cib--tencent-qq |
||||
|
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") |
||||
|
//- span.ri--github-fill |
||||
|
a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") |
||||
|
span.icomoon-free--blog |
||||
|
|
||||
|
.footer-bottom(class="border-t border-gray-200 pt-6") |
||||
|
.footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center") |
||||
|
.copyright(class="text-gray-500 text-sm mb-4 md:mb-0") |
||||
|
| © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。 |
||||
|
.footer-actions(class="flex items-center space-x-6") |
||||
|
//- a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图 |
||||
|
//- a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅 |
||||
|
|||||
@ -0,0 +1,266 @@ |
|||||
|
.footer-panel { |
||||
|
padding: 0; |
||||
|
font-size: 14px; |
||||
|
margin-top: auto; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.footer-main { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr; |
||||
|
gap: 2rem; |
||||
|
margin-bottom: 2rem; |
||||
|
} |
||||
|
|
||||
|
.footer-section { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.footer-title { |
||||
|
margin-bottom: 1rem; |
||||
|
color: #111827; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.footer-desc { |
||||
|
color: #6b7280; |
||||
|
line-height: 1.6; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.footer-links { |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.footer-links li { |
||||
|
margin-bottom: 0.75rem; |
||||
|
} |
||||
|
|
||||
|
.footer-links a { |
||||
|
text-decoration: none; |
||||
|
color: #6b7280; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.footer-links a:hover { |
||||
|
color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
.social-links { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
|
||||
|
.social-link { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-decoration: none; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.social-link:hover { |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
|
||||
|
.social-link span { |
||||
|
font-size: 18px; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.footer-bottom { |
||||
|
border-top: 1px solid #e5e7eb; |
||||
|
padding-top: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.footer-bottom-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
|
||||
|
.copyright { |
||||
|
color: #6b7280; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.footer-actions { |
||||
|
display: flex; |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.footer-actions a { |
||||
|
text-decoration: none; |
||||
|
color: #6b7280; |
||||
|
transition: color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.footer-actions a:hover { |
||||
|
color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (min-width: 768px) { |
||||
|
.footer-main { |
||||
|
grid-template-columns: repeat(4, 1fr); |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.footer-section { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.social-links { |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.footer-bottom-content { |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.copyright { |
||||
|
text-align: left; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 移动端优化（<=767px） */ |
||||
|
@media (max-width: 767px) { |
||||
|
.footer-content { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
.footer-main { |
||||
|
gap: 1.25rem; |
||||
|
/* 20px */ |
||||
|
margin-bottom: 1rem; |
||||
|
/* 16px */ |
||||
|
} |
||||
|
|
||||
|
.footer-title { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.footer-desc { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.footer-links li { |
||||
|
margin-bottom: 0.5rem; |
||||
|
/* 8px */ |
||||
|
} |
||||
|
|
||||
|
.footer-actions { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 1rem; |
||||
|
/* 16px */ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.footer-actions a { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.social-links { |
||||
|
flex-wrap: wrap; |
||||
|
gap: 0.75rem; |
||||
|
/* 12px */ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.social-link { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
.footer-bottom-content { |
||||
|
gap: 0.75rem; |
||||
|
/* 12px */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* iconify图标 */ |
||||
|
.streamline-ultimate-color--wechat-logo { |
||||
|
display: inline-block; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%2378eb7b' d='M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z'/%3E%3Cpath fill='%23c9f7ca' d='M1.176 10.269c.14-.533.356-1.042.644-1.511a7.05 7.05 0 0 1 3.632-2.863a8.45 8.45 0 0 1 6.93.542c.7.389 1.326.9 1.848 1.507a8 8 0 0 1 1.343-.023a6.34 6.34 0 0 0-3.19-4.162a8.45 8.45 0 0 0-6.931-.541A7.05 7.05 0 0 0 1.82 6.08a5.36 5.36 0 0 0-.67 4.11q.016.038.026.079'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M5.643 6.299a.478.478 0 1 1 .321.9a.478.478 0 0 1-.321-.9m5.029.005a.478.478 0 1 1 .338.894a.478.478 0 0 1-.338-.894' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z'/%3E%3Cpath fill='%23c9f7ca' d='M13.633 13.288a7.11 7.11 0 0 1 6.38-.024a5.54 5.54 0 0 1 2.58 2.632q.143.325.231.67a4.5 4.5 0 0 0-.23-2.986a5.54 5.54 0 0 0-2.581-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482c-.151.69-.13 1.406.064 2.085a5.35 5.35 0 0 1 2.764-3.25'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); |
||||
|
} |
||||
|
|
||||
|
.fa7-brands--weibo { |
||||
|
display: inline-block; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M407 177.6c7.6-24-13.4-46.8-37.4-41.7c-22 4.8-28.8-28.1-7.1-32.8c50.1-10.9 92.3 37.1 76.5 84.8c-6.8 21.2-38.8 10.8-32-10.3M214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6c79.5-33.6 140.5-16.8 114 51.4c-3.7 9.4 1.1 10.9 8.3 13.1c135.7 42.3 34.8 215.2-169.7 215.2m143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7c-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116M347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3c72.3-15.2 134.8 52.8 111.7 124c-7.4 24.2 29.1 37 37.4 12c31.9-99.8-55.1-195.9-157.4-174.3m-78.5 311c-17.1 38.8-66.8 60-109.1 46.3c-40.8-13.1-58-53.4-40.3-89.7c17.7-35.4 63.1-55.4 103.4-45.1c42 10.8 63.1 50.2 46 88.5m-86.3-30c-12.9-5.4-30 .3-38 12.9c-8.3 12.9-4.3 28 8.6 34c13.1 6 30.8.3 39.1-12.9c8-13.1 3.7-28.3-9.7-34m32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4c-2.9 5.1-1.4 10.6 3.7 12.9c5.1 2 11.7-.3 14.6-5.4c2.8-5.2 1.1-10.9-4-12.9'/%3E%3C/svg%3E"); |
||||
|
background-color: currentColor; |
||||
|
-webkit-mask-image: var(--svg); |
||||
|
mask-image: var(--svg); |
||||
|
-webkit-mask-repeat: no-repeat; |
||||
|
mask-repeat: no-repeat; |
||||
|
-webkit-mask-size: 100% 100%; |
||||
|
mask-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.cib--tencent-qq { |
||||
|
display: inline-block; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M28.527 20.047a57 57 0 0 0-1.068-3.02l-1.443-3.595c.005-.041.02-.744.02-1.115C26.036 6.177 23.136 0 16 0S5.964 6.177 5.964 12.323c0 .365.02 1.073.02 1.115l-1.443 3.593q-.576 1.493-1.068 3.016c-1.359 4.38-.921 6.193-.583 6.235c.719.083 2.803-3.297 2.803-3.297c0 1.959 1.009 4.516 3.192 6.36c-.812.249-1.817.64-2.459 1.115c-.577.427-.505.859-.4 1.036c.457.771 7.843.489 9.973.251c2.136.239 9.521.52 9.979-.251c.104-.177.177-.609-.4-1.036c-.647-.475-1.647-.865-2.464-1.115c2.183-1.849 3.192-4.407 3.192-6.365c0 0 2.084 3.385 2.803 3.297c.339-.036.776-1.855-.583-6.229zM16.88 6.464c.052-1.407.88-2.505 1.849-2.464c.968.041 1.708 1.213 1.656 2.62c-.052 1.401-.88 2.505-1.849 2.459c-.963-.043-1.708-1.215-1.656-2.615M13.271 4c.969-.041 1.797 1.057 1.849 2.464c.052 1.4-.693 2.572-1.656 2.615c-.969.047-1.797-1.057-1.849-2.459c-.052-1.407.688-2.579 1.656-2.62m-3.375 7.057c.255-.573 2.859-1.208 6.088-1.208h.032c3.224 0 5.833.635 6.088 1.208a.15.15 0 0 1 .021.083a.2.2 0 0 1-.037.111c-.219.317-3.109 1.889-6.067 1.889h-.037c-2.963 0-5.853-1.572-6.072-1.889a.18.18 0 0 1-.016-.193zm13.896 11.495c-.297 4.907-3.204 7.984-7.699 8.032h-.181c-4.496-.048-7.407-3.125-7.699-8.032c-.109-1.797 0-3.323.193-4.573q.64.133 1.281.235v4.677s2.208.448 4.421.136V18.73c.651.036 1.281.052 1.875.041h.032c2.239.032 4.953-.271 7.577-.792c.199 1.251.303 2.776.199 4.573zM13.973 7.74c.417-.057.724-.547.677-1.1c-.047-.557-.416-.963-.839-.905c-.416.052-.724.547-.676 1.099s.416.959.837.907zm5.334-.865c.105.047.292.057.387-.192c.047-.131.031-.224-.016-.287c-.032-.047-.177-.156-.495-.235c-1.204-.297-1.787.511-1.871.661c-.057.099-.015.24.073.308c.088.067.188.047.24-.011c.771-.839 1.615-.276 1.681-.245z'/%3E%3C/svg%3E"); |
||||
|
background-color: currentColor; |
||||
|
-webkit-mask-image: var(--svg); |
||||
|
mask-image: var(--svg); |
||||
|
-webkit-mask-repeat: no-repeat; |
||||
|
mask-repeat: no-repeat; |
||||
|
-webkit-mask-size: 100% 100%; |
||||
|
mask-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.ri--github-fill { |
||||
|
display: inline-block; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.001 2c-5.525 0-10 4.475-10 10a9.99 9.99 0 0 0 6.837 9.488c.5.087.688-.213.688-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.337 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.687c-.1-.25-.45-1.275.1-2.65c0 0 .837-.263 2.75 1.024a9.3 9.3 0 0 1 2.5-.337c.85 0 1.7.112 2.5.337c1.913-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.02 10.02 0 0 0 22 12c0-5.525-4.475-10-10-10'/%3E%3C/svg%3E"); |
||||
|
background-color: currentColor; |
||||
|
-webkit-mask-image: var(--svg); |
||||
|
mask-image: var(--svg); |
||||
|
-webkit-mask-repeat: no-repeat; |
||||
|
mask-repeat: no-repeat; |
||||
|
-webkit-mask-size: 100% 100%; |
||||
|
mask-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.icomoon-free--blog { |
||||
|
display: inline-block; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 0v1.5a8.46 8.46 0 0 1 6.01 2.489a8.47 8.47 0 0 1 2.489 6.01h1.5c0-5.523-4.477-10-10-10z'/%3E%3Cpath fill='%23000' d='M6 3v1.5c1.469 0 2.85.572 3.889 1.611S11.5 8.531 11.5 10H13a7 7 0 0 0-7-7m1.5 3l-1 1L3 8l-3 6.5l.396.396l3.638-3.638a1 1 0 1 1 .707.707l-3.638 3.638l.396.396l6.5-3l1-3.5l1-1l-2.5-2.5z'/%3E%3C/svg%3E"); |
||||
|
background-color: currentColor; |
||||
|
-webkit-mask-image: var(--svg); |
||||
|
mask-image: var(--svg); |
||||
|
-webkit-mask-repeat: no-repeat; |
||||
|
mask-repeat: no-repeat; |
||||
|
-webkit-mask-size: 100% 100%; |
||||
|
mask-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.fe--notice-active { |
||||
|
display: inline-block; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M15.085 4.853a2.501 2.501 0 1 1 2.572 3.142A6 6 0 0 1 18 10v6h1c.55 0 1 .45 1 1s-.45 1-1 1h-4v1a3 3 0 0 1-6 0v-1H5c-.55 0-1-.45-1-1s.45-1 1-1h1v-6a6 6 0 0 1 5-5.917V3a1 1 0 0 1 2 0v1.083a6 6 0 0 1 2.085.77M12 20a1 1 0 0 0 1-1v-1h-2v1a1 1 0 0 0 1 1m-4-4h8v-6a4 4 0 1 0-8 0z'/%3E%3C/svg%3E"); |
||||
|
background-color: currentColor; |
||||
|
-webkit-mask-image: var(--svg); |
||||
|
mask-image: var(--svg); |
||||
|
-webkit-mask-repeat: no-repeat; |
||||
|
mask-repeat: no-repeat; |
||||
|
-webkit-mask-size: 100% 100%; |
||||
|
mask-size: 100% 100%; |
||||
|
} |
||||
@ -1,31 +1,36 @@ |
|||||
- |
- |
||||
const navbarOptions = { |
const navbarOptions = { |
||||
title: siteConfig.site_title, |
title: siteConfig.site_title, |
||||
|
showLeftMenu: true, |
||||
|
showRightMenu: true, |
||||
} |
} |
||||
|
const _leftMenu = [ |
||||
|
{ child: '所有文章', link: '/articles', extra: { class: (currentPath === '/articles' || currentPath === '/articles/' |
||||
|
? 'text-blue-600 font-bold border-b-2 border-blue-600' |
||||
|
: 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400') } }, |
||||
|
] |
||||
|
const _rightMenu = !user ? [ |
||||
|
{ child: '登录', link: '/login' }, |
||||
|
] : [ |
||||
|
{ child: `<span>欢迎您，</span><span class="font-semibold">${'aaa' || user.name || user.nickname}</span>`, link: '/profile' }, |
||||
|
{ child: `<div class="fe--notice-active"></div>`, link: '/notice' }, |
||||
|
{ child: `退出`, link: '/logout', extra: { 'hx-post': '/logout' } }, |
||||
|
] |
||||
nav.navbar(class="relative") |
nav.navbar(class="relative") |
||||
.placeholder(class="h-[45px] w-full opacity-0") |
.placeholder(class="h-[45px] w-full opacity-0") |
||||
.fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10") |
.fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10") |
||||
.container.clearfix(class="h-full") |
.container.clearfix(class="h-full") |
||||
.navbar-brand |
.navbar-brand |
||||
a(href="/" class="text-[20px]") #{navbarOptions.title} |
a(href="/" class="text-[20px]") #{navbarOptions.title} |
||||
//- .left.menu.desktop-only |
if navbarOptions.showLeftMenu |
||||
//- a.menu-item( |
.left.menu.desktop-only |
||||
//- href="/articles" |
- _leftMenu.forEach(item => { |
||||
//- class=(currentPath === '/articles' || currentPath === '/articles/' |
a.menu-item(href=item.link)&attributes(item.extra || {}) |
||||
//- ? 'text-blue-600 font-bold border-b-2 border-blue-600' |
!= item.child |
||||
//- : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400' |
- }) |
||||
//- ) |
if navbarOptions.showRightMenu |
||||
//- ) 所有文章 |
.right.menu.desktop-only |
||||
if !user |
- _rightMenu.forEach(item => { |
||||
.right.menu.desktop-only |
a.menu-item(href=item.link)&attributes(item.extra || {}) |
||||
a.menu-item(href="/login") 登录 |
!= item.child |
||||
//- a.menu-item(href="/register") 注册 |
- }) |
||||
else |
|
||||
.right.menu.desktop-only |
|
||||
a.menu-item(href="/profile") |
|
||||
span 欢迎您， |
|
||||
span.font-semibold #{user.name || user.nickname} |
|
||||
a.menu-item(href="/notice") |
|
||||
.fe--notice-active |
|
||||
a.menu-item(hx-post="/logout") 退出 |
|
||||
@ -0,0 +1,51 @@ |
|||||
|
extends /layouts/empty.pug |
||||
|
|
||||
|
block pageHead |
||||
|
+js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js") |
||||
|
|
||||
|
mixin PeopleCared(name, role, desc, avatar) |
||||
|
.bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4 |
||||
|
img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name) |
||||
|
.flex-1 |
||||
|
.text-lg.font-semibold.text-gray-900 #{name} |
||||
|
if role |
||||
|
.text-sm.text-gray-500.mt-1 #{role} |
||||
|
if desc |
||||
|
p.text-sm.text-gray-600.mt-2 #{desc} |
||||
|
|
||||
|
|
||||
|
block pageContent |
||||
|
.-mt-5 |
||||
|
//- form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center") |
||||
|
//- input(type="file" name="file" required) |
||||
|
//- button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 |
||||
|
//- box-shadow 是在所有内容底部 |
||||
|
.swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);") |
||||
|
.swiper-wrapper.h-full |
||||
|
.swiper-slide(style="flex-shrink: 0;") |
||||
|
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
||||
|
.swiper-slide(style="flex-shrink: 0;") |
||||
|
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
||||
|
.swiper-slide(style="flex-shrink: 0;") |
||||
|
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
||||
|
.container |
||||
|
.grid.grid-cols-1.gap-4(class="md:grid-cols-4") |
||||
|
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
||||
|
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
||||
|
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
||||
|
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
||||
|
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
||||
|
|
||||
|
block pageScripts |
||||
|
script. |
||||
|
//- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) |
||||
|
const swiper = new Swiper(".swiper-container", { |
||||
|
//- loop: true, |
||||
|
//- pagination: { |
||||
|
//- el: ".swiper-pagination", |
||||
|
//- clickable: true, |
||||
|
//- }, |
||||
|
//- lazy: { |
||||
|
//- loadPrevNext: true, |
||||
|
//- }, |
||||
|
}); |
||||
@ -1,51 +1,15 @@ |
|||||
extends /layouts/empty.pug |
extends /layouts/root.pug |
||||
|
|
||||
block pageHead |
block $$head |
||||
+js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js") |
style |
||||
|
include ./style.css |
||||
|
|
||||
mixin PeopleCared(name, role, desc, avatar) |
block $$content |
||||
.bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4 |
.page-layout.bg-gray-50 |
||||
img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name) |
|
||||
.flex-1 |
|
||||
.text-lg.font-semibold.text-gray-900 #{name} |
|
||||
if role |
|
||||
.text-sm.text-gray-500.mt-1 #{role} |
|
||||
if desc |
|
||||
p.text-sm.text-gray-600.mt-2 #{desc} |
|
||||
|
|
||||
|
|
||||
block pageContent |
|
||||
.-my-5 |
|
||||
form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center") |
|
||||
input(type="file" name="file" required) |
|
||||
button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 |
|
||||
//- box-shadow 是在所有内容底部 |
|
||||
.swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);") |
|
||||
.swiper-wrapper.h-full |
|
||||
.swiper-slide(style="flex-shrink: 0;") |
|
||||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|
||||
.swiper-slide(style="flex-shrink: 0;") |
|
||||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|
||||
.swiper-slide(style="flex-shrink: 0;") |
|
||||
img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") |
|
||||
.container |
.container |
||||
.grid.grid-cols-1.gap-4(class="md:grid-cols-4") |
div(style="height:2000px") sad |
||||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
div dsad |
||||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
include /htmx/footer/index.pug |
||||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
|
||||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
block $$scripts |
||||
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') |
block pageScripts |
||||
|
|
||||
block pageScripts |
|
||||
script. |
|
||||
//- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) |
|
||||
const swiper = new Swiper(".swiper-container", { |
|
||||
//- loop: true, |
|
||||
//- pagination: { |
|
||||
//- el: ".swiper-pagination", |
|
||||
//- clickable: true, |
|
||||
//- }, |
|
||||
//- lazy: { |
|
||||
//- loadPrevNext: true, |
|
||||
//- }, |
|
||||
}); |
|
||||
|
|||||
@ -0,0 +1,22 @@ |
|||||
|
.page-layout { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
max-width: 1226px; |
||||
|
margin-right: auto; |
||||
|
margin-left: auto; |
||||
|
/* padding-left: 20px; |
||||
|
padding-right: 20px; */ |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 640px) { |
||||
|
.container { |
||||
|
padding-left: 10px; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue