hexo change folder structure when generate static files

Question

First of all, thanks Hexo. Here is my question:

I set post_asset_folder to true in the Hexo configuration file. Then I run:

$ hexo new first.

then:

$ ls source/_posts/

first/ first.md hello-world.md

I added a pic named pic.png into source/_posts/first and wrote something in source/_posts/first.md like the following:

title: first

date: 2015-06-16 13:42:29

tags:

---

picture blow ^_^

![pic](first/pic.png)

Then:

$ hexo g

$ hexo s

I open http://0.0.0.0:4000/, but i coundn't see the content of pic.png.

I checked the folder public/2015/06/16/first/. I found there is some diffrience between folder public/2015/06/16/ and folder source/_posts/.

1. structure of folder public/2015/06/16/

.
└── public/2015/06/16/
    ├── first
    │   ├── pic.png
    │   └── first.md
    └── hello-world
        └── hello-world.md

2. structure of folder source/_posts/

.
└── source/_posts/
    ├── first
    │   ├── first
    │   │   └── pic.png
    │   └── first.md
    └── hello-world
        └── hello-world.md 

How can i unify the path format that i could get same path in markdowm and index.html.

Answer 1

in your post, just use pic.png, but not first/pic.png

hexo will put the files in asset folder with html file together

Answer 2

This is not the right way to create post with photos. Make that post_assets_folder is set to true and follow these steps :
1. Run hexo new post "YOUR TITLE" (a folder YOUR-TITLE and a file YOUR-TITLE.md are created in source/_posts)
2. Place your photos in source/_posts/YOUR-TITLE folder
3. To link photos in a post, you have to use relative url, so your url will be directly the title of your photos (e.g: pic.png)

Answer 3

The directory structure in the question is incorrect.

Here are my steps:

1. create a post:

   hexo new first
   

2. modify the post' Markdown file:

   vim source/_post/first.md
   

   content of first.md:

   title: first
   
   date: 2015-06-16 13:42:29
   
   tags:
   
   ---
   
   picture blow ^_^
   
   ![pic](first/pic.png)
   

3. add image pic.png to the source/_post/first folder

4. now the structure of source directory looks like this:

   - source
       `- _posts/
           `- first
               `pic.png
           `- first.md
           `- hello-world.md
   

5. run hexo g && hexo s

6. open http://0.0.0.0 in a browser; note that the pic.png is not shown

7. the public directory looks like this:

   - public
       `- 2015
           `- 06
               `- 16
                   `- first
                       `- index.html
                       `- pic.png
                   `- hello-world
                       `- index.html
   

From there you can see that the pic.png file was moved from the subdirectory first/first to first.

So in order to make it work, you need to refer to the file relative to the post directory (first, e.g. {% asset_img 'pic.png' %} should do the trick).

Answer 4

in hexo 3 the recommended way to reference a asset image is by tag plugin, rather than markdown. Check the docs

{% asset_img "fudan-advanced-math-01-01.PNG"%} 
![](fudan-advanced-math-01-01.PNG) // doesn't work well

Answer 5

You can (sadly) not display an image in your markdown editor of choice and the rendered HTML file. To make it work in in the rendered version, you have to address it like this: ![](cat.jpg).

1. Set post_asset_folder: true in _config.yml
2. Create new post with hexo new post "Some New Post"
3. Place image in source/_posts/Some-New-Post/, e.g. source/_posts/Some-New-Post/cat.jpg
4. Display image in post with ![](cat.jpg)