tunan's blog

前言

继半个月前的博客折腾#04-功能大升级后，最近两周又对博客进行了升级，这次升级的主要内容是对整个博客网站的UI效果升级。

GitHub 地址：here-tunan/tunan-blog

我的博客地址：tunan's blog

🎉 首页UI的升级

1️⃣ 欢迎语👋添加动态效果

2️⃣ 欢迎语下方新增简短的个人描述

⚙️Backend Engineer
🚀Full-Stack Explorer
💡Open Source Enthusiast

刷新页面时会依次弹出。

3️⃣ 新增周报模块：原先只有 Latest Blogs模块，现在新增了 Recent Weekly模块。

4️⃣ 修改 View all 按钮，原先的静态按钮改成了具有一定动态效果的按钮。

🎉 文章列表UI的修改

1️⃣ 改变标签的位置，从左边移动到右边了

2️⃣ 改变列表的样式，间隔、颜色看起来更舒服了

🎉 Markdown 文章内容渲染的升级

1️⃣ 右侧的Content（TOC）增加了一些动态的选中效果，调整了间隔

2️⃣ 文章和标题的字体换成更好看的霞鹜文楷字体

3️⃣ 优化了引用块的展示，左上角增加了一个半透明的引号标记

这是一个引用块，巴拉巴拉...

4️⃣ 优化了超链接的样式，左边增加了一个↗️箭头的样式，和鼠标悬停时的效果

这是我的博客首页，欢迎点击右上角的Discord或者GitHub来找我联系。

5️⃣ 优化了间隔线的样式，蓝色的渐变色彩和合适的上下文间隔距离。见下面👇的这条线

6️⃣ 标题下方的下划线，增加渐变效果

7️⃣ 代码块样式，上方增加一个渐变色的边框

/** markdown style **/
/** 引入霞鹜文楷字体 **/
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');

/** 中英文混排字体优化 **/
.markdown-body {
    font-family: "LXGW WenKai Screen", "LXGW WenKai", -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", 
                 "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", 
                 "WenQuanYi Micro Hei", sans-serif;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

/* 英文段落优化 */
.markdown-body p, 
.markdown-body li {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-word;
    overflow-wrap: break-word;
}

8️⃣ 表格样式

我是表头	我也是	我才是
完美的一次UI展示	驴唇不对马嘴的表格	只是用来展示而已
检查一下你的精神状态吧	如何做一个高能量的人	兰州拉面就是美食
Vibe Coding 让我丧失了写代码的了	多吃沙拉多吃沙拉	如何成为一个羽毛球高手

🎉 后台新增Devices 和 Apps 的管理模块

🏠 为了开源：同时兼容Mysql和sqlite

我这个博客一开始是基于Sqlite3的，因为我的服务器很小，只能用Sqlite3这种轻量级的。但为了后续有朋友们需要mysql的支持，提前做好准备！！！

只需要在配置文件中进行配置，就能一键切换数据库。See Readme

总结

首页：增加了动态欢迎语、个人简介的动态弹出效果、新的“周报”模块，并将静态按钮改为了动态效果按钮。
文章列表页：调整了标签位置和列表样式，使其在视觉上更舒适。
文章内容页：对Markdown渲染样式进行了深度美化，包括右侧目录（TOC）的动态效果、更换为“霞鹜文楷”字体、优化了引用块、超链接、分割线、标题下划线、代码块和表格的样式。
后台功能增强：新增了“Devices”和“Apps”的管理模块。
技术架构改进：为了方便他人使用和部署，项目增加了对 MySQL 数据库的支持，现在可以与 SQLite 一键切换，增强了项目的开源友好度。

All commits:

最后，如果你喜欢我的开源博客项目，请帮我点点GitHub上的Star。最近也在想要给博客做一个友链功能，如果你觉得你的博客还不错，同时你也一直在坚持创作，请务必在评论区留言！谢谢大家的观看。

博客折腾#05-UI升级🎨

前言

🎉 首页UI的升级

🎉 文章列表UI的修改

🎉 Markdown 文章内容渲染的升级

🎉 后台新增Devices 和 Apps 的管理模块

🏠 为了开源：同时兼容Mysql和sqlite

总结