asandikci.com/web
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

Add image CDN tutorial

Browse source
This commit is contained in:
Cotes Chung 2021-01-09 22:33:49 +08:00
parent 66a132c462
commit 93fcf50131
1 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
_posts/2019-08-08-write-a-new-post.md
View file

@ -118,22 +118,44 @@ By default, the image is centered, but you can specify the position by using one
Image will be left aligned in below sample:
```markdown
![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
![Desktop View](/assets/img/sample/mockup.png){: .normal}
```
- **Float to the left**
```markdown
![Desktop View](/assets/img/sample/mockup.png){: width="240" .left}
![Desktop View](/assets/img/sample/mockup.png){: .left}
```
- **Float to the right**
```markdown
![Desktop View](/assets/img/sample/mockup.png){: width="240" .right}
![Desktop View](/assets/img/sample/mockup.png){: .right}
```
> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
**Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
### CDN URL
If you host the images on the CDN, you can save the time of repeatedly writing the CDN url by assigning the variable `img_cdn` of `_config.yml` file:
```yaml
img_cdn: https://cdn.com
```
Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
For instance, when using images:
```markdown
![The flower](/path/to/flower.png)
```
The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
```html
<img src="https://cdn.com/path/to/flower.png" alt="The flower">
```
## Pinned Posts