Specify the version of the images in the CDN

This commit is contained in:
Cotes Chung 2021-09-29 23:14:59 +08:00
parent 6a4169fc03
commit a400dc9501
7 changed files with 25 additions and 20 deletions

View file

@ -19,7 +19,7 @@
**[Live Demo →](https://chirpy.cotes.info)** **[Live Demo →](https://chirpy.cotes.info)**
[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info) [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/commons/devices-mockup.png)](https://chirpy.cotes.info)
</div> </div>
@ -159,7 +159,7 @@ Now publish your Jekyll site by:
2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving. 2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)
3. Visit your website at the address indicated by GitHub. 3. Visit your website at the address indicated by GitHub.

View file

@ -79,10 +79,10 @@ theme_mode: # [light|dark]
# will be added to all image (site avatar & posts' images) paths starting with '/' # will be added to all image (site avatar & posts' images) paths starting with '/'
# #
# e.g. 'https://cdn.com' # e.g. 'https://cdn.com'
img_cdn: '' img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5'
# the avatar on sidebar, support local or CORS resources # the avatar on sidebar, support local or CORS resources
avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg avatar: '/commons/avatar.jpg'
# boolean type, the global switch for ToC in posts. # boolean type, the global switch for ToC in posts.
toc: true toc: true

View file

@ -7,7 +7,7 @@ tags: [typography]
math: true math: true
mermaid: true mermaid: true
image: image:
src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png src: /commons/devices-mockup.png
width: 850 width: 850
height: 585 height: 585
--- ---
@ -99,34 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
- Default (with caption) - Default (with caption)
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" } ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
_Full screen width and center alignment_ _Full screen width and center alignment_
<br> <br>
- Shadow - Shadow
![Window shadow](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" } ![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
_shadow effect (visible in light mode)_ _shadow effect (visible in light mode)_
<br> <br>
- Left aligned - Left aligned
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal} ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
<br> <br>
- Float to left - Float to left
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left} ![Desktop View](/posts/20190808/mockup.png){: 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." "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> <br>
- Float to right - Float to right
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right} ![Desktop View](/posts/20190808/mockup.png){: 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." "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> <br>

View file

@ -124,7 +124,7 @@ Now publish your Jekyll site by:
2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving. 2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png){: width="850" height="153" } ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="850" height="153" }
3. Visit your website at the address indicated by GitHub. 3. Visit your website at the address indicated by GitHub.

View file

@ -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: It should look like this:
![google-analytics-data-stream](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"} ![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: 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 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
@ -49,7 +49,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. 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.
![google-analytics-realtime](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"} ![google-analytics-realtime](/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
## Setup Page Views ## Setup Page Views
@ -185,7 +185,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
If everything went good, you'll get this screen: If everything went good, you'll get this screen:
![superProxy-deployed](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"} ![superProxy-deployed](/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}
### Create Google Analytics Query ### Create Google Analytics Query
@ -210,14 +210,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. 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.
![superproxy-query](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png){: width="1100" height="126"} ![superproxy-query](/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
## Configure Chirpy to Display Page View ## 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. 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.
![superproxy-dashboard](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"} ![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: 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: Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:

View file

@ -19,7 +19,7 @@
**[线上体验 →](https://chirpy.cotes.info)** **[线上体验 →](https://chirpy.cotes.info)**
[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info) [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/commons/devices-mockup.png)](https://chirpy.cotes.info)
</div> </div>
@ -158,7 +158,7 @@ $ docker run -it --rm \
2. 回到 GitHub 上的仓库,选择标签 _Settings_ → 点击左侧导航栏的 _Pages__GitHub Pages_ 选择分支 `gh-pages``/(root)` 作为「[发布源][pages-src]」: 2. 回到 GitHub 上的仓库,选择标签 _Settings_ → 点击左侧导航栏的 _Pages__GitHub Pages_ 选择分支 `gh-pages``/(root)` 作为「[发布源][pages-src]」:
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)
3. 按照 GitHub 指示的地址去访问您的网站。 3. 按照 GitHub 指示的地址去访问您的网站。

View file

@ -52,13 +52,14 @@ init_files() {
if $_no_gh; then if $_no_gh; then
rm -rf .github rm -rf .github
else else
# change the files of `.github` ## Change the files of `.github`
mv .github/workflows/$ACTIONS_WORKFLOW.hook . mv .github/workflows/$ACTIONS_WORKFLOW.hook .
rm -rf .github rm -rf .github
mkdir -p .github/workflows mkdir -p .github/workflows
mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW} mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
# ensure the gh-actions trigger branch ## Ensure the gh-actions trigger branch
_workflow=".github/workflows/${ACTIONS_WORKFLOW}" _workflow=".github/workflows/${ACTIONS_WORKFLOW}"
_default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')" _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
@ -67,6 +68,10 @@ init_files() {
sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow" sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
rm -f "$_workflow.$TEMP_SUFFIX" rm -f "$_workflow.$TEMP_SUFFIX"
## Cleanup image settings in site config
sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn: ''/;s/^avatar:.*/avatar: ''/" _config.yml
rm -f _config.yml.$TEMP_SUFFIX
fi fi
# trace the gem lockfile on user-end # trace the gem lockfile on user-end