search

Yue-plus / hexo-theme-arknights

明日方舟罗德岛阵营的 Hexo 主题，支持数学公式、Valine&Gitalk&Waline评论系统、Mermaid图表
https://arknights.theme.hexo.yue.zone/
MIT License
657 stars 71 forks source link

图片与图片之间怎么增加空行 #137

Closed nicemist closed 10 months ago

nicemist commented 10 months ago

在md文件中的空行，上传到Hexo不会解析 文字与文字的空行，我用的html‘标签<br>进行空行 图片与图片之间使用<br>不起作用

ToUNVRSe commented 10 months ago

可以使用 <br> 标签换行

nicemist commented 10 months ago

可以使用 <br> 标签换行

在图片与图片之间添加这个标签没用 我的问题里面写道了这个标签，但是被浏览器解析了

ToUNVRSe commented 10 months ago

hexo-render-pandoc 与 hexo-renderer-markdown-it 渲染均未复现，您可能需要提供更多信息

nicemist commented 10 months ago

1.新建文章 2.在对应的md文件李插入两张照片，照片为本机照片，不使用网络连接 3.在两张照片之间使用<br/>标签 4.hexo s 5.查看本地网站 6.查看两种照片之间是否有空行

ToUNVRSe commented 10 months ago

无法复现（另外 <br/> 是不标准的写法，应当写 <br>）

ToUNVRSe commented 10 months ago

看看 package.json ？

nicemist commented 10 months ago

我将所有的<br/>换成 <br>也不行 我的文章地址：https://blog.nicemist.xyz/2023/08/16/%E7%AB%AF%E5%8F%A3%E6%9C%8D%E5%8A%A1%E7%88%86%E7%A0%B4/

package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-browsersync": "^0.3.0",
    "hexo-deployer-git": "^4.0.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^3.0.0",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^1.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}
Yue-plus commented 10 months ago

图片之间添加空行可以直接在两张图片语句之间添加空行：

![罗德岛集结](https://ak.hypergryph.com/upload/images/20190228/118078295785f64dac736c6ade50bb76.jpg)

![罗德岛集结](https://ak.hypergryph.com/upload/images/20190228/118078295785f64dac736c6ade50bb76.jpg "罗德岛集结")

两张图片将分别解析为段落 <p>

image

请确保使用的主题为当前 main 分支的最新版本

如果这样不行的话请提供你的编辑界面截图

Yue-plus commented 10 months ago

如果想要控制两张图片之间的垂直间距的话可以使用 <div style="height: 233px;" />：

![罗德岛集结](https://ak.hypergryph.com/upload/images/20190228/118078295785f64dac736c6ade50bb76.jpg)

<div style="height: 233px;" />

![罗德岛集结](https://ak.hypergryph.com/upload/images/20190228/118078295785f64dac736c6ade50bb76.jpg "罗德岛集结")

image

nicemist commented 10 months ago 
<div style="height: 233px;" />

我找到原因 了 我用的图片方式是<img/>标签，当我使用![]()进行插入图片时，可以使用<br>进行图片与图片之间的空行 但是我还有一个问题：我使用<img>标签插入图片时，怎么在两张图片之间插入空行，上面的<div style="height: 233px;" />试过了，不行

Yue-plus commented 10 months ago

可以参考下列文档：

<img> 默认为内联（inline）元素，可以使用 CSS 来修改为块元素（blokc）：

<style>
    img { display: block; }
</style>

或者使用行内样式：

<img
    src="https://ak.hypergryph.com/upload/images/20190228/118078295785f64dac736c6ade50bb76.jpg"
    alt="罗德岛集结"
    style="display: block;"
/>

image