search

jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
7.11k stars 1.28k forks source link

因部分Markdown导致图片不显示 #129

Closed Coolkkmeat closed 4 years ago

Coolkkmeat commented 4 years ago

I want to create a new issue

Butterfly Information

Butterfly Version: dev分支最新

Hexo Version: 4.0.0

Platform: Windows10

Browser: Chrome

Editor: Visual Studio Code

Expected behavior

图片正常显示

Actual behavior

图片没有显示

Steps to reproduce the behavior

我在编写文章的时候，同时用hexo s在浏览器中查看博客。 突然发现图片无法显示，如图： TIM截图20200216024858

最终我通过增删文字发现了出问题的位置。然后将这一部分代码块删除，图片就可以正常显示了： TIM截图20200216024929 这个问题很奇怪，只要是将这块代码放在此文章里，就会无法显示图片了。 然后我又尝试了一下landscape主题，图片正常显示。

jerryc127 commented 4 years ago

發一下package.json

Coolkkmeat commented 4 years ago

發一下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": "4.1.1" }, "dependencies": { "hexo": "^4.0.0", "hexo-browsersync": "^0.3.0", "hexo-deployer-git": "^2.1.0", "hexo-generator-archive": "^1.0.0", "hexo-generator-category": "^1.0.0", "hexo-generator-index-pin-top": "^0.2.2", "hexo-generator-tag": "^1.0.0", "hexo-renderer-ejs": "^1.0.0", "hexo-renderer-marked": "^2.0.0", "hexo-renderer-pug": "^1.0.0", "hexo-renderer-stylus": "^1.1.0", "hexo-server": "^1.0.0", "hexo-wordcount": "^6.0.1" } }

jerryc127 commented 4 years ago

你用默認主題能顯示？shell cmd 有這種寫法？

Coolkkmeat commented 4 years ago

你用默認主題能顯示？shell cmd 有這種寫法？

默认主题可以显示。 刚刚把所有shell cmd都删掉了，发现恢复正常了。 很奇怪，这里上面的代码块和下面的代码块也有用shell cmd的，可以正常显示，并且代码块也正常，如图： TIM截图20200216040200

但是不知道为什么唯独是因为这个代码块出现了问题。 有时候menu栏、TOC和工具栏（右下角齿轮简繁转换等）也会消失。 感谢您的帮助。

Coolkkmeat commented 4 years ago

在将shell cmd换为dos后，解决了这个代码块的问题。 可是新的问题又来了，这一次是这部分文本导致图片不正常显示的： 1 2 同样，删除这一块便可正常显示，但一旦带上这一块中任意一行便会出问题。

Coolkkmeat commented 4 years ago

0

看起来像是src的问题，不明白是如何影响到的这里的...

jerryc127 commented 4 years ago

你能否發你這篇文章的md給我測試 hwy0127@gmail.com

Coolkkmeat commented 4 years ago

你能否發你這篇文章的md給我測試 hwy0127@gmail.com

感谢。已发送，邮件标题：“#129 因部分Markdown导致图片不显示”

jerryc127 commented 4 years ago

你发给我的文件 文件引用的是/resources/xxxxx.jpg 文件夹确实resource 名字都不同 能显示图片才有问题

jerryc127 commented 4 years ago

把文件名改了resources 我这里显示正常

Coolkkmeat commented 4 years ago

你发给我的文件 文件引用的是/resources/xxxxx.jpg 文件夹确实resource 名字都不同 能显示图片才有问题

这个抱歉我刚刚是独立把这两个文件提出来的，所以文件夹名打错了...应该是resources。 我又反复确认了一下，确实没有... TIM截图20200216164837

jerryc127 commented 4 years ago

你console還爆了什麼錯誤 你的圖片沒觸發lazyload 不會有顯示的

Coolkkmeat commented 4 years ago

只报了这个。

A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.

我检查了一下butterfly.yml：

# 圖片懶加載
# https://github.com/aFarkas/lazysizes
lazyload:
  enable: true
...
lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js #懒加载

之后我检查了一下其他文章，均正常显示。但是，在其他文章编写的时候，也会有图片不显示的情况，也是这种问题，不过后来都删掉不兼容的地方了。 0 会不会是因为markdown格式的问题？

jerryc127 commented 4 years ago

你推上去 網址發給我 我看看

Coolkkmeat commented 4 years ago

解决了，是markdown规范的问题。比如标题和内容要空行、代码和内容也要空行、全局只能有一个#的标题。没想到如此严格。 我在VSCode里面安装了markdownlint插件，然后给我报了很多warning，修复好之后就恢复正常了。 抱歉耽误您的时间了。 非常感谢您的帮助。

jerryc127 commented 4 years ago

你解决了就行

Coolkkmeat commented 4 years ago

在上次解决之后，又陆续出现了这些问题，我很纳闷。 然后花时间研究了一下。 将lazyload改为false就可以了，看起来好像是懒加载的问题。 然后又hexo s了一下，又不显示了，恢复true之后，hexos，又显示了。 我又怀疑是hexo s的问题了。 于是过来特地补充一下。

Coolkkmeat commented 4 years ago

这次应该明白了，hexo s有时候会图片不显示，有时候会整个导航栏不显示。有时候就正常。hexo g之后是正常的。

Coolkkmeat commented 4 years ago

确定了，hexo s导致的图片/导航栏不显示。可以改用PHPStudy等运行环境。