Merge pull request #25 from Yalois/main

feat: 添加友情链接
QLNU-Sec-Team · Oct 22, 2024 · 960f104 · 960f104
2 parents 5a27a3a + 36ee878
commit 960f104
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 22 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "Codegeex.RepoIndex": true
+}
diff --git a/README.md b/README.md
@@ -50,6 +50,23 @@
 }
 ```
 
+---
+
+如需增加`friends`页的成员
+
+请在`src/assets/friends.json`
+
+按照以下格式新增
+```
+{
+    "name": "",
+    "description": "",
+    "avatar": "",
+    "link" : ""
+}
+```
+
+
 ---
 
 > 本项目使用了**ViewTransition**特性，所以请使用Astro ^4.12.2
@@ -68,6 +85,7 @@
 │   └── wx.svg
 ├── src
 │   ├── assets
+│   │   ├── friends.json
 │   │   └── memberList.json
 │   ├── pages
 │   │   ├── components
@@ -77,9 +95,13 @@
 │   │   ├── layouts
 │   │   │   ├── BaseLayout.astro
 │   │   │   └── BaseMarkdownLayout.astro
-│   │   ├── award.md
 │   │   ├── index.md
+│   │   ├── award.md
+│   │   ├── friends.astro
 │   │   └── member.astro
+│   │   
+│   ├── scripts
+│   │   └── menu.js
 │   ├── styles
 │   │   └── global.css
 │   └── env.d.ts
@@ -111,6 +133,11 @@
 
 结构请参考 [维护提示](#维护提示)
 
+`friends.json` 为 friends.astro所引用的友链列表JSON
+
+结构请参考 [维护提示](#维护提示)
+
+
 ### pages
 
 `Astro`将渲染在本文件夹下的文件为页面
@@ -137,6 +164,10 @@ BaseMarkdownLayout为`index.md`和`award.md`的渲染模板
 
 本文件夹下存放的`global.css`暂未实装
 
+### scripts
+
+本文件夹下存放的`menu.js`为`Navbar`组件的脚本
+
 ## 根目录
 
 ### package.json

diff --git a/src/assets/friends.json b/src/assets/friends.json
@@ -0,0 +1,8 @@
+[
+    {
+        "name": "图书馆五楼风很大",
+        "description": "西安邮电大学智邮普创工作室",
+        "avatar": "http://ctf.zypc.online:30000/images/logo4.png",
+        "link" : "http://ctf.zypc.online:30000"
+    }
+]
diff --git a/src/assets/memberList.json b/src/assets/memberList.json
@@ -72,15 +72,16 @@
         "LiManJin",
         "DkingL",
         "zyq",
-        "heshuai",
+        "h4shu@1",
         "zt"
       ],
       "link": {
         "Yalois": "https://blog.sky233.top",
         "heiyu": "http://118.178.131.100",
         "ink": "https://www.cnblogs.com/ink7",
         "fffpppp": "https://www.cnblogs.com/fupo1",
-        "zt": "http://47.121.195.89/wordpress/"
+        "zt": "https://ztusers.github.io/",
+        "uuuwind": "https://www.cnblogs.com/uuuwindwowo"
       }
     }
   }
diff --git a/src/pages/award.md b/src/pages/award.md
@@ -8,20 +8,15 @@ currentPath: "/award"
 .content ul, .content li {
     list-style-type: square;font-size: 17px;line-height: 20px;
     margin-bottom: 0.6em ; 
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-}
+} 
 
 </style>
 
 
 
 # 荣誉
 仅为部分奖项
-![award](</award_1.jpg>)
+<img src="/award_1.jpg" class="award" style="max-width: 100%; height: auto;">
 
 ## 2022
 - XCTF第五期个人认证第9名

diff --git a/src/pages/components/NavItem.astro b/src/pages/components/NavItem.astro
@@ -2,7 +2,7 @@
 // 接受导航项的属性
 const { label, href, isActive } = Astro.props;
 ---
-<li>
+<li onclick="switchMenu()">
   <a href={href} class={`nav-link ${isActive ? 'active' : ''}`}>{label}</a>
 </li>
 
@@ -52,7 +52,7 @@ const { label, href, isActive } = Astro.props;
 
 @media (max-width: 768px) {
   .nav-link {
-    padding: 10px 20px;
+    padding: 10px 20px; 
   }
 }
 </style>
diff --git a/src/pages/components/Navbar.astro b/src/pages/components/Navbar.astro
@@ -5,16 +5,18 @@ import { ViewTransitions } from 'astro:transitions';
 import '@fontsource-variable/overpass-mono';
 import '@fontsource-variable/noto-sans-sc';
 import Footer from './Footer.astro';
+
 // 导航项数据，可以从API或文件中读取
 const navItems = [
   { label: '关于 About', href: '/' },
   { label: '成员 Members', href: '/member' },
   { label: '奖项 Awards', href: '/award' },
+  { label: '友链 Friends', href: '/friends' },
 ];
-
 const { currentPath } = Astro.props;
 const showName = '齐鲁师范网络安全社团';
 ---
+
 <nav class="navbar">
   <div class="logo-container">
     <a href="https://www.qlnu-sec.cn/">
@@ -24,16 +26,43 @@ const showName = '齐鲁师范网络安全社团';
   <div class="show-name">
     {showName}
   </div>
-  <ul>
+  <ul id="menu">
     {navItems.map(item => (
       <NavItem label={item.label} href={item.href} isActive={item.href === currentPath} />
     ))}
-
   </ul>
-
+  <ViewTransitions /> 
+  <div class="hamburger" onclick="switchMenu()">
+    <div class="line"></div>
+    <div class="line"></div>
+    <div class="line"></div>
+  </div>
 </nav>
-<ViewTransitions />
+
+<ul class="nav2 hidetag">
+  {navItems.map(item => (
+    <NavItem label={item.label} href={item.href} isActive={item.href === currentPath} />
+  ))}
+</ul>
 <style>
+.nav2{
+  display: none;
+}
+.hamburger {
+  display: none;
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+}
+
+.hamburger .line {
+  display: block;
+  width: 30px;
+  height: 4px;
+  margin-bottom: 5px;
+  background-color: #000000;
+}
+
 .navbar {
   font-family: 'Noto Sans SC Variable', sans-serif;
   width: 180px;
@@ -155,4 +184,47 @@ const showName = '齐鲁师范网络安全社团';
     font-family: 'Overpass Mono Variable', monospace;
   }
 }
+@media (max-width: 500px) {
+  .show-name {
+    margin-top: 10px;
+    display: block;
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 20px;  
+  }
+  .nav2{
+    border-radius: 10px;
+    width: 150px;
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.8); 
+    list-style-type: none;
+    padding: 3px;
+    margin: 0;
+    flex-direction: column;
+    position: absolute; 
+    top: 80px;
+    right: 0;
+    margin-right: 8px;
+  }
+  .hidetag
+  {
+    display: none;
+  }
+  .hamburger {
+    display: block;
+  }
+  .navbar ul {
+    display: none;
+  }
+  .logo {
+    width: 40px;
+    height: 4%;
+    margin-bottom: 0;
+    margin-left: 20px;
+    margin-right: 10px;
+  }
+
+}
+
+
 </style>
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
@@ -0,0 +1,80 @@
+---
+// 导入基础布局
+import BaseLayout from './layouts/BaseLayout.astro';
+import friendList from '../assets/friends.json';
+
+---
+
+<BaseLayout title="友链 Friends" currentPath="/friends">
+  <h1>友情链接</h1>
+  <p>友情直达~!!</p>
+  <div class="friend-list">
+    {friendList.map(friend => (
+    <div class="friend-link">
+      <div class="avatar">
+          <img src={friend.avatar} alt="头像" />
+      </div>
+      <div class="info">
+          <div class="name">{friend.name}</div>
+          <div class="description">{friend.description}</div>
+      </div>
+      <a href={friend.link} class="button">访问</a>
+    </div>
+    ))}
+  </div>
+
+
+<style>
+  .friend-link {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin: 10px 0;
+    background-color: #f9f9f9;
+    margin-bottom: 60%;
+}
+
+.avatar {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}
+
+.avatar img {
+    width: 100%;
+    height: auto;
+}
+
+.info {
+    flex-grow: 1;
+}
+
+.name {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.description {
+    font-size: 14px;
+    color: #666;
+}
+
+.button {
+    text-decoration: none;
+    background-color: #4b4e52;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.button:hover {
+    background-color: #000000;
+}
+
+</style>
+</BaseLayout>
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -12,6 +12,7 @@ currentPath: '/'
   }
 
 </style>
+
 # 关于我们
 
 “齐鲁师范网络安全社团”（QLNU-Sec-Team）是一个由学生自发组建的组织，主要面向全校各年级对网络安全技术感兴趣的同学。

diff --git a/src/pages/layouts/BaseLayout.astro b/src/pages/layouts/BaseLayout.astro
@@ -17,7 +17,6 @@ const imageUrl = 'https://www.qlnu-sec.cn/icon.png'; // Replace with your actual
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{pageTitle}</title>
   <link rel="icon" type="image/png" href="/icon.png">
-
   <!-- SEO Meta Tags -->
   <meta name="description" content={pageDescription}>
   <meta name="keywords" content="cybersecurity, QLNU, security team, CTF, information security">
@@ -75,5 +74,6 @@ const imageUrl = 'https://www.qlnu-sec.cn/icon.png'; // Replace with your actual
 
   }
   </style>
+  <script is:inline src="/src/scripts/menu.js"></script>
 </body>
 </html>
diff --git a/src/pages/layouts/BaseMarkdownLayout.astro b/src/pages/layouts/BaseMarkdownLayout.astro
@@ -1,7 +1,6 @@
 ---
 import Footer from '../components/Footer.astro';
 import Navbar from '../components/Navbar.astro';
-
 const { frontmatter } = Astro.props;
 const siteName = 'QLNU-Sec-Team';
 const pageTitle = frontmatter?.title ? `${siteName} - ${frontmatter.title}` : siteName;
@@ -16,7 +15,7 @@ const imageUrl = 'https://www.qlnu-sec.cn/icon.png'; // Replace with your actual
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{pageTitle}</title>
   <link rel="icon" type="image/png" href="/icon.png">
-  
+
   <!-- SEO Meta Tags -->
   <meta name="description" content={pageDescription}>
   <meta name="keywords" content="cybersecurity, QLNU, security team, CTF, information security">
@@ -72,6 +71,6 @@ const imageUrl = 'https://www.qlnu-sec.cn/icon.png'; // Replace with your actual
 
   }
   </style>
-
+  <script is:inline src="/src/scripts/menu.js"></script>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ currentPath: '/' @@
       }
     </style>
     # 关于我们
     “齐鲁师范网络安全社团”（QLNU-Sec-Team）是一个由学生自发组建的组织，主要面向全校各年级对网络安全技术感兴趣的同学。
@@ Expand Down @@