Posted Updated 博客编写记录

博客编写技巧

记录一些博客的编写技巧

折叠代码段

在md头中添加设置

1
2
3
article:
    highlight:
            fold: folded

eg:

头部更改 效果

图片并列排版

在页面模板themes > icarus > source > css > custom.styl中添加以下代码:

1
2
3
4
5
6
7
8
9
.same-height {
    max-height: 5000px; /* 图片尽量紧密排列 */
    width: auto; /* 自动调整宽度 */
    object-fit: contain; /* 确保图片比例不变形 */
    margin-right: 20px; /* 图片之间的间距 */
}
.same-height:last-child {
    margin-right: 0; /* 最后一个图片去掉右边距 */
}

默认为同一排中的图片尽量大,尽量密排列
若想针对某页单独更改图片排版,在页面中加入以下代码

1
2
3
4
5
6
7
8
<style>
    .same-height {
        max-height: 5000px; /* 期望高度 */
        width: auto; /* 自动调整宽度 */
        object-fit: contain; /* 确保图片比例不变形 */
        margin-right: 20px; /* 图片之间的间距 */
    }
</style>

在用户代码段中添加以下代码:

同时,设置markdown自动补齐(editor.tabCompletion)为on:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
       "Image Container": {
       "prefix": "img_mutiple",
       "body": [
           "<div style=\"display: flex; justify-content: center; align-items: center;\">",
           "    <img class=\"same-height\" src=\"$1\" alt=\"\">",
           "    <img class=\"same-height\" src=\"$2\" alt=\"\">",
           "</div>",
           ""
	],
       "description": "Insert an image container with two images and CSS for same height."
   },
"Image single": {
       "prefix": "img_single",
       "body": [
           "<div style=\"display: flex; justify-content: center; \">",
           "    <img style=\"max-height: 300px;  width: auto; object-fit: contain; margin-right: 20px;\" src=\"$1\" alt=\"\">",
           "</div>",
           ""
	],
       "description": "Insert an image container with two images and CSS for same height."
   }

在setting.json中插入以启用代码段预览:

1
2
3
4
5
6
7
"[markdown]":{
    "editor.quickSuggestions": {
        "other": "on",
        "comments": "on",
        "strings": "on"
    }
},
  • 图片最大为min(原始大小,能保持并列的最大值)

在添加图片时,使用img补全,或在以下代码中插入链接

1
2
3
4
5
6
7
8
9
10
11
<div style="display: flex; justify-content: center; align-items: center;">
    <img class="same-height" src="" alt="">
    <img class="same-height" src="" alt="">
</div>


<div style="display: flex; justify-content: center; align-items: center;">
    <img style="max-height: 300px;  width: auto; object-fit: contain; margin-right: 20px;" src="" alt="">
</div>


justify-content 为水平方向对齐 ,align-items为竖直方向对齐

置顶

头部更改

top值越大,越靠前

Comments

Follow

Catalogue

×