【Git pageb博客无法显示图片】MD文档中图片规格要求以及字体颜色调整

阅前说明

大家好👋，这是我为了修复我网页中无法显示图片和修改网页MD文档时总结的一些问题，并且提出了解决方案，因此具体的针对性需要看大家的需求来具体解决！

1.问题背景

因为之前的blog都是直接在CSDN上面写，当我创建这个网站后，我想把我之前的blog搬运部分到个人网站时，无法显示我的图片。但是在我的MD文档预览的时候是能够正常显示的，先是尝试了修改图片链接为本地图片，可能是文件目配置问题，还是无法实现（仍然是一个我不知道的bug哈哈）。后来百度了解决方法，发现这个方法十分有用！！

• 利用传统的md语法引用网络图片，本地预览完全没问题，上传到git page之后。问题显示👇
  

2.解决方案

输入👇这个代码在你的MD文档中，图片插入换用html语法，添加referrerpolicy=“no-referrer”

<img src="https://img-blog.csdnimg.cn/df5e82281fd54cdb85f7ad6d75de2f65.png" alt='pic01' referrerpolicy='no-referrer'>

• 为了使我的图片能够显示的更好看，我会采用让他缩小并且在文章中处于居中的情况，代码如下👇

<div style="display: flex; justify-content: center; align-items: center;">
<img src="https://img-blog.csdnimg.cn/df5e82281fd54cdb85f7ad6d75de2f65.png" alt='pic01' referrerpolicy='no-referrer' style ="width:80%;height:80%; margin = auto">
</div>

缩小后的图片在水平和垂直方向上都居中显示，可以使用CSS的display和margin属性来实现。
在这个例子中，我们使用了一个<div>元素来包含图片，并将display属性设置为flex，justify-content属性设置为center，align-items属性设置为center，这样可以让图片在水平和垂直方向上都居中显示。
同时，我们还将图片的margin属性设置为auto，这样可以使图片在水平和垂直方向上都居中显示。

需要注意的是，以上代码中的height: 100vh;用于设置<div>元素的高度为视口高度，这样可以确保图片始终位于页面的中心位置.

3.修改字体颜色更美观

其实很简单的我们都知道就是直接使用color=“red”,blue, yellow等，但是我觉得这样显示出来有点不太美观，我想要自定义字体颜色，因此我们可以使用十六进制的方法。我发现了一个网页-CLike here🌟可以自动输出你想要的颜色的十六进制编码

MD文档代码编写如下👇

<font color = "#e66ce1">你的文本内容</font>

4.MD文档和CDSN文档的区别

问题：在我修复个人网页blog时候，发现MD文档需要手动来进行空行，而之前我在CSDN中的blog则不需要这样来实现空行效果

原因：

• Markdown语法中，段落之间需要用一个或多个空行来分隔。如果两个段落之间没有空行，它们将被解析为同一个段落，这可能会导致Markdown文档的排版出现问题。

• 需要注意的是，Markdown文档的解析和排版是由具体的Markdown解析器或渲染器实现的，不同的解析器或渲染器可能会有不同的行为。因此，在编写Markdown文档时，建议遵循Markdown语法规范，并添加适当的空行来分隔段落。

• CSDN使用的是与GitHub Flavored Markdown（GFM）类似的Markdown渲染引擎，因此在CSDN中，代码块也可以使用三个反引号（```）或三个波浪线（~~~）来表示，代码块前后不需要手动添加空行。

参考链接

01 无法显示图片的参考链接- Click🌟

02 十六进制的颜色生成网页- Click🌟