在博客园写第一篇博客，附带极简设置

一、注册

首先进入博客园官网注册账号，然后在我的博客那里申请，等待通过即可。

二、选择合适的编辑器

写博文通常采用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之后加入要折叠的内容

注意：在折叠内容前后都换一行。但建议前后都换两行，换一行有时出问题，可能是和博客园的一些样式冲突。

<details>
<summary>代码标题summary>


​```
代码内容
​```


details>

五、博客相关配置

第一、我的博客->管理>设置->申请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代码（展开代码）

<canvas id="c_n9" width="1920" height="990" style="position:fixed; top:0px; left:0px; z-index:-1; opacity:0.5;">canvas>
<script src="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js">script>


<canvas width="1600" height="900" style="position:fixed; left:0px; top:0px; z-index: 99999; pointer-events: none;">canvas>
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js">script>




<script type="text/javascript">
    //在标题后面添加两个按钮,大美女还是大帅锅
    $("#blogTitle div:first").append(`美女 帅锅`);
   //对应的CSS在上面
    var gender = 1;//男士1，女士2 ，默认男士
    var a_idx = 0;
    // 内容可以自定义
    // 社会主义核心价值观：富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善
    // var a = new Array("❤富强","❤民主","❤文明","❤和谐","❤自由","❤平等","❤公正","❤法治","❤爱国","❤敬业","❤诚信","❤友善");
    // 帅哥：
    // 英俊潇洒 玉树临风 翩翩少年 一表人才 义薄云天 铁骨铮铮 仪表堂堂 温文尔雅 气宇轩昂 风度翩翩 风流才子 才貌双绝            
    // 美女:
    // 窈窕淑女 举止娴雅 明眸皓齿 柳叶弯眉 冰肌玉骨 肤若凝脂 冰清玉洁 蕙心兰质 天生尤物 娇艳如花 嫣然一笑 千娇百媚 静如处女 动若脱兔 风姿绰约 妖娆动人
    var a1 = new Array("☆英俊潇洒","☆玉树临风","☆翩翩少年","☆一表人才", "☆义薄云天","☆铁骨铮铮","☆仪表堂堂","☆温文尔雅","☆气宇轩昂","☆风度翩翩","☆风流才子","☆才貌双绝");
    var a2 = new Array("❤窈窕淑女","❤举止娴雅","❤明眸皓齿","❤柳叶弯眉","❤冰肌玉骨","❤肤若凝脂","❤冰清玉洁","❤蕙心兰质","❤天生尤物","❤娇艳如花","❤嫣然一笑","❤千娇百媚","❤静如处女","❤动若脱兔","❤风姿绰约","❤妖娆动人");
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            //男女不同
            if(gender === 1){
                a = a1;
            }  else if(gender === 2){
                a = a2;
            }
            var $i = $("").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 9999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "font-size": "15px",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1000,
            function() {
                $i.remove();
            });
        });
    });
script>

第八、其它设置

勾选允许 MetaWeblog 博客客户端访问。

六、图片上传问题解决

教程参考：https://www.cnblogs.com/gered/p/14736136.html

github：https://github.com/dongfanger/pycnblog

图片演示：

参考文献

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