hexo图片插入问题:在主页和文章详情页同时显示图片
设置静态文件根目录
_config.yml
中有个url
和root
参数
如果你部署的地址是http://yoursite.com/child
,需要设置下面两个参数。
1 | url: 'http://yoursite.com/child' // 部署的域名 |
设置资源文件夹
资源(Asset)代表 source
文件夹中除了文章以外的所有文件,例如图片、CSS、JS
文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在
source/images
文件夹中。然后通过类似于
![](/images/image.jpg)
的方法访问它们。
< !--more-->
文章资源文件夹
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将
config.yml
文件中的 post_asset_folder
选项设为
true 来打开。
1 | _config.yml |
当资源文件管理功能打开后,Hexo将会在你每一次通过
hexo new [layout] <title>
命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个
markdown
文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。
相对路径引用的标签插件 通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
1 | {% asset_path slug %} |
比如说:当你打开文章资源文件夹功能后,你把一个
example.jpg
图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法
![](/example.jpg)
,它将 不会
出现在首页上。(但是它会在文章中按你期待的方式工作)
正确的引用图片方式是使用下列的标签插件而不是 markdown :
1 | {% asset_img example.jpg avatar %} |
通过这种方式,图片将会同时出现在文章和主页以及归档页中。通过{% asset_img 图片名称 图片说明 %}