图片文字并列布局
抄的是自用短代码 & 零碎代码集合里的作业，感谢蛋卷！我需要做的修改只是添加fancybox锚点和给所有css后面加!important而已。
首先，在.md文件直接写html代码：
<div class="flex-container">
<div class="flex-text">
<p class="flex-start">第一行</p>
<p>第二行</p>
<p class="flex-end">最后一行</p>
</div>
<img data-fancybox src="http://image.url/" class="flex-image" />
</div>
然后，丢自定义css：
.flex-container {
display: flex!important;
align-items: flex-start!important;
margin: 15px 0!important;
}
.flex-image {
max-width: 350px !important; /* 或任意你想要的宽度 */
margin-left: 20px!important;
margin-top: 0!important;
margin-bottom: 0!important;
}
.flex-text {
flex: 1!important;
}
.flex-text p {
margin-bottom: 1.25em!important;
}
/* 以下代码是我自行添加的，为确保第一行前面和最后一行后面不会多出奇怪的空白 */
.flex-start {
margin-top: 0 !important;
}
.flex-end {
margin-bottom: 0 !important;
}
/* 响应式设计 */
@media (max-width: 600px) {
.flex-container {
flex-direction: column!important; /* 垂直排列 */
}
.flex-image {
margin-left: 0!important; /* 取消左边距 */
margin-top: 20px!important; /* 增加上边距，分隔内容 */
max-width: 100%!important; /* 使图片宽度自适应容器 */
}
}
效果如下：
请看！右图（手机端上是下图）是蔓酱在圣诞节给我画的超绝无敌可爱的红脸猫形态的小肥！（之完全不红版）
小猫现已绝赞入住博客搜索弹窗！只要在电脑和平板上搜索博客就能纵享小猫陪伴！（即日起小狗搜索员永久下岗，辛苦了！）
机不可失，童叟无欺！欢迎体验！
博客年终总结批注窗口
是2025年终总结博客（在黏贴链接的时候，发现我年终博客的链接格式写错了……）上的批注窗口样式存档！因为代码堆得很乱，所以如果要参考的话比起抄我的不如直接让GPT老师再写一个。
写在md文件里的基本html框架：
<div class="journal-card theme4">
<div class="jc-window-header">
<span class="jc-window-title">标题</span>
<button class="jc-window-close" onclick="openWindow('noclose-window')">×</button>
</div>
<div class="jc-window-menu">
<span>File</span>
<span>Edit</span>
<span>View</span>
<span>Help</span>
</div>
<div class="jc-divider-full"></div>
<div class="jc-row">
<div class="jc-left">
<span class="jc-date4">January.7th</span>
<h3 class="jc-title">
<a href="/post/2025-jan-24th/">博客标题</a>
</h3>
<p>
目录
</p>
</div>
<div class="jc-right">
<h4>♠</h4>
<p>
批注内容
</p>
</div>
</div>
<div class="jc-row">
<div class="jc-left">
<span class="jc-date4">February.7th</span>
<h3 class="jc-title">
<a href="/post/2025-feb-18th/">下一个博客标题</a>
</h3>
<p>
又一个目录<br>
br标签分行
</p>
</div>
<div class="jc-right">
<h4>♠</h4>
<p>
批注
</p>
</div>
</div>
<div class="jc-footnote">
<span class="footnote-text">左下角尾注</span>
<div class="footnote-dots">
<span class="dot ten"></span>
<span class="dot eleven"></span>
<span class="dot twelve"></span>
</div>
</div>
</div>
自定义css，根据theme后面的序号区分了五种季节+马戏团的印象色，主题配色也是GPT写的，身为色盲的我做的只是饱和度上的微调。
但不知道为什么右下方的圆点没有办法按照theme序号改变颜色，于是就这么one two three four地一个个编了下去……（？
/*年终总结*/
.journal-card {
position: relative;
background: #f9f1f5;
border: 2px solid #bba6bd;
border-radius: 6px;
padding: 20px 20px 40px;
margin: 22px 0;
box-shadow: 0 4px 5px rgba(0,0,0,0.5);
font-family: 'Press Start 2P', monospace;
color: #eee;
}
/* 窗口标题栏 */
.jc-window-header {
display: flex;
justify-content: center; /* 标题居中 */
align-items: center;
position: relative; /* 为关闭按钮定位 */
background: #f4d9e3;
padding: 6px 10px; /* 增加高度 */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin: -20px -20px 0; /* 覆盖卡片上边缘 */
font-size: 1rem; /* 字体增大 */
font-weight: bold;
color: #8a3c6b;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4);
}
/* 标题 */
.jc-window-title {
font-weight: bold;
font-size: 1.3rem; /* 可微调 */
font-family: "ipxs","Product Sans",sans-serif !important;
}
/* 关闭按钮 - 右上角 */
.jc-window-close {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #d69bb3;
border: none;
color: #fff;
font-weight: bold;
cursor: pointer;
width: 22px; /* 略大一些 */
height: 22px;
border-radius: 50%;
line-height: 20px;
text-align: center;
padding-left: 7.5px;
font-family: "ipxs","Product Sans",sans-serif !important;
}
/* 窗口菜单栏 */
.jc-window-menu {
display: flex;
font-family: "ipxs","Product Sans",sans-serif !important;
gap: 24px;
font-size: 0.8rem;
background: #eec3d3;
padding: 4px 10px; /* 增加高度 */
margin: 0 -20px 12px;
color: #8a3c6b;
border-bottom: 1px solid #caa3b4; /* 模拟分隔线 */
padding-left: 10px;
}
/* 每行 row */
.jc-row {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
position: relative;
}
/* 左栏 padding 分开设置 */
.jc-row .jc-left {
flex: 1;
padding-top: 45px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 20px;
}
/* 右栏 padding 分开设置 */
.jc-row .jc-right {
flex: 1;
padding-top: 25px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 5px;
margin-top: 8px;
}
/* 连续虚线 */
.jc-divider-full {
position: absolute;
top: 85px;
bottom: 25px;
left: 50%;
width: 3px;
border-left: 3px dashed #caa3b4;
}
/* 左栏文字 */
.jc-left p {
font-family: "ipxs","Product Sans",sans-serif !important;
color: var(--color-font);
line-height: 1.6;
margin: 0;
}
/* 右栏文字 */
.jc-right p {
font-family: "write","ZCOOL KuaiLe", cursive, sans-serif;
color: var(--color-font);
line-height: 1.6;
margin: 0;
font-weight: 600!important;
}
.jc-right h4 {
margin: 0 0 8px 0;
font-size: 1rem;
color: #b78092!important;
font-family: "ipxs","Product Sans",sans-serif !important;
}
/* 保留原本标题链接样式 */
.jc-title a {
color: #8aa2d3!important;
border-bottom: 2px solid rgba(58, 111, 175, 0.4)!important;
padding-bottom: 2px!important;
line-height: 1.65!important;
text-decoration: none;
font-size: 1.55rem!important;
}
.jc-title a:hover {
color: #87aac9!important;
border-bottom: 2px solid rgba(94, 138, 192, 0.4)!important;
}
/* 尾注 */
.jc-footnote {
position: absolute;
left: 15px; /* 左下角文字起点 */
right: 15px; /* 右下角圆点位置 */
bottom: 10px;
display: flex;
justify-content: space-between; /* 左右分开 */
align-items: center;
font-size: 0.85rem;
color: var(--color-font);
}
/* 左下文字 */
.jc-footnote .footnote-text {
font-family: "ipxs","Product Sans",sans-serif !important;
}
/* 右下圆点容器 */
.jc-footnote .dots {
display: flex;
gap: 8px; /* 圆点间距 */
}
/* 圆点样式 */
.jc-footnote .dot {
width: 13px;
height: 13px;
border-radius: 50%;
display: inline-block;
}
/* 小屏上下布局 */
@media (max-width: 760px) {
.jc-row {
flex-direction: column;
}
.jc-divider-full {
display: none;
}
}
/*秋天*/
/* theme2 · 低饱和柔和橙 */
.journal-card.theme2 {
background: #fff6eb;
border: 2px solid #d9a46d;
color: #76563a;
}
.journal-card.theme2 .jc-window-header {
background: #ffe8c9;
color: #76563a;
}
.journal-card.theme2 .jc-window-title {
color: inherit;
}
.journal-card.theme2 .jc-window-close {
background: #d88d47;
color: #fff;
}
.journal-card.theme2 .jc-window-menu {
background: #f4d29c;
border-bottom: 1px solid #d9a46d;
color: #76563a;
}
.journal-card.theme2 .jc-divider-full {
border-left: 3px dashed #d9a46d;
}
.journal-card.theme2 .jc-right h4 {
color: #c96f55 !important;
}
/*夏天*/
/* 夏天（低饱和度版）*/
.journal-card.theme3 {
background: #f1f7f1;
border: 2px solid #a4cfa4;
color: #506450;
}
.journal-card.theme3 .jc-window-header {
background: #dcefdc;
color: #4e634e;
}
.journal-card.theme3 .jc-window-title {
color: inherit;
}
.journal-card.theme3 .jc-window-close {
background: #a4cfa4;
color: #fff;
}
.journal-card.theme3 .jc-window-menu {
background: #bcd5bc;
color: #4e634e;
border-bottom: 1px solid #a4cfa4;
}
.journal-card.theme3 .jc-divider-full {
border-left: 3px dashed #a4cfa4;
}
.journal-card.theme3 .jc-right h4 {
color: #7caf7c !important;
}
/*冬天*/
.journal-card.theme4 {
background: #f0f7ff;
border: 2px solid #8bb7d9;
color: #42586d;
}
.journal-card.theme4 .jc-window-header {
background: #d9ecff;
color: #42586d;
}
.journal-card.theme4 .jc-window-title {
color: inherit;
}
.journal-card.theme4 .jc-window-close {
background: #8bb7d9;
color: #fff;
}
.journal-card.theme4 .jc-window-menu {
background: #b4d4f0;
color: #42586d;
border-bottom: 1px solid #8bb7d9;
}
.journal-card.theme4 .jc-divider-full {
border-left: 3px dashed #8bb7d9;
}
.journal-card.theme4 .jc-right h4 {
color: #5f9dd0 !important;
}
/*马戏团*/
.journal-card.theme5 {
background: #f2f1f4;
border: 2px solid #4d4761;
color: #4d485f;
}
.journal-card.theme5 .jc-window-header {
background: #e3e1e9;
color: #4d485f;
}
.journal-card.theme5 .jc-window-title {
color: inherit;
}
.journal-card.theme5 .jc-window-close {
background: #4d4761;
color: #fff;
}
.journal-card.theme5 .jc-window-menu {
background: #bbb7c8;
color: #4d485f;
border-bottom: 1px solid #4d4761;
}
.journal-card.theme5 .jc-divider-full {
border-left: 3px dashed #4d4761;
}
.journal-card.theme5 .jc-right h4 {
color: #6a6581 !important;
}
/*右下圆点*/
.jc-footnote .dot.one {
background-color: #eec3d3;
}
.jc-footnote .dot.two {
background-color: #caa3b4;
}
.jc-footnote .dot.three {
background-color: #8a3c6b;
}
.jc-footnote .dot.four {
background-color: #d9a46d;
}
.jc-footnote .dot.five {
background-color: #c96f55;
}
.jc-footnote .dot.six {
background-color: #76563a;
}
.jc-footnote .dot.seven {
background-color: #a4cfa4;
}
.jc-footnote .dot.eight {
background-color: #7caf7c;
}
.jc-footnote .dot.nine {
background-color: #506450;
}
.jc-footnote .dot.ten {
background-color: #8bb7d9;
}
.jc-footnote .dot.eleven {
background-color: #5f9dd0;
}
.jc-footnote .dot.twelve {
background-color: #42586d;
}
.jc-footnote .dot.thirteen {
background-color: #bbb7c8;
}
.jc-footnote .dot.fourteen {
background-color: #6a6581;
}
.jc-footnote .dot.fifteen {
background-color: #4d485f;
}
/* 日期徽章，标题左上角，不影响布局 */
.jc-left .jc-date {
display: inline-block; /* 只包裹文字 */
position: absolute; /* 浮在标题左上角 */
top: 35px; /* 控制日期与标题的垂直距离，可调 */
left: 0; /* 对齐标题左侧 */
padding: 2px 6px;
color: #b78092;
border-radius: 3px;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
font-family: "ipxs","Product Sans",sans-serif !important;
z-index: 1;
}
.jc-left .jc-date3 {
display: inline-block; /* 只包裹文字 */
position: absolute; /* 浮在标题左上角 */
top: 35px; /* 控制日期与标题的垂直距离，可调 */
left: 0; /* 对齐标题左侧 */
padding: 2px 6px;
color: #7caf7c;
border-radius: 3px;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
font-family: "ipxs","Product Sans",sans-serif !important;
z-index: 1;
}
.jc-left .jc-date2 {
display: inline-block; /* 只包裹文字 */
position: absolute; /* 浮在标题左上角 */
top: 35px; /* 控制日期与标题的垂直距离，可调 */
left: 0; /* 对齐标题左侧 */
padding: 2px 6px;
color: #c96f55;
border-radius: 3px;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
font-family: "ipxs","Product Sans",sans-serif !important;
z-index: 1;
}
.jc-left .jc-date4 {
display: inline-block; /* 只包裹文字 */
position: absolute; /* 浮在标题左上角 */
top: 35px; /* 控制日期与标题的垂直距离，可调 */
left: 0; /* 对齐标题左侧 */
padding: 2px 6px;
color: #5f9dd0;
border-radius: 3px;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
font-family: "ipxs","Product Sans",sans-serif !important;
z-index: 1;
}
.jc-left .jc-date5 {
display: inline-block; /* 只包裹文字 */
position: absolute; /* 浮在标题左上角 */
top: 35px; /* 控制日期与标题的垂直距离，可调 */
left: 0; /* 对齐标题左侧 */
padding: 2px 6px;
color: #6a6581;
border-radius: 3px;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
font-family: "ipxs","Product Sans",sans-serif !important;
z-index: 1;
}
因为css实在是太长，我单独把它分出来放在/static/css目录下了，所以最后要记得在用到这个批注的博客里引用css。
今年年终总结右栏批注部分的手写体用的是猫啃写意体并在css里默认加粗，我个人对这个字体的可爱和易读程度都挺满意的！不过这个字体有一个很明显的缺点是字库不全or损坏，像“嗑cp”的“嗑”和“岚少”的“岚”都没法显示，如果还有下次年终批注环节的话，打算再找一个新的手写体。
<link rel="stylesheet" href="/css/year.css">
最终效果如下：
彩蛋：摆设的关闭按钮
想着要达到一种感谢大家来游玩我的年终总结的效果（？）所以就顺手做了！
关于博客弹窗的装修，可以参考■■Loading：《hugo装修日志09》■■，这个彩蛋就是在这个装修的基础上完成的，因此在这里只记录一下和窗口相关的html代码。
<!-- 假关闭 窗口 -->
<div class="window" id="noclose-window">
<div class="window-header">
<div style="display: inline-block;"> 哎呀，非常抱歉！ </div>
<button class="close-btn" onclick="closeWindow('noclose-window')">
<img src="https://img.naturaleki.one/lock/closebtn.png" />
</button>
</div>
<div class="scrollable-content" id="extra">
<p style="font-size: 22px; color: #8aa2d3;font-family: ipx; text-align: center;">这个关闭按钮好像是个摆设呢！</p>
<p style="font-size: 22px; color: #8aa2d3;font-family: ipx; text-align: center;">不过我的关闭按钮是真的噢(ฅ•ω•ฅ)♡</p>
<p style="font-size: 18px; color: #8aa2d3;font-family: ipx; text-align: center;">（为什么会有这个窗口呢，因为博主也经常会忍不住点一下(×_×)……）</p>
</div>
</div>
