一、注册
首先进入博客园官网注册账号，然后在我的博客那里申请，等待通过即可。
二、选择合适的编辑器
写博文通常采用Markdown。Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML(或者HTML)文档。许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。
个人一直使用Typora(新版本收费)。但网上也有在vscode安装博客园Cnblogs客户端插件写博客。也可以使用VNote，还有一些国产的MD编辑器也可以。但最重要的问题是图片上传图床是否便捷，有好方法的请留言。
三、如何编辑md
一级标题到六级标题、代码块、公式块、有序列表、无序列表、表格、链接、图片等。
建议参考编辑器的快捷键，也可以进入源代码模式了解源码。
markdown源码效果对比，快速入门
四、博客布局
左侧宽栏
文章内容
不同的模板适合不同的内容。
如：
概念介绍模板：目录、简介（概念，目的，用途等）、代码演示、总结、参考文献
问题解决模板：目录、问题描述、核心原因、解决步骤、总结、参考文献
编码技巧模板：目录、应用场景、传统解决方案、存在问题、新的解决方案、优缺点、参考文献
记录BUG模板：项目场景、问题描述、原因分析、解决方案、参考文献
写作要点（杂文除外）：
（1）文章避免太长；
（2）不要带入个人情感；
（3）使用书面语，避免口水话；
（4）排版清晰；
右侧栏
内容分类：我的标签：(按技术大类/阶段归纳)，如：
前端基础(文章数目)
java基础总结(12)
Javascript学习总结(27)
Maven学习总结(12)
MySQL学习总结(9)
NginX学习总结(8)
杂文总结(12)
内容分类：我的随笔：(按细粒度技术归纳)，如：
jQuery(文章数目)
javascript(10)
HTML5(23)
CSS3(20)
JavaSe(15)
javaWeb(10)
杂文(12)
时间分类：随笔档案：(按时间归纳)，如：
2023年2月(1)
2022年6月(1)
2022年5月(1)
更多
阅读排行榜
推荐排行榜
最新评论
博客园代码折叠实现
借助HTML5的detail标签就可以轻松实现
在summary标签之间填写标题，在summary之后加入要折叠的内容
注意：在折叠内容前后都换一行。但建议前后都换两行，换一行有时出问题，可能是和博客园的一些样式冲突。
```
代码内容
```
五、博客相关配置
第一、我的博客->管理>设置->申请JS权限
第二、博客皮肤，选择Foresightedness
第三、代码高亮，选择prismjs，代码字体Dank Mono，勾选显示行号，浅色模式主题prism-duotone-light，深色模式主题prism-vsc-dark-plus
第四、博客侧边栏公告
第五、页面定制 CSS 代码，不必禁用模板默认css
页面定制 CSS 代码（展开代码）
/*重置属性*/
*{margin: 0; /*外边距属性*/
padding: 0; /*内边距属性*/
-moz-box-sizing: border-box; /* 火狐浏览器 */
-webkit-box-sizing: border-box; /* webkit内核浏览器 */
box-sizing: border-box; /*内边距和边框是在元素设置的宽度和高度之内进行绘制的*/
}
body{font-size: 16px;font-family: "微软雅黑";color: #222222;} /*字体，大小，颜色*/
body{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
} /*禁止选中字体*/
b{font-weight: normal;} /*粗体重置，便于当作普通标签用CSS美化*/
i{font-style: normal;} /*斜体重置，便于当作普通标签用CSS美化*/
a,a:hover,a:active{text-decoration: none;color:#222222;} /*鼠标点击状态重置*/
input,textarea,select{outline: none;} /*去掉点击文本框时，轮廓被选中的状态*/
img{border: none;vertical-align: top;} /*图片边框重置，垂直对齐方式顶部对齐*/
li{list-style: none;} /*列表标志重置*/
.fl{float: left;} /*左浮动*/
.fr{float: right;} /*右浮动*/
.cl{clear: both;} /*清除两侧浮动*/
.clearfix::after{ /*伪类方法，防止高度塌陷*/
content: ""; /*添加空内容*/
display: table; /*转成表格元素*/
clear: both; /*清除两侧浮动*/
}
/*代码折叠美化*/
summary {
background-color: antiquewhite; /*背景色*/
padding: 15px; /*外边框*/
border-radius: 15px; /*圆角*/
}
/*去除广告美化*/
#cnblogs_ch, #cnblogs_c1, #under_post_card1, #under_post_card2, #HistoryToday {
display: none;
}
/*添加的两个按钮样式*/
.addButton { /* 按钮美化 */
float:right;
width: 45%; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #F9F9F9; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
color: black; /* 字体颜色 */
font-size: 18px; /* 字体大小 */
}
.addButton:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #F0F0F0;
}
第六、页首Html代码
页首Html代码（展开代码）
第七、页脚Html代码
页脚Html代码（展开代码）
第八、其它设置
勾选允许 MetaWeblog 博客客户端访问。
六、图片上传问题解决
教程1参考：https://www.cnblogs.com/gered/p/14736136.html
github：https://github.com/dongfanger/pycnblog
教程2参考：
https://www.cnblogs.com/stulzq/p/9043632.html
https://www.cnblogs.com/stulzq/p/9217301.html
图片演示：
参考文献
https://www.cnblogs.com/climy/p/10787495.html
https://editor.csdn.net/md/
https://www.cnblogs.com/xdp-gacl/p/3718879.html
https://www.cnblogs.com/esofar/p/cnblogs-theme-silence.html
https://www.cnblogs.com/df888/p/11826480.html
https://github.com/dongfanger/pycnblog
https://www.cnblogs.com/gered/p/14736136.html
https://www.cnblogs.com/chuyiwang/p/15736296.html
https://blog.csdn.net/qq_14993591/article/details/123918111