Wcowin/Mkdocs-Wcowin
1
0
Fork 0
mirror of https://github.com/Wcowin/Mkdocs-Wcowin.git synced 2025-07-20 08:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update linktech.md

Browse Source
This commit is contained in:
Wcowin 2025-07-08 10:58:57 +08:00
parent 018fcdd60f
commit a3758c36c7
1 changed files with 250 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

462
docs/blog/Mkdocs/linktech.md
View File

@ -6,129 +6,143 @@ hide:
- feedback - feedback
--- ---
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css">
复制后在需要添加友链的.md 文件页面粘贴即可 复制后在需要添加友链的.md 文件页面粘贴即可
```html hl_lines="75-110" ```html hl_lines="82-126"
<div class="post-body"> <div class="post-body">
<div id="links"> <div id="links">
<style> <style>
/* 通用卡片样式 */ /* 友链容器样式 */
.card { .link-navigation {
width: 320px; display: grid;
height: 90px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
font-size: 1rem; gap: 1rem;
padding: 10px 20px; max-width: 100%;
border-radius: 25px; }
transition: transform 0.15s, box-shadow 0.15s, background 0.15s; /* 通用卡片样式 */
margin-bottom: 1rem; .card {
display: flex; width: 100%;
align-items: center; max-width: 320px;
color: #333; height: 90px;
} font-size: 1rem;
.card:nth-child(odd) { padding: 10px 20px;
float: left; border-radius: 25px;
} transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
.card:nth-child(even) { display: flex;
float: right; align-items: center;
} color: #333;
.card:hover { justify-self: center;
transform: translateY(0px) scale(1.05); }
.card:hover {
transform: translateY(0px) scale(1.05);
background-color: rgba(68, 138, 255, 0.1);
color: #040000;
}
.card a {
border: none;
}
.card .ava {
width: 3rem !important;
height: 3rem !important;
margin: 0 !important;
margin-right: 1em !important;
border-radius: 50%;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: auto;
}
.card .card-header a {
font-style: normal;
color: #608DBD;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style: normal;
color: #706f6f;
font-size: 14px;
min-width: 0;
overflow: visible;
white-space: normal;
}
/* 小屏优化 */
@media (max-width: 768px) {
.link-navigation {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.card {
width: 100%;
max-width: 100%;
height: auto;
min-height: 80px;
}
.card:hover {
background-color: rgba(68, 138, 255, 0.1); background-color: rgba(68, 138, 255, 0.1);
color: #040000; }
} }
.card a { </style>
border: none; <div class="links-content">
} <div class="link-navigation">
.card .ava { <div class="card">
width: 3rem !important; <img class="ava" src="https://avatars.githubusercontent.com/jaywhj" />
height: 3rem !important; <div class="card-header">
margin: 0 !important;
margin-right: 1em !important;
border-radius: 50%;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: auto;
}
.card .card-header a {
font-style: normal;
color: #608DBD;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style: normal;
color: #706f6f;
font-size: 14px;
min-width: 0;
overflow: visible;
white-space: normal;
}
/* 小屏优化 */
@media (max-width: 768px) {
.card {
width: 100%;
height: auto;
float: none;
}
.card:hover {
background-color: rgba(68, 138, 255, 0.1);
}
}
</style>
<div class="links-content">
<div class="link-navigation">
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
<div class="card-header">
<div> <div>
<a href="https://wcowin.work/" target="_blank">Wcowin’s blog</a> <a href="https://jaywhj.netlify.app/" target="_blank">极简主义</a>
</div> </div>
<div class="info">这是一个分享技术的小站。</div> <div class="info">文档即产品</div>
</div>
</div> </div>
<div class="card">
<img class="ava" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" />
<div class="card-header">
<div>
<a href="https://twitter.com/" target="_blank">Twitter</a>
</div>
<div class="info">社交分享平台</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750220860750.jpg" />
<div class="card-header">
<div>
<a href="https://macapp.org.cn" target="_blank">Macapp</a>
</div>
<div class="info">一个专注于分享Mac资源的频道</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750221795613.jpeg" />
<div class="card-header">
<div>
<a href="{link}" target="_blank">{name}</a>
</div>
<div class="info">{description}</div>
</div>
</div>
</div>
</div> </div>
</div> <div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
<div class="card-header">
<div>
<a href="https://wcowin.work/" target="_blank">Wcowin’s blog</a>
</div>
<div class="info">这是一个分享技术的小站。</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" />
<div class="card-header">
<div>
<a href="https://twitter.com/" target="_blank">Twitter</a>
</div>
<div class="info">社交分享平台</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750220860750.jpg" />
<div class="card-header">
<div>
<a href="https://macapp.org.cn" target="_blank">Macapp</a>
</div>
<div class="info">一个专注于分享Mac资源的频道</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750221795613.jpeg" />
<div class="card-header">
<div>
<a href="{link}" target="_blank">{name}</a>
</div>
<div class="info">{description}</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
``` ```
## 如何加入友链 ## 如何加入友链
```html ```html
@ -164,109 +178,133 @@ hide:
<div class="post-body"> <div class="post-body">
<div id="links"> <div id="links">
<style> <style>
/* 通用卡片样式 */ /* 友链容器样式 */
.card { .link-navigation {
width: 320px; display: grid;
height: 90px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
font-size: 1rem; gap: 1rem;
padding: 10px 20px; max-width: 100%;
border-radius: 25px; }
transition: transform 0.15s, box-shadow 0.15s, background 0.15s; /* 通用卡片样式 */
margin-bottom: 1rem; .card {
display: flex; width: 100%;
align-items: center; max-width: 320px;
color: #333; height: 90px;
} font-size: 1rem;
.card:nth-child(odd) { padding: 10px 20px;
float: left; border-radius: 25px;
} transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
.card:nth-child(even) { display: flex;
float: right; align-items: center;
} color: #333;
.card:hover { justify-self: center;
transform: translateY(0px) scale(1.05); }
.card:hover {
transform: translateY(0px) scale(1.05);
background-color: rgba(68, 138, 255, 0.1);
color: #040000;
}
.card a {
border: none;
}
.card .ava {
width: 3rem !important;
height: 3rem !important;
margin: 0 !important;
margin-right: 1em !important;
border-radius: 50%;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: auto;
}
.card .card-header a {
font-style: normal;
color: #608DBD;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style: normal;
color: #706f6f;
font-size: 14px;
min-width: 0;
overflow: visible;
white-space: normal;
}
/* 小屏优化 */
@media (max-width: 768px) {
.link-navigation {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.card {
width: 100%;
max-width: 100%;
height: auto;
min-height: 80px;
}
.card:hover {
background-color: rgba(68, 138, 255, 0.1); background-color: rgba(68, 138, 255, 0.1);
color: #040000; }
} }
.card a { </style>
border: none; <div class="links-content">
} <div class="link-navigation">
.card .ava { <div class="card">
width: 3rem !important; <img class="ava" src="https://avatars.githubusercontent.com/jaywhj" />
height: 3rem !important; <div class="card-header">
margin: 0 !important;
margin-right: 1em !important;
border-radius: 50%;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: auto;
}
.card .card-header a {
font-style: normal;
color: #608DBD;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style: normal;
color: #706f6f;
font-size: 14px;
min-width: 0;
overflow: visible;
white-space: normal;
}
/* 小屏优化 */
@media (max-width: 768px) {
.card {
width: 100%;
height: auto;
float: none;
}
.card:hover {
background-color: rgba(68, 138, 255, 0.1);
}
}
</style>
<div class="links-content">
<div class="link-navigation">
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
<div class="card-header">
<div> <div>
<a href="https://wcowin.work/" target="_blank">Wcowin’s blog</a> <a href="https://jaywhj.netlify.app/" target="_blank">极简主义</a>
</div> </div>
<div class="info">这是一个分享技术的小站。</div> <div class="info">文档即产品</div>
</div>
</div> </div>
<div class="card">
<img class="ava" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" />
<div class="card-header">
<div>
<a href="https://twitter.com/" target="_blank">Twitter</a>
</div>
<div class="info">社交分享平台</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750221795613.jpeg" />
<div class="card-header">
<div>
<a href="{link}" target="_blank">{name}</a>
</div>
<div class="info">{description}</div>
</div>
</div>
</div>
</div> </div>
</div> <div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750089315509.png" />
<div class="card-header">
<div>
<a href="https://wcowin.work/" target="_blank">Wcowin’s blog</a>
</div>
<div class="info">这是一个分享技术的小站。</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" />
<div class="card-header">
<div>
<a href="https://twitter.com/" target="_blank">Twitter</a>
</div>
<div class="info">社交分享平台</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750220860750.jpg" />
<div class="card-header">
<div>
<a href="https://macapp.org.cn" target="_blank">Macapp</a>
</div>
<div class="info">一个专注于分享Mac资源的频道</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://i.stardots.io/wcowin/1750221795613.jpeg" />
<div class="card-header">
<div>
<a href="{link}" target="_blank">{name}</a>
</div>
<div class="info">{description}</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>