mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 21:53:26 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
47f230cf62 | ||
|
|
20d72b65ed |
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -36,7 +36,6 @@ Steps to reproduce the behavior:
|
||||
- Gem version: <!-- by running: `gem -v`-->
|
||||
- Bundler version: <!-- by running: `bundle -v`-->
|
||||
- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
|
||||
- Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->
|
||||
|
||||
### Desktop
|
||||
<!-- If necessary, uncomment and fill in the following list:
|
||||
|
||||
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -2,9 +2,9 @@
|
||||
|
||||
<!--
|
||||
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
|
||||
-->
|
||||
|
||||
e.g. Fixes #(issue)
|
||||
-->
|
||||
|
||||
## Type of change
|
||||
|
||||
@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
|
||||
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
|
||||
-->
|
||||
|
||||
- [ ] I have run `bash ./tools/deploy.sh --dry-run` (at the root of the project) locally and passed
|
||||
- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
|
||||
- [ ] I have tested this feature in the browser
|
||||
|
||||
### Test Configuration
|
||||
|
||||
9
.github/workflows/ci.yml
vendored
9
.github/workflows/ci.yml
vendored
@@ -36,5 +36,12 @@ jobs:
|
||||
ruby-version: 2.7
|
||||
bundler-cache: true
|
||||
|
||||
- name: Build Site
|
||||
env:
|
||||
JEKYLL_ENV: production
|
||||
run: |
|
||||
bundle exec jekyll b
|
||||
|
||||
- name: Test Site
|
||||
run: bash tools/deploy.sh --dry-run
|
||||
run: |
|
||||
bash tools/test.sh
|
||||
|
||||
26
.github/workflows/pages-deploy.yml.hook
vendored
26
.github/workflows/pages-deploy.yml.hook
vendored
@@ -25,5 +25,29 @@ jobs:
|
||||
ruby-version: 2.7
|
||||
bundler-cache: true
|
||||
|
||||
- name: Check baseurl
|
||||
run: |
|
||||
baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
|
||||
if [[ -n $baseurl ]]; then
|
||||
echo "BASE_URL=$baseurl" >> $GITHUB_ENV
|
||||
fi
|
||||
|
||||
- name: Build Site
|
||||
env:
|
||||
JEKYLL_ENV: production
|
||||
run: |
|
||||
bundle exec jekyll b -d "_site$BASE_URL"
|
||||
|
||||
- name: Test Site
|
||||
run: |
|
||||
bash tools/test.sh
|
||||
|
||||
- name: Deploy
|
||||
run: bash tools/deploy.sh
|
||||
run: |
|
||||
if [[ -n $BASE_URL ]]; then
|
||||
mv _site$BASE_URL _site-rename
|
||||
rm -rf _site
|
||||
mv _site-rename _site
|
||||
fi
|
||||
|
||||
bash tools/deploy.sh
|
||||
|
||||
3
Gemfile
3
Gemfile
@@ -17,6 +17,3 @@ end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
|
||||
|
||||
# Jekyll <= 4.2.0 compatibility with Ruby 3.0
|
||||
gem "webrick", "~> 1.7"
|
||||
|
||||
183
README.md
183
README.md
@@ -1,28 +1,39 @@
|
||||
<div align="right">
|
||||
|
||||
EN /
|
||||
[中文(简体)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md)
|
||||
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy#readme">EN</a> |
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md">中文 (简体)</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
# Chirpy Jekyll Theme
|
||||
|
||||
[](https://rubygems.org/gems/jekyll-theme-chirpy)
|
||||
[](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
|
||||
[](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
|
||||
[](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
|
||||
[](https://996.icu)
|
||||
|
||||
A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
|
||||
|
||||
**[Live Demo →](https://chirpy.cotes.info)**
|
||||
|
||||
[](https://chirpy.cotes.info)
|
||||
|
||||
<h1>Chirpy Jekyll Theme</h1>
|
||||
<p>
|
||||
<a href="https://rubygems.org/gems/jekyll-theme-chirpy">
|
||||
<img alt="Gem Version" src="https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen"></img>
|
||||
</a>
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush">
|
||||
<img alt="Build Status" src="https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push"></img>
|
||||
</a>
|
||||
<a href="https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard">
|
||||
<img alt="Codacy Badge" src="https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b"></img>
|
||||
</a>
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE">
|
||||
<img alt="GitHub license" src="https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg"></img>
|
||||
</a>
|
||||
<a href="https://996.icu">
|
||||
<img alt="996.icu" src="https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg"></img>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you easily record and share your knowledge.
|
||||
|
||||
[Live Demo »](https://chirpy.cotes.info)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://chirpy.cotes.info">
|
||||
<img alt="Devices Mockup" src="https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png"></img>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Features
|
||||
|
||||
- Localized Layout
|
||||
@@ -44,25 +55,58 @@
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
|
||||
Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
|
||||
|
||||
## Installation
|
||||
|
||||
### Creating a New Site
|
||||
There are two ways to get the theme:
|
||||
|
||||
There are two ways to create a new repository for this theme:
|
||||
- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
|
||||
- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
|
||||
|
||||
- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
|
||||
### Install from RubyGems
|
||||
|
||||
- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
|
||||
Add this line to your Jekyll site's `Gemfile`:
|
||||
|
||||
#### Option 1. Using the Chirpy Starter
|
||||
```ruby
|
||||
gem "jekyll-theme-chirpy"
|
||||
```
|
||||
|
||||
Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
|
||||
And add this line to your Jekyll site's `_config.yml`:
|
||||
|
||||
#### Option 2. Forking on GitHub
|
||||
```yaml
|
||||
theme: jekyll-theme-chirpy
|
||||
```
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development. If you want the site to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.
|
||||
And then execute:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
Next, go to the installed local theme path:
|
||||
|
||||
```console
|
||||
$ cd "$(bundle info --path jekyll-theme-chirpy)"
|
||||
```
|
||||
|
||||
And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
|
||||
|
||||
> ⚠️ **Watch out for duplicate files!**
|
||||
>
|
||||
> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
|
||||
|
||||
As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
|
||||
|
||||
### Fork on GitHub
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development. If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
|
||||
|
||||
Install gem dependencies by:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
And then execute:
|
||||
|
||||
@@ -70,28 +114,18 @@ And then execute:
|
||||
$ bash tools/init.sh
|
||||
```
|
||||
|
||||
> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
|
||||
> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
|
||||
|
||||
The above command will:
|
||||
What it does is:
|
||||
|
||||
1. Removes some files or directories from your repository:
|
||||
1. Remove some files or directories from your repository:
|
||||
- `.travis.yml`
|
||||
- files under `_posts`
|
||||
- folder `docs`
|
||||
|
||||
2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
|
||||
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
|
||||
|
||||
3. Removes item `Gemfile.lock` from `.gitignore`.
|
||||
|
||||
4. Creates a new commit to save the changes automatically.
|
||||
|
||||
### Installing Dependencies
|
||||
|
||||
Before running for the first time, go the root directory of your site, and install dependencies as follows:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
3. Automatically create a commit to save the changes.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -108,7 +142,7 @@ Update the variables of `_config.yml` as needed. Some of them are typical option
|
||||
|
||||
If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
|
||||
|
||||
Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
|
||||
Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
|
||||
|
||||
### Running Local Server
|
||||
|
||||
@@ -120,14 +154,14 @@ $ bundle exec jekyll s
|
||||
|
||||
Or run the site on Docker with the following command:
|
||||
|
||||
```console
|
||||
```terminal
|
||||
$ docker run -it --rm \
|
||||
--volume="$PWD:/srv/jekyll" \
|
||||
-p 4000:4000 jekyll/jekyll \
|
||||
jekyll serve
|
||||
```
|
||||
|
||||
After a while, the local service will be published at _<http://127.0.0.1:4000>_.
|
||||
Open a browser and visit to _<http://localhost:4000>_.
|
||||
|
||||
### Deployment
|
||||
|
||||
@@ -135,47 +169,40 @@ Before the deployment begins, checkout the file `_config.yml` and make sure the
|
||||
|
||||
Now you can choose ONE of the following methods to deploy your Jekyll site.
|
||||
|
||||
#### Deploy by Using Github Actions
|
||||
#### Deploy on GitHub Pages
|
||||
|
||||
For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
|
||||
For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GH Pages service.
|
||||
|
||||
Quickly check the files needed for GitHub Actions build:
|
||||
|
||||
- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
|
||||
- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
|
||||
- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
|
||||
|
||||
- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
|
||||
|
||||
- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
|
||||
|
||||
```console
|
||||
$ bundle lock --add-platform x86_64-linux
|
||||
```
|
||||
|
||||
After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
|
||||
And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
|
||||
|
||||
Now publish your Jekyll site by:
|
||||
|
||||
1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
|
||||
|
||||
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 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_:
|
||||
|
||||
|
||||
|
||||
|
||||
3. Visit your website at the address indicated by GitHub.
|
||||
|
||||
#### Manually Build and Deploy
|
||||
#### Deploy on Other Platforms
|
||||
|
||||
On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
|
||||
On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
|
||||
|
||||
Go to the root of the source project, and build your site as follows:
|
||||
Go to the root of the source project, build your site by:
|
||||
|
||||
```console
|
||||
$ JEKYLL_ENV=production bundle exec jekyll b
|
||||
```
|
||||
|
||||
Or build the site on Docker:
|
||||
Or build the site with Docker by:
|
||||
|
||||
```console
|
||||
```terminal
|
||||
$ docker run -it --rm \
|
||||
--env JEKYLL_ENV=production \
|
||||
--volume="$PWD:/srv/jekyll" \
|
||||
@@ -183,28 +210,7 @@ $ docker run -it --rm \
|
||||
jekyll build
|
||||
```
|
||||
|
||||
Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to the target server.
|
||||
|
||||
### Upgrading
|
||||
|
||||
It depends on how you use the theme:
|
||||
|
||||
- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
|
||||
```diff
|
||||
- gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
|
||||
+ gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
|
||||
```
|
||||
|
||||
And then execute the following command:
|
||||
|
||||
```console
|
||||
$ bundle update jekyll-theme-chirpy
|
||||
```
|
||||
|
||||
As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
|
||||
|
||||
- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
|
||||
The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
|
||||
Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
|
||||
|
||||
## Documentation
|
||||
|
||||
@@ -237,9 +243,6 @@ This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chi
|
||||
[starter]: https://github.com/cotes2020/chirpy-starter
|
||||
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
|
||||
[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
|
||||
[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
|
||||
[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
|
||||
[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
|
||||
|
||||
<!-- ReadMe links -->
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
# Import the theme
|
||||
theme: jekyll-theme-chirpy
|
||||
|
||||
# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
|
||||
# and doesn't have a custom domain.
|
||||
# Only if your site type is GitHub Project sites and doesn't have a custom domain,
|
||||
# change below value to '/projectname'.
|
||||
baseurl: ''
|
||||
|
||||
# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
|
||||
@@ -79,10 +79,10 @@ theme_mode: # [light|dark]
|
||||
# will be added to all image (site avatar & posts' images) paths starting with '/'
|
||||
#
|
||||
# e.g. 'https://cdn.com'
|
||||
img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5'
|
||||
img_cdn: ''
|
||||
|
||||
# the avatar on sidebar, support local or CORS resources
|
||||
avatar: '/commons/avatar.jpg'
|
||||
avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg
|
||||
|
||||
# boolean type, the global switch for ToC in posts.
|
||||
toc: true
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
-
|
||||
type: github
|
||||
icon: 'fab fa-github'
|
||||
icon: 'fab fa-github-alt'
|
||||
-
|
||||
type: twitter
|
||||
icon: 'fab fa-twitter'
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
-->
|
||||
|
||||
<div id="disqus_thread" class="pt-2 pb-2">
|
||||
<p class="text-center text-muted small">
|
||||
<p class="text-center text-muted small mb-5">
|
||||
Comments powered by <a href="https://disqus.com/">Disqus</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
{% comment %}
|
||||
|
||||
Convert the alias of the syntax language to the official name
|
||||
|
||||
See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
{% assign _lang = include.language | default: '' %}
|
||||
|
||||
{% case _lang %}
|
||||
{% when 'actionscript', 'as', 'as3' %}
|
||||
{{ 'ActionScript' }}
|
||||
{% when 'applescript' %}
|
||||
{{ 'AppleScript' }}
|
||||
{% when 'brightscript', 'bs', 'brs' %}
|
||||
{{ 'BrightScript' }}
|
||||
{% when 'cfscript', 'cfc' %}
|
||||
{{ 'CFScript' }}
|
||||
{% when 'coffeescript', 'coffee', 'coffee-script' %}
|
||||
{{ 'CoffeeScript' }}
|
||||
{% when 'cs', 'csharp' %}
|
||||
{{ 'C#' }}
|
||||
{% when 'erl' %}
|
||||
{{ 'Erlang' }}
|
||||
{% when 'graphql' %}
|
||||
{{ 'GraphQL' }}
|
||||
{% when 'haskell', 'hs' %}
|
||||
{{ 'Haskell' }}
|
||||
{% when 'javascript', 'js' %}
|
||||
{{ 'JavaScript' }}
|
||||
{% when 'make', 'mf', 'gnumake', 'bsdmake' %}
|
||||
{{ 'Makefile' }}
|
||||
{% when 'md', 'mkd' %}
|
||||
{{ 'Markdown' }}
|
||||
{% when 'm' %}
|
||||
{{ 'Matlab' }}
|
||||
{% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %}
|
||||
{{ 'Objective-C' }}
|
||||
{% when 'perl', 'pl' %}
|
||||
{{ 'Perl' }}
|
||||
{% when 'php','php3','php4','php5' %}
|
||||
{{ 'PHP' }}
|
||||
{% when 'plaintext', 'text' %}
|
||||
{{ 'Text' }}
|
||||
{% when 'py' %}
|
||||
{{ 'Python' }}
|
||||
{% when 'rb' %}
|
||||
{{ 'Ruby' }}
|
||||
{% when 'rs','no_run','ignore','should_panic' %}
|
||||
{{ 'Rust' }}
|
||||
{% when 'bash', 'zsh', 'ksh', 'sh' %}
|
||||
{{ 'Shell' }}
|
||||
{% when 'st', 'squeak' %}
|
||||
{{ 'Smalltalk' }}
|
||||
{% when 'tex'%}
|
||||
{{ 'TeX' }}
|
||||
{% when 'latex' %}
|
||||
{{ 'LaTex' }}
|
||||
{% when 'ts', 'typescript' %}
|
||||
{{ 'TypeScript' }}
|
||||
{% when 'vb', 'visualbasic' %}
|
||||
{{ 'Visual Basic' }}
|
||||
{% when 'vue', 'vuejs' %}
|
||||
{{ 'Vue.js' }}
|
||||
{% when 'yml' %}
|
||||
{{ 'YAML' }}
|
||||
{% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %}
|
||||
{{ _lang | upcase }}
|
||||
{% else %}
|
||||
{{ _lang | capitalize }}
|
||||
{% endcase %}
|
||||
@@ -119,23 +119,16 @@
|
||||
|
||||
{% if _left contains 'file="' %}
|
||||
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_icon = 'far fa-file-code' %}
|
||||
{% else %}
|
||||
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
|
||||
{% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
||||
{% assign _label_icon = 'fas fa-code small' %}
|
||||
{% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
|
||||
{% endif %}
|
||||
|
||||
{% capture _label %}
|
||||
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign _new_content = _new_content | append: _snippet
|
||||
| append: '<div class="code-header">'
|
||||
| append: _label
|
||||
| append: '<button aria-label="copy" title-succeed="'
|
||||
| append: '<div class="code-header" text-data="'
|
||||
| append: _text
|
||||
| append: '"><button data-original-title="'
|
||||
| append: site.data.locales[lang].post.button.copy_code.succeed
|
||||
| append: '"><i class="far fa-clipboard"></i></button></div>'
|
||||
| append: '"><i class="far fa-clone"></i></button></div>'
|
||||
| append: '<div class="highlight"><code>'
|
||||
%}
|
||||
|
||||
|
||||
@@ -6,18 +6,16 @@
|
||||
<div class="profile-wrapper text-center">
|
||||
<div id="avatar">
|
||||
<a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
|
||||
{% if site.avatar != '' and site.avatar %}
|
||||
{% capture avatar_url %}
|
||||
{%- if site.avatar contains '://' -%}
|
||||
{{ site.avatar }}
|
||||
{%- elsif site.img_cdn != '' and site.img_cdn -%}
|
||||
{{ site.avatar | prepend: site.img_cdn }}
|
||||
{%- else -%}
|
||||
{{ site.avatar | relative_url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
<img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
|
||||
{% endif %}
|
||||
{% capture avatar_url %}
|
||||
{%- if site.avatar contains '://' -%}
|
||||
{{ site.avatar }}
|
||||
{%- elsif site.img_cdn != '' and site.img_cdn -%}
|
||||
{{ site.avatar | prepend: site.img_cdn }}
|
||||
{%- else -%}
|
||||
{{ site.avatar | relative_url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
<img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -51,7 +49,7 @@
|
||||
|
||||
</ul> <!-- ul.nav.flex-column -->
|
||||
|
||||
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
|
||||
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
|
||||
|
||||
{% for entry in site.data.contact %}
|
||||
{% capture url %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@@ -41,7 +41,7 @@ $(function() {
|
||||
});
|
||||
|
||||
$(btnSelector).tooltip({
|
||||
trigger: 'hover',
|
||||
trigger: 'click',
|
||||
placement: 'left'
|
||||
});
|
||||
|
||||
@@ -53,24 +53,26 @@ $(function() {
|
||||
const ICON_DEFAULT = getIcon(btnSelector);
|
||||
|
||||
function showTooltip(btn) {
|
||||
const succeedTitle = $(btn).attr('title-succeed');
|
||||
$(btn).attr('data-original-title', succeedTitle).tooltip('show');
|
||||
$(btn).tooltip('show');
|
||||
}
|
||||
|
||||
function hideTooltip(btn) {
|
||||
$(btn).tooltip('hide').removeAttr('data-original-title');
|
||||
$(btn).tooltip('hide');
|
||||
unlock(btn);
|
||||
}
|
||||
|
||||
function setSuccessIcon(btn) {
|
||||
let btnNode = $(btn);
|
||||
let iconNode = btnNode.children();
|
||||
iconNode.attr('class', ICON_SUCCESS);
|
||||
lock(btn);
|
||||
}
|
||||
|
||||
function resumeIcon(btn) {
|
||||
let btnNode = $(btn);
|
||||
let iconNode = btnNode.children();
|
||||
iconNode.attr('class', ICON_DEFAULT);
|
||||
unlock(btn);
|
||||
}
|
||||
|
||||
clipboard.on('success', (e) => {
|
||||
@@ -83,12 +85,10 @@ $(function() {
|
||||
|
||||
setSuccessIcon(trigger);
|
||||
showTooltip(trigger);
|
||||
lock(trigger);
|
||||
|
||||
setTimeout(() => {
|
||||
hideTooltip(trigger);
|
||||
resumeIcon(trigger);
|
||||
unlock(trigger);
|
||||
}, TIMEOUT);
|
||||
|
||||
});
|
||||
|
||||
@@ -7,9 +7,9 @@ tags: [typography]
|
||||
math: true
|
||||
mermaid: true
|
||||
image:
|
||||
src: /commons/devices-mockup.png
|
||||
width: 800
|
||||
height: 500
|
||||
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.
|
||||
@@ -99,34 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
|
||||
|
||||
- Default (with caption)
|
||||
|
||||
{: width="972" height="589" }
|
||||
{: width="972" height="589" }
|
||||
_Full screen width and center alignment_
|
||||
|
||||
<br>
|
||||
|
||||
- Shadow
|
||||
|
||||
{: .shadow width="1548" height="864" style="max-width: 90%" }
|
||||
{: .shadow width="1548" height="864" style="max-width: 90%" }
|
||||
_shadow effect (visible in light mode)_
|
||||
|
||||
<br>
|
||||
|
||||
- Left aligned
|
||||
|
||||
{: width="972" height="589" style="max-width: 70%" .normal}
|
||||
{: width="972" height="589" style="max-width: 70%" .normal}
|
||||
|
||||
<br>
|
||||
|
||||
- Float to left
|
||||
|
||||
{: width="972" height="589" style="max-width: 200px" .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="972" height="589" style="max-width: 200px" .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>
|
||||
|
||||
@@ -146,7 +146,7 @@ By default, the image is centered, but you can specify the position by using one
|
||||
```
|
||||
{: .nolineno}
|
||||
|
||||
> **Limitation**: Once the position of the image is specified, the image caption should not be added.
|
||||
> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
|
||||
|
||||
### Image shadow
|
||||
|
||||
|
||||
@@ -9,25 +9,60 @@ pin: true
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
|
||||
Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. Please note that the version of `Ruby` must meet the requirements of the theme on [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy).
|
||||
|
||||
## Installation
|
||||
|
||||
### Creating a New Site
|
||||
There are two ways to get the theme:
|
||||
|
||||
There are two ways to create a new repository for this theme:
|
||||
- **[Install from RubyGems](#install-from-rubygems)** - Easy to update, isolate irrelevant project files so you can focus on writing.
|
||||
- **[Fork on GitHub](#fork-on-github)** - Convenient for custom development, but difficult to update, only suitable for web developers.
|
||||
|
||||
- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
|
||||
### Install from RubyGems
|
||||
|
||||
- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
|
||||
Add this line to your Jekyll site's `Gemfile`:
|
||||
|
||||
#### Option 1. Using the Chirpy Starter
|
||||
```ruby
|
||||
gem "jekyll-theme-chirpy"
|
||||
```
|
||||
{: .nolineno file='Gemfile' }
|
||||
|
||||
Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
|
||||
And add this line to your Jekyll site's `_config.yml`:
|
||||
|
||||
#### Option 2. Forking on GitHub
|
||||
```yaml
|
||||
theme: jekyll-theme-chirpy
|
||||
```
|
||||
{: .nolineno file='_config.yml' }
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development. If you want the site to be stable, please switch to the [latest tag][latest-tag] and start writing.
|
||||
And then execute:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
Next, go to the installed local theme path:
|
||||
|
||||
```console
|
||||
$ cd "$(bundle info --path jekyll-theme-chirpy)"
|
||||
```
|
||||
|
||||
And then copy the critical files (for details, see [starter project][starter]) from the theme's gem to your Jekyll site.
|
||||
|
||||
> ⚠️ **Watch out for duplicate files!**
|
||||
>
|
||||
> If your Jekyll site is created by the `jekyll new` command, there will be `index.markdown` and `about.markdown` in the root directory of your site. Please be sure to remove them, otherwise they will overwrite the `index.html` and `_tabs/about.html` from this project, resulting in blank or messy pages.
|
||||
|
||||
As an alternative, which we recommend, you can create a Jekyll site [**using the starter template**][use-starter] to save time copying files from the theme's gem. We've prepared everything you need there!
|
||||
|
||||
### Fork on GitHub
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and then clone your fork to local. (Please note that the default branch code is in development. If you want the blog to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.)
|
||||
|
||||
Install gem dependencies by:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
And then execute:
|
||||
|
||||
@@ -35,28 +70,18 @@ And then execute:
|
||||
$ bash tools/init.sh
|
||||
```
|
||||
|
||||
> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
|
||||
> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
|
||||
|
||||
The above command will:
|
||||
What it does is:
|
||||
|
||||
1. Removes some files or directories from your repository:
|
||||
1. Remove some files or directories from your repository:
|
||||
- `.travis.yml`
|
||||
- files under `_posts`
|
||||
- folder `docs`
|
||||
|
||||
2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
|
||||
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
|
||||
|
||||
3. Removes item `Gemfile.lock` from `.gitignore`.
|
||||
|
||||
4. Creates a new commit to save the changes automatically.
|
||||
|
||||
### Installing Dependencies
|
||||
|
||||
Before running for the first time, go the root directory of your site, and install dependencies as follows:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
3. Automatically create a commit to save the changes.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -73,7 +98,7 @@ Update the variables of `_config.yml` as needed. Some of them are typical option
|
||||
|
||||
If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
|
||||
|
||||
Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
|
||||
Starting from `v4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
|
||||
|
||||
### Running Local Server
|
||||
|
||||
@@ -85,14 +110,14 @@ $ bundle exec jekyll s
|
||||
|
||||
Or run the site on Docker with the following command:
|
||||
|
||||
```console
|
||||
```terminal
|
||||
$ docker run -it --rm \
|
||||
--volume="$PWD:/srv/jekyll" \
|
||||
-p 4000:4000 jekyll/jekyll \
|
||||
jekyll serve
|
||||
```
|
||||
|
||||
After a while, the local service will be published at _<http://127.0.0.1:4000>_.
|
||||
Open a browser and visit to _<http://localhost:4000>_.
|
||||
|
||||
### Deployment
|
||||
|
||||
@@ -100,47 +125,40 @@ Before the deployment begins, checkout the file `_config.yml` and make sure the
|
||||
|
||||
Now you can choose ONE of the following methods to deploy your Jekyll site.
|
||||
|
||||
#### Deploy by Using Github Actions
|
||||
#### Deploy on GitHub Pages
|
||||
|
||||
For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
|
||||
For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GH Pages service.
|
||||
|
||||
Quickly check the files needed for GitHub Actions build:
|
||||
|
||||
- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
|
||||
- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
|
||||
- Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
|
||||
|
||||
- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
|
||||
|
||||
- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
|
||||
|
||||
```console
|
||||
$ bundle lock --add-platform x86_64-linux
|
||||
```
|
||||
|
||||
After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
|
||||
And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
|
||||
|
||||
Now publish your Jekyll site by:
|
||||
|
||||
1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
|
||||
|
||||
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 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" }
|
||||
{: width="850" height="153" }
|
||||
|
||||
3. Visit your website at the address indicated by GitHub.
|
||||
|
||||
#### Manually Build and Deploy
|
||||
#### Deploy on Other Platforms
|
||||
|
||||
On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
|
||||
On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
|
||||
|
||||
Go to the root of the source project, and build your site as follows:
|
||||
Go to the root of the source project, build your site by:
|
||||
|
||||
```console
|
||||
$ JEKYLL_ENV=production bundle exec jekyll b
|
||||
```
|
||||
|
||||
Or build the site on Docker:
|
||||
Or build the site with Docker by:
|
||||
|
||||
```console
|
||||
```terminal
|
||||
$ docker run -it --rm \
|
||||
--env JEKYLL_ENV=production \
|
||||
--volume="$PWD:/srv/jekyll" \
|
||||
@@ -148,34 +166,8 @@ $ docker run -it --rm \
|
||||
jekyll build
|
||||
```
|
||||
|
||||
Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to the target server.
|
||||
|
||||
### Upgrading
|
||||
|
||||
It depends on how you use the theme:
|
||||
|
||||
- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
|
||||
|
||||
```diff
|
||||
- gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
|
||||
+ gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
|
||||
```
|
||||
{: .nolineno file="Gemfile" }
|
||||
|
||||
And then execute the following command:
|
||||
|
||||
```console
|
||||
$ bundle update jekyll-theme-chirpy
|
||||
```
|
||||
|
||||
As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
|
||||
|
||||
- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
|
||||
The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
|
||||
Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
|
||||
|
||||
[starter]: https://github.com/cotes2020/chirpy-starter
|
||||
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
|
||||
[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
|
||||
[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
|
||||
[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
|
||||
[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
|
||||
|
||||
@@ -6,7 +6,7 @@ categories: [Blogging, Tutorial]
|
||||
tags: [favicon]
|
||||
---
|
||||
|
||||
The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you how to create and replace the default favicons.
|
||||
The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may need to replace them with your own. The following sections will guide you how to create and replace the default favicons.
|
||||
|
||||
## Generate the favicon
|
||||
|
||||
@@ -21,7 +21,7 @@ Download the generated package, unzip and delete the following two from the extr
|
||||
- `browserconfig.xml`
|
||||
- `site.webmanifest`
|
||||
|
||||
Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
|
||||
Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site.
|
||||
|
||||
The following table will helps you understand the changes to the favicon files:
|
||||
|
||||
|
||||
@@ -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"}
|
||||
{: 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
|
||||
|
||||
@@ -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.
|
||||
|
||||
{: width="616" height="557"}
|
||||
{: width="616" height="557"}
|
||||
|
||||
## 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:
|
||||
|
||||
{: width="1366" height="354"}
|
||||
{: width="1366" height="354"}
|
||||
|
||||
### 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.
|
||||
|
||||
{: width="1100" height="126"}
|
||||
{: 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"}
|
||||
{: 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:
|
||||
|
||||
|
||||
@@ -7,9 +7,16 @@
|
||||
@if $dark-mode {
|
||||
@include dark-scheme;
|
||||
|
||||
.mode-toggle {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
} @else {
|
||||
@include light-scheme;
|
||||
|
||||
.mode-toggle {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -66,25 +73,6 @@ $scrollbar-size: 7px;
|
||||
border-radius: calc(#{$scrollbar-size} / 2);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
border-color: transparent;
|
||||
transition: border-color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--scrollbar-thumb-bg);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/* add border to act as background-color */
|
||||
border-right-style: inset;
|
||||
border-right-width: calc(100vw + 100vh);
|
||||
border-color: inherit;
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
|
||||
h1 {
|
||||
@@ -657,31 +645,31 @@ $sidebar-display: "sidebar-display";
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
@include sidebar-links;
|
||||
|
||||
&:hover {
|
||||
@include no-text-decoration;
|
||||
|
||||
color: var(--sidebar-active-color) !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#avatar {
|
||||
&:hover > a {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(222, 222, 222, 0.7);
|
||||
border: 2px solid #b6b6b6;
|
||||
overflow: hidden;
|
||||
transform: translateZ(0); // fixed the zoom in Safari
|
||||
-webkit-transition: border-color 0.35s ease-in-out;
|
||||
-moz-transition: border-color 0.35s ease-in-out;
|
||||
transition: border-color 0.35s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -702,18 +690,15 @@ $sidebar-display: "sidebar-display";
|
||||
|
||||
.site-title {
|
||||
a {
|
||||
@extend %clickable-transition;
|
||||
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
color: rgba(134, 133, 133, 99%);
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
color: var(--sidebar-muted-color);
|
||||
color: #828282;
|
||||
line-height: 1.2rem;
|
||||
word-spacing: 1px;
|
||||
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
||||
@@ -734,15 +719,15 @@ $sidebar-display: "sidebar-display";
|
||||
text-align: center;
|
||||
display: table;
|
||||
height: $tab-height;
|
||||
|
||||
&.active {
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
color: #f8f9facf;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) > a {
|
||||
@extend %clickable-transition;
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: #fcfcfc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -818,35 +803,36 @@ $sidebar-display: "sidebar-display";
|
||||
|
||||
a {
|
||||
@extend %icon;
|
||||
@extend %clickable-transition;
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: 1.75rem; // default line-height in body
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
@extend %icon;
|
||||
|
||||
i {
|
||||
@extend %sidebar-links;
|
||||
@extend %cursor-pointer;
|
||||
@extend %clickable-transition;
|
||||
@include sidebar-links;
|
||||
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
background-color: var(--sidebar-muted-color);
|
||||
background-color: #525354;
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper:hover > i {
|
||||
color: var(--sidebar-active-color);
|
||||
a:hover,
|
||||
#mode-toggle-wrapper i:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
@@ -887,6 +873,7 @@ $sidebar-display: "sidebar-display";
|
||||
transition: top 0.2s ease-in-out;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--topbar-wrapper-bg);
|
||||
}
|
||||
|
||||
@@ -924,19 +911,15 @@ $sidebar-display: "sidebar-display";
|
||||
display: flex;
|
||||
width: 85%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--search-wrapper-border-color);
|
||||
border: 1px solid var(--search-wrapper-bg);
|
||||
background: var(--search-wrapper-bg);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
i {
|
||||
z-index: 2;
|
||||
font-size: 0.9rem;
|
||||
color: var(--search-icon-color);
|
||||
}
|
||||
|
||||
.fa-times-circle { /* button 'clean up' */
|
||||
@extend %cursor-pointer;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -945,8 +928,6 @@ $sidebar-display: "sidebar-display";
|
||||
color: var(--link-color);
|
||||
margin-left: 1rem;
|
||||
display: none;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
@@ -1101,27 +1082,18 @@ $sidebar-display: "sidebar-display";
|
||||
/* --- button back-to-top --- */
|
||||
|
||||
#back-to-top {
|
||||
$size: 2.7em;
|
||||
|
||||
display: none;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
background: var(--button-bg);
|
||||
color: var(--btn-backtotop-color);
|
||||
padding: 0;
|
||||
width: $size;
|
||||
height: $size;
|
||||
height: 2.6em;
|
||||
width: 2.7em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--btn-backtotop-border-color);
|
||||
transition: transform 0.2s ease-out;
|
||||
-webkit-transition: transform 0.2s ease-out;
|
||||
|
||||
i {
|
||||
line-height: $size;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
transition: 0.2s ease-out;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
}
|
||||
|
||||
#back-to-top:hover {
|
||||
@@ -1619,10 +1591,19 @@ $sidebar-display: "sidebar-display";
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
> i {
|
||||
@include icon-round(1.65rem);
|
||||
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.6rem;
|
||||
padding-top: 1px;
|
||||
padding-left: 1px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
&.unloaded {
|
||||
display: inline-block !important;
|
||||
}
|
||||
@@ -1636,40 +1617,35 @@ $sidebar-display: "sidebar-display";
|
||||
padding-left: 3.5rem;
|
||||
width: 100%;
|
||||
|
||||
$icon-block-size: 2rem;
|
||||
|
||||
&.justify-content-center {
|
||||
-webkit-box-pack: start !important;
|
||||
-ms-flex-pack: start !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
> span,
|
||||
> a {
|
||||
@include ml-mr(0.15rem);
|
||||
|
||||
height: $icon-block-size;
|
||||
margin-bottom: 0.5rem; // wrap line
|
||||
a {
|
||||
font-size: 1rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
i {
|
||||
background-color: var(--sidebar-btn-bg);
|
||||
font-size: 1rem;
|
||||
width: $icon-block-size;
|
||||
height: $icon-block-size;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
@include icon-round(2rem);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-top: 0.44rem;
|
||||
margin-top: .7rem; // multi line space
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
width: 3rem;
|
||||
|
||||
i {
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
top: 0.9rem;
|
||||
top: 26px;
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
|
||||
@@ -35,10 +35,6 @@
|
||||
border-bottom: 1px solid var(--link-underline-color);
|
||||
}
|
||||
|
||||
%clickable-transition {
|
||||
transition: color 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
%no-bottom-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -55,21 +51,25 @@
|
||||
margin-top: -2.5rem;
|
||||
}
|
||||
|
||||
%cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---------- scss mixin --------- */
|
||||
|
||||
@mixin no-text-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
%sidebar-links {
|
||||
color: rgba(117, 117, 117, 0.9);
|
||||
@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
|
||||
color: $color;
|
||||
transition: color 0.35s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@mixin icon-round($diameter) {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
width: $diameter;
|
||||
height: $diameter;
|
||||
}
|
||||
|
||||
@mixin ml-mr($value) {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
|
||||
@@ -172,37 +172,22 @@ div {
|
||||
align-items: center;
|
||||
line-height: 1.85rem;
|
||||
|
||||
// icons
|
||||
i {
|
||||
font-size: 1rem;
|
||||
color: var(--lang-badge-muted-color);
|
||||
// text data
|
||||
&::before {
|
||||
content: attr(text-data);
|
||||
color: var(--lang-badge-color);
|
||||
padding-left: 1em;
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
// language
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
// the label block
|
||||
span {
|
||||
padding-left: 0.35rem;
|
||||
|
||||
&::after {
|
||||
content: attr(text-data);
|
||||
// file name
|
||||
@at-root [file] #{&} {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--lang-badge-color);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@at-root [file] #{&} > i {
|
||||
position: relative;
|
||||
top: 1px; // center the file icon
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// clipboard
|
||||
@@ -212,31 +197,26 @@ div {
|
||||
padding: 0;
|
||||
width: 1.95rem;
|
||||
background-color: inherit;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
color: var(--highlight-lineno-color);
|
||||
|
||||
&[timeout] {
|
||||
&:hover {
|
||||
border-color: var(--clipboard-checked-color);
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--clipboard-checked-color);
|
||||
}
|
||||
color: var(--clipboard-checked-color);
|
||||
border-color: var(--clipboard-checked-color);
|
||||
}
|
||||
|
||||
&:not([timeout]):hover {
|
||||
background-color: rgba(128, 128, 128, 0.37);
|
||||
|
||||
i {
|
||||
color: white;
|
||||
}
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -248,10 +228,6 @@ div {
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
.highlight {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
border-radius: 0;
|
||||
padding-left: 0.4rem;
|
||||
|
||||
@@ -11,10 +11,10 @@ $sidebar-width-large: 350px !default; // screen width: >= 1650px
|
||||
/* tabs of sidebar */
|
||||
|
||||
$tab-count: 5 !default; // backward compatible (version <= 4.0.2)
|
||||
$tab-height: 3rem !default;
|
||||
$tab-height: 3.2rem !default;
|
||||
$tab-cursor-height: 1.6rem !default;
|
||||
|
||||
$cursor-width: 2px !default; // the cursor width of the selected tab
|
||||
$cursor-width: 3px !default; // the cursor width of the selected tab
|
||||
|
||||
/* other framework sizes */
|
||||
|
||||
|
||||
@@ -75,8 +75,7 @@
|
||||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-bg: #353535;
|
||||
--lang-badge-color: #858586;
|
||||
--lang-badge-muted-color: #6c6c6d;
|
||||
--lang-badge-color: #6c6c6d;
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
|
||||
.highlight {
|
||||
|
||||
@@ -30,17 +30,13 @@
|
||||
--checkbox-checked-color: var(--link-color);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||
--sidebar-muted-color: #6d6c6b;
|
||||
--sidebar-active-color: rgb(255 255 255 / 80%);
|
||||
--nav-cursor-color: rgb(183, 182, 182);
|
||||
--sidebar-btn-bg: rgb(117 116 116 / 20%);
|
||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||
|
||||
/* Topbar */
|
||||
--topbar-text-color: var(--text-color);
|
||||
--topbar-wrapper-bg: rgb(39, 40, 43);
|
||||
--search-wrapper-bg: rgb(34, 34, 39);
|
||||
--search-wrapper-border-color: rgb(34, 34, 39);
|
||||
--search-icon-color: rgb(100, 102, 105);
|
||||
--input-focus-border-color: rgb(112, 114, 115);
|
||||
|
||||
@@ -48,8 +44,11 @@
|
||||
--post-list-text-color: rgb(175, 176, 177);
|
||||
--btn-patinator-text-color: var(--text-color);
|
||||
--btn-paginator-hover-color: rgb(64, 65, 66);
|
||||
--btn-paginator-border-color: var(--btn-border-color);
|
||||
--btn-active-bg: rgba(28, 52, 94, 1);
|
||||
--btn-active-border-color: rgb(66, 94, 138);
|
||||
--btn-text-color: var(--text-color);
|
||||
--btn-paginator-border-color: var(--btn-border-color);
|
||||
--btn-paginator-shadow: var(--main-wrapper-bg);
|
||||
--pin-bg: rgb(34 35 37);
|
||||
--pin-color: inherit;
|
||||
|
||||
@@ -77,7 +76,6 @@
|
||||
/* categories */
|
||||
--categories-border: rgb(64, 66, 69);
|
||||
--categories-hover-bg: rgb(73, 75, 76);
|
||||
--categories-icon-hover-color: white;
|
||||
|
||||
/* archives */
|
||||
--timeline-node-bg: rgb(150, 152, 156);
|
||||
|
||||
@@ -72,8 +72,7 @@
|
||||
--highlight-lineno-color: #c2c6cc;
|
||||
--inline-code-bg: #f3f3f3;
|
||||
--code-header-bg: #eaeaea;
|
||||
--lang-badge-color: rgb(128 128 128 / 87%);
|
||||
--lang-badge-muted-color: rgb(128 128 128 / 36%);
|
||||
--lang-badge-color: #a4a7ab;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
} // light-syntax
|
||||
|
||||
@@ -28,17 +28,13 @@
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: #eeeeee;
|
||||
--sidebar-muted-color: #a2a19f;
|
||||
--sidebar-active-color: #424242;
|
||||
--nav-cursor-color: #757575;
|
||||
--sidebar-btn-bg: white;
|
||||
--sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
||||
--nav-cursor-color: #fcfcfc;
|
||||
|
||||
/* Topbar */
|
||||
--topbar-text-color: rgb(78, 78, 78);
|
||||
--topbar-wrapper-bg: white;
|
||||
--search-wrapper-bg: rgb(245 245 245 / 50%);
|
||||
--search-wrapper-border-color: rgb(245 245 245);
|
||||
--search-wrapper-bg: #f5f5f5;
|
||||
--search-tag-bg: #f8f9fa;
|
||||
--search-icon-color: #c2c6cc;
|
||||
--input-focus-border-color: var(--btn-border-color);
|
||||
@@ -46,9 +42,12 @@
|
||||
/* Home page */
|
||||
--post-list-text-color: dimgray;
|
||||
--btn-patinator-text-color: #555555;
|
||||
--btn-paginator-hover-color: var(--sidebar-bg);
|
||||
--btn-paginator-border-color: var(--sidebar-bg);
|
||||
--btn-text-color: #676666;
|
||||
--btn-paginator-hover-color: #e9ecef;
|
||||
--btn-active-bg: #2a408e;
|
||||
--btn-active-border-color: #007bff;
|
||||
--btn-text-color: #f8f8f8;
|
||||
--btn-paginator-border-color: #f1f1f1;
|
||||
--btn-paginator-shadow: #4b92d2;
|
||||
--pin-bg: #f5f5f5;
|
||||
--pin-color: #999fa4;
|
||||
|
||||
@@ -65,11 +64,8 @@
|
||||
--tag-hover: rgb(222, 226, 230);
|
||||
--tb-odd-bg: #fbfcfd;
|
||||
--tb-border-color: #eaeaea;
|
||||
--dash-color: silver;
|
||||
|
||||
/* Categories */
|
||||
--categories-hover-bg: var(--btn-border-color);
|
||||
--categories-icon-hover-color: darkslategray;
|
||||
--dash-color: silver;
|
||||
|
||||
/* Archive */
|
||||
--timeline-color: rgba(0, 0, 0, 0.075);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*!
|
||||
* The styles for Jekyll theme Chirpy
|
||||
*
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@@ -8,22 +8,24 @@
|
||||
|
||||
.categories {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.card-header {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
i {
|
||||
@extend %category-icon-color;
|
||||
|
||||
font-size: 86%; // fontawesome icons
|
||||
&.far,
|
||||
&.fas {
|
||||
font-size: 86%; // fontawesome icons
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding-left: 2rem;
|
||||
|
||||
> i {
|
||||
@extend %category-icon-color;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@@ -31,6 +33,10 @@
|
||||
|
||||
}
|
||||
|
||||
.card-header > span > i:first-child {
|
||||
@extend %category-icon-color;
|
||||
}
|
||||
|
||||
} // .categories
|
||||
|
||||
.category-trigger {
|
||||
@@ -39,18 +45,11 @@
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #6c757d !important;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--categories-icon-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
> i.fas {
|
||||
position: relative;
|
||||
height: 0.7rem;
|
||||
width: 1rem;
|
||||
transition: transform 300ms ease;
|
||||
transition: 300ms ease all;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -28,7 +28,9 @@
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: var(--btn-paginator-hover-color);
|
||||
background-color: var(--btn-active-bg);
|
||||
border-color: var(--btn-active-border-color);
|
||||
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,21 +139,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
#toc li a {
|
||||
font-size: 0.8rem;
|
||||
#toc li > a {
|
||||
line-height: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
&.nav-link:not(.active) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nav[data-toggle=toc] {
|
||||
.nav {
|
||||
.nav > li > a.active {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Related Posts --- */
|
||||
@@ -216,12 +209,9 @@ nav[data-toggle=toc] {
|
||||
|
||||
#post-extend-wrapper {
|
||||
min-height: 2rem;
|
||||
|
||||
#disqus_thread {
|
||||
min-height: 7.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.post-tail-bottom a {
|
||||
@@ -252,9 +242,6 @@ nav[data-toggle=toc] {
|
||||
> i {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
|
||||
&:hover {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: About
|
||||
icon: fas fa-info-circle
|
||||
icon: fas fa-info
|
||||
order: 4
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: tags
|
||||
title: Tags
|
||||
icon: fas fa-tag
|
||||
icon: fas fa-tags
|
||||
order: 2
|
||||
---
|
||||
|
||||
2
assets/js/dist/categories.min.js
vendored
2
assets/js/dist/categories.min.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
2
assets/js/dist/commons.min.js
vendored
2
assets/js/dist/commons.min.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
2
assets/js/dist/home.min.js
vendored
2
assets/js/dist/home.min.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
4
assets/js/dist/page.min.js
vendored
4
assets/js/dist/page.min.js
vendored
File diff suppressed because one or more lines are too long
4
assets/js/dist/post.min.js
vendored
4
assets/js/dist/post.min.js
vendored
File diff suppressed because one or more lines are too long
2
assets/js/dist/pvreport.min.js
vendored
2
assets/js/dist/pvreport.min.js
vendored
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@@ -1,28 +1,39 @@
|
||||
<div align="right">
|
||||
|
||||
中文(简体) /
|
||||
[EN](https://github.com/cotes2020/jekyll-theme-chirpy#readme)
|
||||
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy#readme">EN</a> |
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/README.zh-CN.md">中文 (简体)</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
# Chirpy Jekyll Theme
|
||||
|
||||
[](https://rubygems.org/gems/jekyll-theme-chirpy)
|
||||
[](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
|
||||
[](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
|
||||
[](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
|
||||
[](https://996.icu)
|
||||
|
||||
一款简约而强大、采用响应式设计的 Jekyll 主题，适合展示专业写作内容。
|
||||
|
||||
**[线上体验 →](https://chirpy.cotes.info)**
|
||||
|
||||
[](https://chirpy.cotes.info)
|
||||
|
||||
<h1>Chirpy Jekyll Theme</h1>
|
||||
<p>
|
||||
<a href="https://rubygems.org/gems/jekyll-theme-chirpy">
|
||||
<img alt="Gem Version" src="https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen"></img>
|
||||
</a>
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush">
|
||||
<img alt="Build Status" src="https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push"></img>
|
||||
</a>
|
||||
<a href="https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard">
|
||||
<img alt="Codacy Badge" src="https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b"></img>
|
||||
</a>
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE">
|
||||
<img alt="GitHub license" src="https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg"></img>
|
||||
</a>
|
||||
<a href="https://996.icu">
|
||||
<img alt="996.icu" src="https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg"></img>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
一个采用了最简化、侧边栏、响应式设计的 Jekyll 主题，专注于文本展示，旨在帮助您轻松地记录和分享知识。
|
||||
|
||||
[在线体验 »](https://chirpy.cotes.info)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://chirpy.cotes.info">
|
||||
<img alt="Devices Mockup" src="https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png"></img>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## 功能一览
|
||||
|
||||
- 本地化外观语言
|
||||
@@ -43,27 +54,62 @@
|
||||
- SEO 优化
|
||||
- 网站性能优化
|
||||
|
||||
|
||||
## 前提要求
|
||||
|
||||
参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。
|
||||
参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/) 安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。需要注意的是，`Ruby` 的版本必须与主题在 [RubyGems.org](https://rubygems.org/gems/jekyll-theme-chirpy) 上的要求一致.
|
||||
|
||||
## 安装
|
||||
|
||||
### 创建新仓库
|
||||
有二法可得此主题:
|
||||
|
||||
有两种方式可以创建一个使用本主题的仓库：
|
||||
- **[从 RubyGems 安装](#从-rubygems-安装)** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。
|
||||
- **[从 GitHub 上 Fork](#从-github-上-fork)** - 对个性化二次开发友好，但是难于升级，只适合专业开发人员使用。
|
||||
|
||||
- **[使用 Chirpy Starter](#使用-chirpy-starter)** - 易于版本升级，隔离无关的主题项目文件，让您的仓库舒适清爽。
|
||||
### 从 RubyGems 安装
|
||||
|
||||
- **[从 GitHub 上 Fork](#从-github-上-fork)** - 对个性化二次开发友好，但是难于升级。除非您决定魔改此款主题或者参与代码贡献，否则不推荐使用此方式。
|
||||
在您的 Jekyll 站点的 `Gemfile` 添加:
|
||||
|
||||
#### 使用 Chirpy Starter
|
||||
```ruby
|
||||
gem "jekyll-theme-chirpy"
|
||||
```
|
||||
|
||||
[使用 Chirpy Starter][use-starter] 来快速创建 Jekyll 站点，命名为 `<GH_USERNAME>.github.io`，其中 `GH_USERNAME` 是您的 GitHub username。
|
||||
然后，添加这行到您的 Jekyll 站点的 `_config.yml`:
|
||||
|
||||
#### 从 GitHub 上 Fork
|
||||
```yaml
|
||||
theme: jekyll-theme-chirpy
|
||||
```
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 并改名为 `<GH_USERNAME>.github.io`。友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag][latest-tag] 开始写作。
|
||||
接着执行:
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
然后，进入主题的 gem 目录:
|
||||
|
||||
```console
|
||||
$ cd "$(bundle info --path jekyll-theme-chirpy)"
|
||||
```
|
||||
|
||||
拷贝运行站点所需主题的 gem 文件（详见 [starter 仓库][starter] 的文件目录）至您的 Jekyll 站点, 然后把主题的 `_config.yml` 全部内容附加到您的 Jekyll 站点的同名文件。
|
||||
|
||||
> ⚠️ **留意重叠的文件！**
|
||||
>
|
||||
> 如果您的网站是通过命令 `jekyll new` 创建的，那么站点的根目录会存在文件 `index.markdown` 和 `about.markdown`。 请务必删除它们, 否则在网站构建后将覆盖主题的 `index.html` 和 `_tabs/about.html`，引起空白或错乱的页面出现。
|
||||
|
||||
作为替代方案，同时也被我们力荐，您可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点，以省去复制主题 gem 文件的时间。那里早已为您准备好建站需要的一切！
|
||||
|
||||
|
||||
### 从 GitHub 上 Fork
|
||||
|
||||
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。(友情提示：默认分支的代码处于开发状态，如果您想博客更加稳定，请切换到最新的 [Tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) 开始写作。)
|
||||
|
||||
安装依赖：
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
|
||||
接着执行文件初始化:
|
||||
|
||||
@@ -71,28 +117,18 @@
|
||||
$ bash tools/init.sh
|
||||
```
|
||||
|
||||
> **注**：如果您不打算部署到 GitHub Pages， 在上述命令后附加参数选项 `--no-gh`。
|
||||
> 如果您不打算部署到 GitHub Pages, 在上述命令后附加参数选项 `--no-gh`。
|
||||
|
||||
上述脚本将会:
|
||||
上述脚本完成了以下工作:
|
||||
|
||||
1. 从您的仓库中删除了:
|
||||
- `.travis.yml`
|
||||
- `_posts` 下的文件
|
||||
- `docs` 目录
|
||||
|
||||
2. 如果使用了参数 `--no-gh`，则会怒删文件夹 `.github`。否则，配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
|
||||
2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
|
||||
|
||||
3. 从 `.gitignore` 中删除 `Gemfile.lock`。
|
||||
|
||||
4. 自动提交一个 Commit 以保存上述文件的更改。
|
||||
|
||||
### 安装依赖：
|
||||
|
||||
首次运行本项目，需要先安装依赖：
|
||||
|
||||
```console
|
||||
$ bundle
|
||||
```
|
||||
3. 自动提交一个 Commit 以保存上述文件的更改。
|
||||
|
||||
## 使用
|
||||
|
||||
@@ -107,9 +143,9 @@ $ bundle
|
||||
|
||||
### 自定义样式
|
||||
|
||||
如果您需要自定义样式， 拷贝主题的文件 `assets/css/style.scss` 到您站点的相同路径上，然后在该文件末尾添加样式。
|
||||
如果您需要自定义样式, 拷贝主题的文件 `assets/css/style.scss` 到您站点的相同路径上，然后在该文件末尾添加样式。
|
||||
|
||||
自 [`v4.1.0`][chirpy-4.1.0] 起，如果您想覆盖文件 `_sass/addon/variables.scss` 里定义的 SASS 变量的默认值，新建文件 `_sass/variables-hook.scss`，然后重写您需要的变量即可。
|
||||
自 `v4.1.0` 起，如果您想覆盖文件 `_sass/addon/variables.scss` 里定义的 SASS 变量的默认值，新建文件 `_sass/variables-hook.scss`，然后重写您需要的变量即可。
|
||||
|
||||
### 本地运行
|
||||
|
||||
@@ -128,43 +164,36 @@ $ docker run -it --rm \
|
||||
jekyll serve
|
||||
```
|
||||
|
||||
稍候片刻，即可访问本地服务：_<http://localhost:4000>_
|
||||
访问本地服务：<http://localhost:4000>
|
||||
|
||||
### 部署
|
||||
|
||||
部署开始前，把 `_config.yml` 的 `url` 改为 `https://<username>.github.io`（或者您的私有域名，如：`https://yourdomain.com`）。另外，如果您想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
|
||||
部署开始前，把 `_config.yml` 的 `url` 改为 `https://<username>.github.io`(或者您的私有域名，如：`https://yourdomain.com`)。另外，如果您想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
|
||||
|
||||
现在您可以选择下列其中一个方式去站点部署。
|
||||
|
||||
#### 使用 GitHub Actions 部署
|
||||
#### 部署到 GitHub Pages
|
||||
|
||||
由于安全原因，默认的 GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
|
||||
由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
|
||||
|
||||
快速检查 GitHub Actions 构建需要的文件:
|
||||
|
||||
- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入「[示例 Workflow][workflow]」的内容，注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。
|
||||
- 确保您的 Jekyll 站点存在文件 `.github/workflows/pages-deploy.yml`。没有的话，新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和您的仓库默认分支名相同。
|
||||
- 检查您的 Jekyll 站点是否有文件 `tools/test.sh` 和 `tools/deploy.sh`. 没有的话, 从本仓库拷贝到您的 Jekyll 项目.
|
||||
|
||||
- 检查您的 Jekyll 站点是否有文件 `tools/deploy.sh`。没有的话， 从本仓库拷贝到您的 Jekyll 项目。
|
||||
|
||||
- 再者，如果您已经把文件 `Gemfile.lock` 提交到了仓库里面，并且您运行本项目的操作系统不是 Linux，需要添加新的平台信息：
|
||||
|
||||
```console
|
||||
$ bundle lock --add-platform x86_64-linux
|
||||
```
|
||||
|
||||
完成上述条目后，到 GitHub 把您的仓库命名为 `<GH-USERNAME>.github.io`，然后开始发布：
|
||||
在 GitHub 把您的仓库命名为 `<GH-USERNAME>.github.io`，然后开始发布：
|
||||
|
||||
1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
|
||||
|
||||
2. 回到 GitHub 上的仓库，选择标签 _Settings_ → 点击左侧导航栏的 _Pages_ → _GitHub Pages_ 选择分支 `gh-pages` 的 `/(root)` 作为「[发布源][pages-src]」:
|
||||
2. 回到 GitHub 上的仓库， 通过 _Settings_ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site):
|
||||
|
||||
|
||||
|
||||
|
||||
3. 按照 GitHub 指示的地址去访问您的网站。
|
||||
|
||||
#### 手动构建部署
|
||||
#### 部署到其他 Pages 平台
|
||||
|
||||
在 GitHub 之外的平台，就没法享受 **GitHub Actions** 的便利了。因此您需要在本地构建站点，然后推送站点文件到服务器上。
|
||||
在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
|
||||
|
||||
在项目根目录，运行:
|
||||
|
||||
@@ -184,45 +213,25 @@ $ docker run -it --rm \
|
||||
|
||||
生成的静态文件将会在 `_site`， 把内部的文件上传到服务器即可。
|
||||
|
||||
### 升级
|
||||
|
||||
这取决于您如何使用这个 theme：
|
||||
|
||||
- 如果您是使用 theme gem（`Gemfile` 会有 `gem "jekyll-theme-chirpy"`），编辑 `Gemfile` 并更新 them gem 的版本号，譬如：
|
||||
```diff
|
||||
- gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
|
||||
+ gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
|
||||
```
|
||||
|
||||
接着执行以下命令：
|
||||
|
||||
```console
|
||||
$ bundle update jekyll-theme-chirpy
|
||||
```
|
||||
|
||||
随着 theme 版本的升级，运行站点的必要文件（详见 [Chirpy Starter][starter]）以及配置选项会出现变化，请参阅「[升级指南](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide)」的改动细节去保持您仓库中的相关文件同步到最新版本。
|
||||
|
||||
- 如果您是以 fork 的方式使用（您站点的 `Gemfile` 会有 `gemspec`），那么合并上游 [最新的 tag][latest-tag] 到您的 Repo 以完成升级。期间很有可能会产生冲突 (conflicts)，请务必耐心谨慎地解决它们。
|
||||
|
||||
## 文档
|
||||
|
||||
若想要更多细节以及更佳的阅读体验，请参阅「[线上教程](https://chirpy.cotes.info/categories/tutorial/)」。 与此同时，「[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki)」也有一份教程的拷贝。请注意，Demo 网站和 Wiki 上的文档都是基于最新的发行版本，而 `master` 分支的功能往往领先于现有文档。
|
||||
若想要更多细节以及更佳的阅读体验，请参阅 [线上教程](https://chirpy.cotes.info/categories/tutorial/)。 与此同时，[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki) 也有一份教程的拷贝。请注意，Demo 网站和 Wiki 上的文档都是基于最新的发行版本，而 `master` 分支的功能往往领先于现有文档。
|
||||
|
||||
## 参与贡献
|
||||
|
||||
三人行必有我师，欢迎提报告 bug，帮助改进代码质量，或者提交新功能。具体操作规则请参考「[贡献指南](../.github/CONTRIBUTING.md)」，谢谢 🙏。
|
||||
三人行必有我师，欢迎提报告 bug, 帮助改进代码质量，或者提交新功能。具体操作规则请参考 [贡献指南](../.github/CONTRIBUTING.md)，谢谢 🙏。
|
||||
|
||||
## 鸣谢
|
||||
|
||||
此款主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息)。头像和图标的设计来自于 [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/)。
|
||||
这个主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息)。头像和图标的设计来自于 [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/)。
|
||||
|
||||
:tada: 感谢所有参与代码贡献的小伙伴，他们的 GayHub ID 在这个「[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)」。 另外，提交过 issues（或者未被合并 PR）的高富帅和白富美也不会被遗忘，他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。
|
||||
:tada: 感谢所有参与代码贡献的小伙伴, 他们的 GayHub ID 在这个[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)。 另外, 提交过 issues(或者未被合并 PR) 的高富帅和白富美也不会被遗忘,他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。
|
||||
|
||||
还有，感谢 [JetBrains][jb] 提供开源 License！
|
||||
|
||||
## 赞助
|
||||
|
||||
如果您喜欢此款主题或者它对您有帮助，请考虑打赏作者，您的支持将会极大地鼓励作者，并帮助作者更好地维护项目！
|
||||
如果您喜欢这个主题或者它对您有帮助，请考虑打赏作者，您的支持将会极大地鼓励作者，并帮助作者更好地维护项目！
|
||||
|
||||
[](https://www.buymeacoffee.com/coteschung)
|
||||
[][cn-donation]
|
||||
@@ -235,9 +244,6 @@ $ docker run -it --rm \
|
||||
[starter]: https://github.com/cotes2020/chirpy-starter
|
||||
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
|
||||
[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
|
||||
[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
|
||||
[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
|
||||
[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
|
||||
|
||||
<!-- ReadMe links -->
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Gem::Specification.new do |spec|
|
||||
spec.name = "jekyll-theme-chirpy"
|
||||
spec.version = "4.3.1"
|
||||
spec.version = "4.2.1"
|
||||
spec.authors = ["Cotes Chung"]
|
||||
spec.email = ["cotes.chung@gmail.com"]
|
||||
|
||||
@@ -23,7 +23,7 @@ Gem::Specification.new do |spec|
|
||||
"plugin_type" => "theme"
|
||||
}
|
||||
|
||||
spec.required_ruby_version = ">= 2.4"
|
||||
spec.required_ruby_version = [">= 2.4", "< 3.0"]
|
||||
|
||||
spec.add_runtime_dependency "jekyll", "~> 4.1"
|
||||
spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "jekyll-theme-chirpy",
|
||||
"version": "4.3.1",
|
||||
"version": "4.2.1",
|
||||
"description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
|
||||
"main": "index.js",
|
||||
"directories": {
|
||||
|
||||
128
tools/bump.sh
128
tools/bump.sh
@@ -1,24 +1,34 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
# How does it work:
|
||||
#
|
||||
# 1. Bump latest version number to the following files:
|
||||
# 1. Cherry pick the latest commit from default branch
|
||||
# to the target release branch if the target release branch already existed.
|
||||
#
|
||||
# - _sass/jekyll-theme-chirpy.scss
|
||||
# - _javascript/copyright
|
||||
# - assets/js/dist/*.js (will be built by gulp later)
|
||||
# - jekyll-theme-chirpy.gemspec
|
||||
# - package.json
|
||||
# 2. Bump latest version number to the following files:
|
||||
#
|
||||
# - _sass/jekyll-theme-chirpy.scss
|
||||
# - _javascript/copyright
|
||||
# - assets/js/dist/*.js (will be built by gulp later)
|
||||
# - jekyll-theme-chirpy.gemspec
|
||||
# - package.json
|
||||
#
|
||||
# 3. Create a git-tag on release branch
|
||||
#
|
||||
# 4. Build a RubyGems package base on the latest git-tag
|
||||
#
|
||||
# 2. Then create a commit to automatically save the changes.
|
||||
#
|
||||
# Usage:
|
||||
#
|
||||
# Run on the default branch or hotfix branch
|
||||
# Run on default branch, if run on other branch requires parameter '-m' (manual mode).
|
||||
#
|
||||
# Requires: Git, Gulp
|
||||
#
|
||||
# Requires: Git, Gulp, RubyGems
|
||||
|
||||
set -eu
|
||||
|
||||
opt_manual=false
|
||||
|
||||
ASSETS=(
|
||||
"_sass/jekyll-theme-chirpy.scss"
|
||||
"_javascript/copyright"
|
||||
@@ -28,6 +38,10 @@ GEM_SPEC="jekyll-theme-chirpy.gemspec"
|
||||
|
||||
NODE_META="package.json"
|
||||
|
||||
DEFAULT_BRANCH="master"
|
||||
|
||||
_working_branch="$(git branch --show-current)"
|
||||
|
||||
_check_src() {
|
||||
if [[ ! -f $1 && ! -d $1 ]]; then
|
||||
echo -e "Error: Missing file \"$1\"!\n"
|
||||
@@ -41,6 +55,12 @@ check() {
|
||||
exit -1
|
||||
fi
|
||||
|
||||
# ensure working on default branch or running in 'manual' mode
|
||||
if [[ $_working_branch != $DEFAULT_BRANCH && $opt_manual == "false" ]]; then
|
||||
echo "Error: This operation must be performed on the 'master' branch or '--manual' mode!"
|
||||
exit -1
|
||||
fi
|
||||
|
||||
for i in "${!ASSETS[@]}"; do
|
||||
_check_src "${ASSETS[$i]}"
|
||||
done
|
||||
@@ -78,6 +98,75 @@ bump() {
|
||||
fi
|
||||
}
|
||||
|
||||
build_gem() {
|
||||
rm -f ./*.gem
|
||||
gem build "$GEM_SPEC"
|
||||
}
|
||||
|
||||
release() {
|
||||
_version="$1"
|
||||
_major=""
|
||||
_minor=""
|
||||
_new_release_branch=false
|
||||
|
||||
IFS='.' read -r -a array <<< "$_version"
|
||||
|
||||
for elem in "${array[@]}"; do
|
||||
if [[ -z $_major ]]; then
|
||||
_major="$elem"
|
||||
elif [[ -z $_minor ]]; then
|
||||
_minor="$elem"
|
||||
else
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
_release_branch="$_major-$_minor-stable"
|
||||
|
||||
if ! $opt_manual; then
|
||||
if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
|
||||
git checkout -b "$_release_branch"
|
||||
_new_release_branch=true
|
||||
else
|
||||
# cherry-pick the latest commit from default branch to release branch
|
||||
_last_commit="$(git rev-parse $DEFAULT_BRANCH)"
|
||||
git checkout "$_release_branch"
|
||||
git cherry-pick "$_last_commit" -m 1
|
||||
fi
|
||||
|
||||
fi
|
||||
|
||||
echo -e "Bump version to $_version\n"
|
||||
bump "$_version"
|
||||
|
||||
echo -e "Create tag v$_version\n"
|
||||
git tag "v$_version"
|
||||
|
||||
echo -e "Build the gem pakcage for v$_version\n"
|
||||
build_gem
|
||||
|
||||
# head back to working branch
|
||||
git checkout "$_working_branch"
|
||||
|
||||
if [[ $_working_branch == $DEFAULT_BRANCH ]]; then
|
||||
if $_new_release_branch; then
|
||||
git merge "$_release_branch"
|
||||
fi
|
||||
fi
|
||||
|
||||
}
|
||||
|
||||
help() {
|
||||
echo "Bump new version to Chirpy project"
|
||||
echo "Usage:"
|
||||
echo
|
||||
echo " bash /path/to/bump.sh [options]"
|
||||
echo
|
||||
echo "Options:"
|
||||
echo " -m, --manual Manual relase, bump version only."
|
||||
echo " -h, --help Print this help information."
|
||||
}
|
||||
|
||||
main() {
|
||||
check
|
||||
|
||||
@@ -94,8 +183,7 @@ main() {
|
||||
exit -1
|
||||
fi
|
||||
|
||||
echo -e "Bump version to $_version\n"
|
||||
bump "$_version"
|
||||
release "$_version"
|
||||
|
||||
else
|
||||
|
||||
@@ -104,4 +192,22 @@ main() {
|
||||
|
||||
}
|
||||
|
||||
while (($#)); do
|
||||
opt="$1"
|
||||
case $opt in
|
||||
-m | --manual)
|
||||
opt_manual=true
|
||||
shift
|
||||
;;
|
||||
-h | --help)
|
||||
help
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
echo "unknown option '$opt'!"
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
main
|
||||
|
||||
106
tools/deploy.sh
106
tools/deploy.sh
@@ -1,80 +1,22 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
# Build, test and then deploy the site content to 'origin/<pages_branch>'
|
||||
#
|
||||
# Requirement: html-proofer, jekyll
|
||||
#
|
||||
# Usage: See help information
|
||||
# Deploy the content of _site to 'origin/<pages_branch>'
|
||||
|
||||
set -eu
|
||||
|
||||
PAGES_BRANCH="gh-pages"
|
||||
|
||||
SITE_DIR="_site"
|
||||
|
||||
_opt_dry_run=false
|
||||
|
||||
_config="_config.yml"
|
||||
|
||||
_no_pages_branch=false
|
||||
|
||||
_no_branch=false
|
||||
_backup_dir="$(mktemp -d)"
|
||||
|
||||
_baseurl=""
|
||||
|
||||
help() {
|
||||
echo "Build, test and then deploy the site content to 'origin/<pages_branch>'"
|
||||
echo
|
||||
echo "Usage:"
|
||||
echo
|
||||
echo " bash ./tools/deploy.sh [options]"
|
||||
echo
|
||||
echo "Options:"
|
||||
echo ' -c, --config "<config_a[,config_b[...]]>" Specify config file(s)'
|
||||
echo " --dry-run Build site and test, but not deploy"
|
||||
echo " -h, --help Print this information."
|
||||
}
|
||||
|
||||
init() {
|
||||
if [[ -z ${GITHUB_ACTION+x} && $_opt_dry_run == 'false' ]]; then
|
||||
echo "ERROR: It is not allowed to deploy outside of the GitHub Action envrionment."
|
||||
echo "Type option '-h' to see the help information."
|
||||
if [[ -z ${GITHUB_ACTION+x} ]]; then
|
||||
echo "ERROR: This script is not allowed to run outside of GitHub Action."
|
||||
exit -1
|
||||
fi
|
||||
|
||||
_baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
|
||||
}
|
||||
|
||||
build() {
|
||||
# clean up
|
||||
if [[ -d $SITE_DIR ]]; then
|
||||
rm -rf "$SITE_DIR"
|
||||
fi
|
||||
|
||||
# build
|
||||
JEKYLL_ENV=production bundle exec jekyll b -d "$SITE_DIR$_baseurl" --config "$_config"
|
||||
}
|
||||
|
||||
test() {
|
||||
bundle exec htmlproofer \
|
||||
--disable-external \
|
||||
--check-html \
|
||||
--allow_hash_href \
|
||||
"$SITE_DIR"
|
||||
}
|
||||
|
||||
resume_site_dir() {
|
||||
if [[ -n $_baseurl ]]; then
|
||||
# Move the site file to the regular directory '_site'
|
||||
mv "$SITE_DIR$_baseurl" "${SITE_DIR}-rename"
|
||||
rm -rf "$SITE_DIR"
|
||||
mv "${SITE_DIR}-rename" "$SITE_DIR"
|
||||
fi
|
||||
}
|
||||
|
||||
setup_gh() {
|
||||
if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
|
||||
_no_pages_branch=true
|
||||
_no_branch=true
|
||||
git checkout -b "$PAGES_BRANCH"
|
||||
else
|
||||
git checkout "$PAGES_BRANCH"
|
||||
@@ -82,7 +24,7 @@ setup_gh() {
|
||||
}
|
||||
|
||||
backup() {
|
||||
mv "$SITE_DIR"/* "$_backup_dir"
|
||||
mv _site/* "$_backup_dir"
|
||||
mv .git "$_backup_dir"
|
||||
|
||||
# When adding custom domain from Github website,
|
||||
@@ -108,7 +50,7 @@ deploy() {
|
||||
git add -A
|
||||
git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
|
||||
|
||||
if $_no_pages_branch; then
|
||||
if $_no_branch; then
|
||||
git push -u origin "$PAGES_BRANCH"
|
||||
else
|
||||
git push -f
|
||||
@@ -117,43 +59,9 @@ deploy() {
|
||||
|
||||
main() {
|
||||
init
|
||||
build
|
||||
test
|
||||
resume_site_dir
|
||||
|
||||
if $_opt_dry_run; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
setup_gh
|
||||
backup
|
||||
flush
|
||||
deploy
|
||||
}
|
||||
|
||||
while (($#)); do
|
||||
opt="$1"
|
||||
case $opt in
|
||||
-c | --config)
|
||||
_config="$2"
|
||||
shift
|
||||
shift
|
||||
;;
|
||||
--dry-run)
|
||||
# build & test, but not deploy
|
||||
_opt_dry_run=true
|
||||
shift
|
||||
;;
|
||||
-h | --help)
|
||||
help
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
# unknown option
|
||||
help
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
main
|
||||
|
||||
@@ -6,8 +6,6 @@ set -eu
|
||||
|
||||
ACTIONS_WORKFLOW=pages-deploy.yml
|
||||
|
||||
TEMP_SUFFIX="to-delete" # temporary file suffixes that make `sed -i` compatible with BSD and Linux
|
||||
|
||||
help() {
|
||||
echo "Usage:"
|
||||
echo
|
||||
@@ -18,13 +16,6 @@ help() {
|
||||
echo " -h, --help Print this help information."
|
||||
}
|
||||
|
||||
check_status() {
|
||||
if [[ -n $(git status . -s) ]]; then
|
||||
echo "Error: Commit unstaged files first, and then run this tool againt."
|
||||
exit -1
|
||||
fi
|
||||
}
|
||||
|
||||
check_init() {
|
||||
local _has_inited=false
|
||||
|
||||
@@ -49,48 +40,25 @@ check_init() {
|
||||
}
|
||||
|
||||
init_files() {
|
||||
|
||||
if $_no_gh; then
|
||||
rm -rf .github
|
||||
else
|
||||
## Change the files of `.github`
|
||||
|
||||
mv .github/workflows/$ACTIONS_WORKFLOW.hook .
|
||||
rm -rf .github
|
||||
mkdir -p .github/workflows
|
||||
mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
|
||||
|
||||
## Ensure the gh-actions trigger branch
|
||||
|
||||
_workflow=".github/workflows/${ACTIONS_WORKFLOW}"
|
||||
_default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
|
||||
_lineno="$(sed -n "/branches:/=" "$_workflow")"
|
||||
|
||||
sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
|
||||
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
|
||||
|
||||
# trace the gem lockfile on user-end
|
||||
sed -i.$TEMP_SUFFIX "/Gemfile.lock/d" .gitignore
|
||||
rm -f ".gitignore.$TEMP_SUFFIX"
|
||||
|
||||
# remove the other fies
|
||||
rm -f .travis.yml
|
||||
rm -rf _posts/* docs
|
||||
|
||||
# save changes
|
||||
git add -A && git add .github -f
|
||||
git commit -m "[Automation] Initialize the environment." -q
|
||||
|
||||
echo "[INFO] Initialization successful!"
|
||||
}
|
||||
|
||||
check_status
|
||||
|
||||
check_init
|
||||
|
||||
_no_gh=false
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
# According to the GitLab flow release branching model,
|
||||
# cherry-pick the last commit on the main branch to the release branch,
|
||||
# and then create a tag and gem package on the release branch (naming format: 'release/<X.Y>').
|
||||
#
|
||||
#
|
||||
# Usage:
|
||||
#
|
||||
# It can be run on main branch, and it should be used after just finishing the last feature in the version plan,
|
||||
# or just after merging the hotfix to the main branch.
|
||||
#
|
||||
# Requires: Git, Gulp
|
||||
|
||||
set -eu
|
||||
|
||||
GEM_SPEC="jekyll-theme-chirpy.gemspec"
|
||||
|
||||
check() {
|
||||
if [[ -n $(git status . -s) ]]; then
|
||||
echo "Error: Commit unstaged files first, and then run this tool againt."
|
||||
exit -1
|
||||
fi
|
||||
|
||||
if [[ ! -f $GEM_SPEC ]]; then
|
||||
echo -e "Error: Missing file \"$GEM_SPEC\"!\n"
|
||||
exit -1
|
||||
fi
|
||||
}
|
||||
|
||||
release() {
|
||||
_default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
|
||||
_version="$(grep "spec.version" jekyll-theme-chirpy.gemspec | sed 's/.*= "//;s/".*//')" # X.Y.Z
|
||||
_release_branch="release/${_version%.*}"
|
||||
|
||||
if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
|
||||
# create a new release branch
|
||||
git checkout -b "$_release_branch"
|
||||
else
|
||||
# cherry-pick the latest commit from default branch to release branch
|
||||
_last_commit="$(git rev-parse "$_default_branch")"
|
||||
git checkout "$_release_branch"
|
||||
git cherry-pick "$_last_commit" -m 1
|
||||
fi
|
||||
|
||||
# create new tag
|
||||
echo -e "Create tag v$_version\n"
|
||||
git tag "v$_version"
|
||||
|
||||
# build a gem package
|
||||
echo -e "Build the gem pakcage for v$_version\n"
|
||||
rm -f ./*.gem
|
||||
gem build "$GEM_SPEC"
|
||||
|
||||
}
|
||||
|
||||
main() {
|
||||
check
|
||||
release
|
||||
}
|
||||
|
||||
main
|
||||
64
tools/test.sh
Executable file
64
tools/test.sh
Executable file
@@ -0,0 +1,64 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
# Using HTML-proofer to test site.
|
||||
#
|
||||
# Requirement: https://github.com/gjtorikian/html-proofer
|
||||
#
|
||||
# Usage: bash /path/to/test.sh [indicated path]
|
||||
|
||||
DEST=_site
|
||||
|
||||
_build=false
|
||||
|
||||
help() {
|
||||
echo "Usage:"
|
||||
echo
|
||||
echo " bash ./tools/test.sh [options]"
|
||||
echo
|
||||
echo "Options:"
|
||||
echo " --build Run Jekyll build before test."
|
||||
echo " -d, --dir <path> Specify the test path."
|
||||
echo " -h, --help Print this information."
|
||||
}
|
||||
|
||||
if [[ -n $1 && -d $1 ]]; then
|
||||
DEST=$1
|
||||
fi
|
||||
|
||||
while (($#)); do
|
||||
opt="$1"
|
||||
case $opt in
|
||||
--build)
|
||||
_build=true
|
||||
shift
|
||||
;;
|
||||
-d | --dir)
|
||||
if [[ ! -d $2 ]]; then
|
||||
echo -e "Error: path '$2' doesn't exist\n"
|
||||
help
|
||||
exit 1
|
||||
fi
|
||||
DEST=$2
|
||||
shift
|
||||
shift
|
||||
;;
|
||||
-h | --help)
|
||||
help
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
# unknown option
|
||||
help
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
if $_build; then
|
||||
JEKYLL_ENV=production bundle exec jekyll b
|
||||
fi
|
||||
|
||||
bundle exec htmlproofer "$DEST" \
|
||||
--disable-external \
|
||||
--check-html \
|
||||
--allow_hash_href
|
||||
Reference in New Issue
Block a user