Skip to content

Commit

Permalink
add 友情链接 card
Browse files Browse the repository at this point in the history
  • Loading branch information
Lvista committed Jan 9, 2025
1 parent db9ee43 commit bef785a
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 14 deletions.
3 changes: 3 additions & 0 deletions docs/about.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
---
comments: true
---
# 我是谁?

!!! quote "人生三问"
Expand Down
2 changes: 1 addition & 1 deletion docs/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
margin: 10px auto;
display: flex;
align-items: flex-start;
/* 对齐顶部 */
Expand Down
90 changes: 90 additions & 0 deletions docs/css/float_cards.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/* .container {
background: #0c5cbe9d;
margin: 50px 200px 0 200px;
} */

.card-container {
margin: 50px 0 0 0;
display: flex;
flex-flow: row wrap;
flex-wrap: wrap;
align-content: flex-start;
}

.card-container .card {
display: flex;
/* 设置为 flexbox 布局 */
align-items: center;
/* 垂直方向对齐 */
width: 280px;
/* 固定宽度,或者根据需要调整 */
padding: 10px;
/* 添加内边距 */
border-radius: 15px;
background: #1e2129;
border: 1px solid rgba(255, 255, 255, 0.5);
margin: 10px;
/* 卡片之间的间距 */
/* box-shadow: 0 4px 8px rgb(255, 255, 255); */
}

.card-container .card .content {
padding: 6px;
text-align: left;
}

.card-container .card .content h3 {
font-size: 1.8em;
z-index: 1;
}

.card-container .card .content p {
font-size: 1em;
font-weight: 300;
}

.card-container .card .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
margin-top: 15px;
background: #4433ff;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: #fff;
outline: none;
border: 2px solid #4433ff;
}

.card-container .card .content a:hover {
background: #fff;
color: #4433ff;
}

.card-container .card .img-container {
width: 60px;
/* 图片容器宽度 */
height: 60px;
/* 图片容器高度 */
margin-right: 3px;
/* 图片和文字之间的间距 */
flex-shrink: 0;
/* 防止图片缩小 */
overflow: hidden;
display: flex;
/* 使用 flex 布局 */
align-items: center;
border-radius: 70%;
/* 如果需要圆形图片 */
}

.card-container .card .img-container img {
width: 100%;
/* 图片适应容器宽度 */
height: 100%;
/* 图片适应容器高度 */
object-fit: cover;
/* 确保图片按比例填充 */
}
30 changes: 17 additions & 13 deletions docs/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,22 @@ tags:
Just a page for testing
<!-- more -->

# 图片翻转效果
# 卡片页面

下面是一个支持图片翻转的 HTML 示例,直接在 Markdown 中嵌入代码。
<div class="card-container">
<div class="card">
<div class="content">
<h3>冷水坑</h3>
<p>《冷水坑》是金特出版的第一部小说集,包含了他自2015年以来创作的四篇小说《冷水坑》《冬民·选章》《暴风雪》和《罪与爱》。</p>
<a href="https://book.douban.com/subject/36624404/" target="_blank">点我直达</a>
</div>
</div>

# 图片翻转效果

<figure markdown="span">
![Image title](./assets/images/logo_noBG_circle.png){ width="300" }
<!-- <figcaption>Image caption</figcaption> -->
</figure>

<div class="flip-container">
<img src="../assets/images/logo_noBG_circle.png" alt="Front Image">
<img src="../assets/images/logo_noBG_circle.png" alt="Back Image">
</div>
<div class="card">
<div class="content">
<h3>辛弃疾新传</h3>
<p>他毕生历经浮沉,波澜壮阔的人生经历、旷达豪迈的赤子之心,尽在《辛弃疾新传》的记述之中。</p>
<a href="https://book.douban.com/subject/36442202/" target="_blank">点我直达</a>
</div>
</div>
</div>
13 changes: 13 additions & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ theme:
- content.code.annotate

plugins:
- rss:
match_path: "blog/posts/.*"
date_from_meta:
as_creation: date.created
as_update: date.updated
- search
- git-revision-date-localized:
enable_creation_date: true
Expand Down Expand Up @@ -105,6 +110,13 @@ extra:
social:
- icon: fontawesome/brands/bilibili
link: https://space.bilibili.com/12740993
- icon: material/television-play
name: Bangumi追番列表
link: https://bangumi.tv/user/754307
- icon: fontawesome/solid/rss
name: RSS
link: http://localhost:8000/feed_rss_created.xml

tags:
Python: py
HTML5: html
Expand Down Expand Up @@ -180,3 +192,4 @@ extra_javascript:
extra_css:
- stylesheets/extra.css
- css/custom.css
- css/float_cards.css
44 changes: 44 additions & 0 deletions overrides/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,48 @@
{% block announce %}
<!-- Add announcement here, including arbitrary HTML -->
公告:正在施工中...
{% endblock %}

{% block site_nav %}
<!-- Navigation -->
{% if nav %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" {{ hidden }}>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
</div>
</div>
</div>

{% endif %}

<!-- Table of contents -->
{% if "toc.integrate" not in features %}
{% if page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
</div>
<div class="card-container">
<h3>友情链接</h3>
<div class="card">
<div class="img-container">
<img src="https://yangzhang.site/assets/images/summation.png"
style="width: 70%; height: 70%; object-fit: contain;">
</div>
<div class="content">
<h3>yangzhang's Site</h3>
</div>
</div>
</div>

</div>
</div>
{% endif %}
{% endblock %}
56 changes: 56 additions & 0 deletions overrides/partials/toc.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!--
Copyright (c) 2016-2025 Martin Donath <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->

<!-- Determine title -->
{% set title = lang.t("toc") %}
{% if config.mdx_configs.toc and config.mdx_configs.toc.title %}
{% set title = config.mdx_configs.toc.title %}
{% endif %}

<!-- Table of contents -->
<nav class="md-nav md-nav--secondary" aria-label="{{ title }}">
{% set toc = page.toc %}

<!--
Check whether the content starts with a level 1 headline. If it does, the
top-level anchor must be skipped, since it would be redundant to the link
to the current page that is located just above the anchor. Therefore we
directly continue with the children of the anchor.
-->
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}

<!-- Table of contents title and list -->
{% if toc %}
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
{{ title }}
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
{% for toc_item in toc %}
{% include "partials/toc-item.html" %}
{% endfor %}
</ul>
{% endif %}
</nav>

0 comments on commit bef785a

Please sign in to comment.