shenliyang / hexo-theme-snippet

Snippet 简洁而不简单,也许是一款你寻找已久的hexo主题
https://snippet.shenliyang.com/
MIT License
1.09k stars 208 forks source link

图片的根目录到底在哪里呢? #106

Closed KLordy closed 5 years ago

KLordy commented 5 years ago

文档里设置图片的时候写的都是相对路径,我在设置打赏二维码的时候试了绝对路径不行,相对路径也不知道根目录是哪里开始,尝试了用相对路径并在各级目录下建立img文件夹放图片都无法定位到图片位置。。。

EscapeLife commented 5 years ago

@KLordy 👇👇👇👇

~/xxx/xxx/xxx/themes/snippet/source/img(master) » ll                                                                                                                                                                                                                                 escape@Escapes-MacBookPro
total 696
-rw-r--r--  1 xxx  staff    96K Sep  9 11:14 avatar.png
-rw-r--r--  1 xxx  staff   3.5K Sep  9 11:14 branding.png
-rw-r--r--  1 xxx  staff    86K Sep  9 11:14 head-img.jpg
-rw-r--r--  1 xxx  staff    83K Sep  9 11:14 loading.gif
-rw-r--r--@ 1 xxx  staff    61K Sep 15 18:15 reward-wepay.png
-rw-r--r--  1 xxx  staff   2.2K Sep 11 23:10 timeline-clock.gif
-rw-r--r--  1 xxx  staff   366B Sep  9 11:14 timeline-dot.gif
-rw-r--r--  1 xxx  staff    43B Sep  9 11:14 timeline.gif
KLordy commented 5 years ago

@EscapeLife 谢谢,不过我把图片存到了xxx/themes/snippet/source/img下,然后分别尝试了:wepay: './source/img/wepay.jpg' 和 wepay: './img/wepay.jpg',还是无法定位到图片。。。 是我哪里配置不对么?

EscapeLife commented 5 years ago

@KLordy 其实你多看看就知道 ☺️

KLordy commented 5 years ago

@EscapeLife 谢谢呢,下面是我安装Hexo和更换主题的详细步骤: $ cd /home/admin/tools $ mkdir hexo $ cd hexo $ npm install hexo-cli -g $ hexo init blog $ cd blog && npm install 安装玩hexo,然后更换主题: $ cd /home/admin/tools/hexo/blog $ git clone git://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet $ npm i hexo-renderer-ejs hexo-renderer-less hexo-deployer-git -S 跳过主题部署1-3步: $ cd /home/admin/tools/hexo/blog/themes/hexo-theme-snippet $ vim _config.xml # 修改打赏处地址为‘../img/wepay.jpg’ $ cd /home/admin/tools/hexo/blog/themes/hexo-theme-snippet/source/img 通过rz -e上传图片到img路径下 $ cd /home/admin/tools/hexo/blog && vim _config.xml #修改themes:hexo-theme-snippet $ hexo clean && hexo g && hexo s 启动成功,但是查看还是没有加载到图片。。但是如果把图片地址设置为网图链接是OK的,所以应该还是路径设置不对吧,但是我就是按照你们说的设置的呀,仔细看了很久都没解决,主要这里很不和谐的是绝对路径为啥不支持呢。。。☺️

shenliyang commented 5 years ago

请参照 #39

KLordy commented 5 years ago

@shenliyang 十分感谢,问题解决了!不过我是按照 #39 里的在_config.xml中填的http://ip:4000/img/wepay.jpg 才搞定的,但是首页的操作文档中写的是../img/wepay.jpg,不是很确定是因为自己的问题还是哪里的问题。如果不是个例问题建议考虑把操作文档这块配置部分给完善修改一下吧~

autismbug commented 5 years ago

@shenliyang 十分感谢,问题解决了!不过我是按照 #39 里的在_config.xml中填的http://ip:4000/img/wepay.jpg 才搞定的,但是首页的操作文档中写的是../img/wepay.jpg,不是很确定是因为自己的问题还是哪里的问题。如果不是个例问题建议考虑把操作文档这块配置部分给完善修改一下吧~

./img 或者 ../img 是相对路径,想确认为何图片加载不到的原因,很简单,就是直接去服务端看你最终部署的页面的目录结构是什么样的。

赞赏功能是在文章页面展示的,所以你要找到文章的路径,会发现,路径是日期,比如 2019/03/18/文章名/index.html 。到这里大家就明白了,hexo 其实是将 md 文件最终转成了 html 文件,上面相对路径用到的当前目录 . 或者上级目录 .. 相对于2019/03/18/文章名/index.html 这么多级来说,肯定没到达 img 所在的目录,自然资源定位失败。

那么,该怎么去定位这个图片资源呢,你说的用 http://ip:4000/img/wepay.jpg 这种 url 其实有点多余了,因为访问的是本地的资源,不需要用 http 网络协议去访问,有点绕。可以直接使用绝对路径,绝对路径的根目录,就是 img 所在目录,所以可以直接用 /img/wepay.jpg 就可以了。

希望能解决你的困惑。