Update posts
- Set width and height for images - Update the related tutorial
This commit is contained in:
Cotes Chung
parent
9359d6ef11
commit
d5413a954f
4 changed files with 25 additions and 24 deletions
|
|
@ -8,6 +8,8 @@ math: true
|
|||
mermaid: true
|
||||
image:
|
||||
src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
|
||||
width: 850
|
||||
height: 585
|
||||
---
|
||||
|
||||
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
|
||||
|
|
@ -97,39 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
|
|||
|
||||
- Default (with caption)
|
||||
|
||||
|
||||
{: width="972" height="589" }
|
||||
_Full screen width and center alignment_
|
||||
|
||||
<br>
|
||||
|
||||
- Specify width
|
||||
|
||||
{: width="400"}
|
||||
_400px image width_
|
||||
|
||||
- Shadow
|
||||
|
||||
{: .shadow width="90%" }
|
||||
{: .shadow width="1548" height="864" style="max-width: 90%" }
|
||||
_shadow effect (visible in light mode)_
|
||||
|
||||
<br>
|
||||
|
||||
- Left aligned
|
||||
|
||||
{: width="350" .normal}
|
||||
{: width="972" height="589" style="max-width: 70%" .normal}
|
||||
|
||||
<br>
|
||||
|
||||
- Float to left
|
||||
|
||||
{: width="240" .left}
|
||||
{: width="972" height="589" style="max-width: 200px" .left}
|
||||
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
|
||||
|
||||
<br>
|
||||
|
||||
- Float to right
|
||||
|
||||
{: width="240" .right}
|
||||
{: width="972" height="589" style="max-width: 200px" .right}
|
||||
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
|
||||
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -84,16 +84,21 @@ Then you can use it like other markdown language: surround the graph code with `
|
|||
|
||||
### Preview image
|
||||
|
||||
If you want to add an image to the top of the post contents, specify the url and alt attribute for the image:
|
||||
If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height` and `alt` for the image:
|
||||
|
||||
```yaml
|
||||
---
|
||||
image:
|
||||
src: /path/to/image/file
|
||||
width: 1000 # in pixels
|
||||
height: 400 # in pixels
|
||||
alt: image alternative text
|
||||
---
|
||||
```
|
||||
|
||||
Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this.
|
||||
|
||||
|
||||
### Image caption
|
||||
|
||||
Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
|
||||
|
|
@ -105,10 +110,10 @@ _Image Caption_
|
|||
|
||||
### Image size
|
||||
|
||||
You can specify the width (and height) of a image with `width`:
|
||||
In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
|
||||
|
||||
```markdown
|
||||
{: width="400"}
|
||||
{: width="700" height="400" }
|
||||
```
|
||||
|
||||
### Image position
|
||||
|
|
@ -145,7 +150,6 @@ The screenshots of the program window can be considered to show the shadow effec
|
|||
{: .shadow }
|
||||
```
|
||||
|
||||
|
||||
### 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:
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ Now publish your Jekyll site by:
|
|||
|
||||
2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) through _Settings_ → _Options_ → _GitHub Pages_:
|
||||
|
||||
|
||||
{: width="850" height="153" }
|
||||
|
||||
3. Visit your website at the address indicated by GitHub.
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ With your property created, you now need to set up Data Stream to track your blo
|
|||
|
||||
It should look like this:
|
||||
|
||||
|
||||
{: width="1086" height="542"}
|
||||
|
||||
Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ google_analytics:
|
|||
|
||||
When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
|
||||
|
||||
|
||||
{: width="616" height="557"}
|
||||
|
||||
## Setup Page Views
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
|
|||
|
||||
If everything went good, you'll get this screen:
|
||||
|
||||
|
||||
{: width="1366" height="354"}
|
||||
|
||||
### Create Google Analytics Query
|
||||
|
||||
|
|
@ -208,14 +208,14 @@ After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at
|
|||
|
||||
After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
|
||||
|
||||
|
||||
{: width="1100" height="126"}
|
||||
|
||||
|
||||
## Configure Chirpy to Display Page View
|
||||
|
||||
Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
|
||||
|
||||
|
||||
{: width="1210" height="694"}
|
||||
|
||||
Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue