Merge branch 'dev'

Lvista · Jan 9, 2025 · 6c67404 · 6c67404
2 parents d1a6808 + 6bbd11a
commit 6c67404
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 58 deletions.
diff --git a/docs/assets/images/logo_noBG_circle.png b/docs/assets/images/logo_noBG_circle.png
diff --git a/docs/assets/images/self_shoot.png b/docs/assets/images/self_shoot.png
diff --git a/docs/blog/posts/page-1.md b/docs/blog/posts/page-1.md
@@ -1,5 +1,5 @@
 ---
-draft: true
+# draft: true
 comments: true
 slug: Vedio_processing_by_python
 title: "基于Python的视频处理"
@@ -20,9 +20,10 @@ tags:
 
 <!-- more -->
 
-[一日一技：使用Python将视频转Gif-腾讯云开发者社区-腾讯云](https://cloud.tencent.com/developer/article/1975307)
+参考了以下文章：
 
-[User Guide — MoviePy 1.0.2 documentation](https://zulko.github.io/moviepy/)
+- [一日一技：使用Python将视频转Gif-腾讯云开发者社区-腾讯云](https://cloud.tencent.com/developer/article/1975307)
+- [User Guide — MoviePy 1.0.2 documentation](https://zulko.github.io/moviepy/)
 
 # MP4转GIF
 
@@ -35,12 +36,13 @@ clip = VideoFileClip(r"C:\Users\czc_c\Downloads\Liar Dancer.mp4")
 clip = clip.resize(0.4) # 压缩大小
 clip.write_gif("movie-10f.gif",fps=15)  #设置为每秒15帧
 ```
+!!! bug "`module 'PIL.Image' has no attribute 'ANTIALIAS'"
 
-这时候会出现一个error：**`module 'PIL.Image' has no attribute 'ANTIALIAS'`**
+    error：**`module 'PIL.Image' has no attribute 'ANTIALIAS'`**
 
-查了之后发现是Pillow 从10.0版本后就移除了**`ANTIALIAS`** ，解决方案就是导入9.5版本。
+    查了之后发现是Pillow 从10.0版本后就移除了**`ANTIALIAS`** ，解决方案就是导入9.5版本。
 
-[AttributeError: module 'PIL.Image' has no attribute 'ANTIALIAS'](https://stackoverflow.com/questions/76616042/attributeerror-module-pil-image-has-no-attribute-antialias)
+    [AttributeError: module 'PIL.Image' has no attribute 'ANTIALIAS'](https://stackoverflow.com/questions/76616042/attributeerror-module-pil-image-has-no-attribute-antialias)
 
 ![](../../assets/images/5M.gif)
 
diff --git a/docs/css/custom.css b/docs/css/custom.css
@@ -0,0 +1,69 @@
+.flip-container {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    margin: 100px auto;
+    display: flex;
+    align-items: flex-start;
+    /* 对齐顶部 */
+    justify-content: flex-end;
+    /* 将文字放置右上角 */
+}
+
+.image-container {
+    position: relative;
+    position: relative;
+    width: 300px;
+    height: 300px;
+}
+
+.image-container img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: all 1s;
+}
+
+.image-container img:first-child {
+    z-index: 1;
+    backface-visibility: hidden;
+}
+
+.image-container img:last-child {
+    z-index: 0;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+}
+
+.image-container:hover img:first-child {
+    transform: rotateY(180deg);
+    z-index: 2;
+}
+
+.image-container:hover img:last-child {
+    transform: rotateY(0deg);
+    z-index: 3;
+}
+
+.hover-block {
+    position: absolute;
+    top: 10px;
+    /* 调整文字位置 */
+    right: -20px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    z-index: 10;
+    /* 确保文字在图片上方 */
+    display: none;
+    /* 默认隐藏 */
+}
+
+.image-container:hover+.hover-block {
+    display: block;
+    /* 鼠标悬停时显示文字 */
+}
diff --git a/docs/index.md b/docs/index.md
@@ -1,8 +1,41 @@
 # Welcome to 黯然's Blog
 
-- [你可能感兴趣的](./blog/index.md)->
-  一些有用的文章（存疑）
-- [关于我](./about.md)->
-  我是个...人？
-- 我的足迹->
-  保持对这个世界的好奇心
+<div class="flip-container">
+    <div class="image-container">
+        <img src="../assets/images/logo_noBG_circle.png" alt="Front Image">
+        <a href="/template/" >
+            <img src="../assets/images/self_shoot.png" alt="Back Image">
+        </a>
+    </div>
+    <div class="hover-block">
+        点我看看!
+    </div>
+</div>
+
+<div class="grid cards" markdown>
+
+-   :material-heart:{ .lg .middle } __你可能感兴趣的__
+
+    ---
+
+    一些有用的文章（存疑）
+
+    [:octicons-arrow-right-24: 去看看](./blog/index.md)
+
+-   :material-emoticon-cool-outline:{ .lg .middle } __关于我__
+
+    ---
+
+    我是个...人？
+
+    [:octicons-arrow-right-24: 了解一下](./about.md)
+
+-   :material-foot-print:{ .lg .middle } __我的足迹__
+
+    ---
+
+    保持对这个世界的好奇心
+
+    [:octicons-arrow-right-24: 施工中](#)
+
+</div>
diff --git a/docs/javascripts/hover.js b/docs/javascripts/hover.js
@@ -0,0 +1,9 @@
+const container = document.querySelector('.flip-container');
+
+container.addEventListener('mouseover', () => {
+    container.classList.add('hover');
+});
+
+container.addEventListener('mouseout', () => {
+    container.classList.remove('hover');
+});
diff --git a/docs/template.md b/docs/template.md
@@ -12,6 +12,7 @@ tags:
 # Template
 
 这是一个标准模板
+
 this is a stander template
 
 <!-- more -->
diff --git a/docs/test.md b/docs/test.md
@@ -12,43 +12,18 @@ tags:
 Just a page for testing
 <!-- more -->
 
-The HTML specification
-is maintained by the W3C.
+# 图片翻转效果
 
-*[HTML]: Hyper Text Markup Language
-*[W3C]:  World Wide Web Consortium
+下面是一个支持图片翻转的 HTML 示例，直接在 Markdown 中嵌入代码。
 
+# 图片翻转效果
 
+<figure markdown="span">
+  ![Image title](./assets/images/logo_noBG_circle.png){ width="300" }
+  <!-- <figcaption>Image caption</figcaption> -->
+</figure>
 
-``` yaml
-theme:
-  features:
-    - content.code.annotate # (1)!
-```
-
-1.  :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
-    text__, images, ... basically anything that can be written in Markdown.
-
-
-
-```` markdown title="Code block with highlighted line range"
-``` py hl_lines="3-5"
-def bubble_sort(items):
-    for i in range(len(items)):
-        for j in range(len(items) - 1 - i):
-            if items[j] > items[j + 1]:
-                items[j], items[j + 1] = items[j + 1], items[j]
-```
-````
-
-<div class="result" markdown>
-
-``` py linenums="1" hl_lines="3-5"
-def bubble_sort(items):
-    for i in range(len(items)):
-        for j in range(len(items) - 1 - i):
-            if items[j] > items[j + 1]:
-                items[j], items[j + 1] = items[j + 1], items[j]
-```
-
-</div>
+<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>
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -1,5 +1,5 @@
 site_name: 黯然's Blog
-site_url: https://lvista.vercel.app/
+site_url: https://lvista.site/
 repo_url: https://github.com/Lvista/Lvista.github.io
 repo_name: Lvista.github.io
 edit_uri: edit/main/docs/
@@ -90,20 +90,17 @@ plugins:
       tags_file: tags.md
 
 nav:
-  - Home: index.md
-  - About: about.md
-  - AzurLane:
+  - 🏠Home: index.md
+  - 😎About: about.md
+  - 🌊AzurLane:
       - azurLane/index.md
-  - Dict: Doc_skill.md
-  - Test: test.md
+  - 📖Dict: Doc_skill.md
+  - 🛠️Test: test.md
   - Template: template.md
-  - Anime: anime_ngnl.md
+  - 🖼️Anime: anime_ngnl.md
   - Blog:
       - blog/index.md
 
-extra_css:
-  - stylesheets/extra.css
-
 extra:
   social:
     - icon: fontawesome/brands/bilibili
@@ -179,3 +176,7 @@ markdown_extensions:
 
 extra_javascript:
   - javascripts/feedback.js
+
+extra_css:
+  - stylesheets/extra.css
+  - css/custom.css