Improve code style

- js/css
- markdown
- shell
This commit is contained in:
Cotes Chung 2021-01-27 20:06:31 +08:00
parent d8a42d9bb4
commit 8e84c6b9d6
14 changed files with 961 additions and 917 deletions

View File

@ -48,8 +48,8 @@ Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete th
There are two ways to get the theme: There are two ways to get the theme:
- Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
- Fork from GitHub - Fork from GitHub
### Install From Rubygems ### Install From Rubygems
@ -81,9 +81,6 @@ $ bundle info --path jekyll-theme-chirpy
Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem. Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
[starter]: https://github.com/cotes2020/chirpy-starter
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
### Fork From GitHub ### Fork From GitHub
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local. [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
@ -104,16 +101,15 @@ $ bash tools/init.sh
What it does is: What it does is:
1. Remove some files or directories from your repository: 1. Remove some files or directories from your repository:
- `.travis.yml` - `.travis.yml`
- files under `_posts` - files under `_posts`
- folder `docs` - folder `docs`
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. 2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
3. Automatically create a commit to save the changes.
3. Automatically create a commit to save the changes.
## Usage ## Usage
@ -121,10 +117,10 @@ What it does is:
Update the variables of `_config.yml` as needed. Some of them are typical options: Update the variables of `_config.yml` as needed. Some of them are typical options:
- `url` - `url`
- `avatar` - `avatar`
- `timezone` - `timezone`
- `theme_mode` - `theme_mode`
### Running Local Server ### Running Local Server
@ -157,23 +153,20 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us
Quickly check the files needed for GitHub Actions build: Quickly check the files needed for GitHub Actions build:
1. 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. 1. 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.
2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
Next, rename your repoistory to `<GH-USERNAME>.github.io` on GitHub. Next, rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
And then publish your Jekyll site by: And then 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. 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 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) throught _Settings__Options__GitHub Pages_: 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) throught _Settings__Options__GitHub Pages_:
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
3. Visit your website at the address indicated by GitHub. 3. Visit your website at the address indicated by GitHub.
#### Deploy on Other Platforms #### Deploy on Other Platforms
@ -197,7 +190,6 @@ $ docker run -it --rm \
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. 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 ## Documentation
For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
@ -212,11 +204,9 @@ This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Boot
:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation. :tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
Also, thank [JetBrains][JB] for providing the open source license. Also, thank [JetBrains][jb] for providing the open source license.
[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB] [![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][jb]
[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy
## Supporting ## Supporting
@ -225,3 +215,8 @@ If you enjoy this theme or find it helpful, please consider becoming my sponsor,
## License ## License
This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License. This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
[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
[jb]:https://www.jetbrains.com/?from=jekyll-theme-chirpy

View File

@ -15,8 +15,8 @@ Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete th
There are two ways to get the theme: There are two ways to get the theme:
- Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
- Fork from GitHub - Fork from GitHub
### Install From Rubygems ### Install From Rubygems
@ -48,9 +48,6 @@ $ bundle info --path jekyll-theme-chirpy
Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem. Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
[starter]: https://github.com/cotes2020/chirpy-starter
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
### Fork From GitHub ### Fork From GitHub
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local. [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
@ -71,15 +68,15 @@ $ bash tools/init.sh
What it does is: What it does is:
1. Remove some files or directories from your repository: 1. Remove some files or directories from your repository:
- `.travis.yml` - `.travis.yml`
- files under `_posts` - files under `_posts`
- folder `docs` - folder `docs`
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. 2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
3. Automatically create a commit to save the changes. 3. Automatically create a commit to save the changes.
## Usage ## Usage
@ -88,10 +85,10 @@ What it does is:
Update the variables of `_config.yml` as needed. Some of them are typical options: Update the variables of `_config.yml` as needed. Some of them are typical options:
- `url` - `url`
- `avatar` - `avatar`
- `timezone` - `timezone`
- `theme_mode` - `theme_mode`
### Running Local Server ### Running Local Server
@ -124,23 +121,20 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us
Quickly check the files needed for GitHub Actions build: Quickly check the files needed for GitHub Actions build:
1. 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. 1. 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.
2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
Next, rename your repoistory to `<GH-USERNAME>.github.io` on GitHub. Next, rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
And then publish your Jekyll site by: And then 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. 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 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) throught _Settings__Options__GitHub Pages_: 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) throught _Settings__Options__GitHub Pages_:
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
3. Visit your website at the address indicated by GitHub. 3. Visit your website at the address indicated by GitHub.
#### Deploy on Other Platforms #### Deploy on Other Platforms

View File

@ -16,10 +16,10 @@ This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme bas
First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well. First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well.
1. Head to <https://analytics.google.com/> and click on **Start Measuring** 1. Head to <https://analytics.google.com/> and click on **Start Measuring**
2. Enter your desired *Account Name* and choose the desired checkboxes 2. Enter your desired _Account Name_ and choose the desired checkboxes
3. Enter your desired *Property Name*. This is the name of the tracker project that appears on your Google Analytics dashboard 3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard
4. Enter the required information *About your business* 4. Enter the required information _About your business_
5. Hit *Create* and accept any license popup to setup your Google Analytics account and create your property 5. Hit _Create_ and accept any license popup to setup your Google Analytics account and create your property
### Create Data Stream ### Create Data Stream
@ -75,9 +75,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
8. Click on **Enable APIs and Services** button on the top 8. Click on **Enable APIs and Services** button on the top
9. Enable the following APIs: *Google Analytics API* 9. Enable the following APIs: _Google Analytics API_
10. On the left, Click on *OAuth Consent Screen* and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under *Publishing Status* 10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_
11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth` 11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
@ -116,10 +116,11 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local. 1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file: 2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
```diff
- application: your-project-id ```yaml
- version: 1 -application: your-project-id
``` -version: 1
```
3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard. 3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard.
@ -143,7 +144,8 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
# XSRF Settings # XSRF Settings
XSRF_KEY = 'OnceUponATimeThereLivedALegend' XSRF_KEY = 'OnceUponATimeThereLivedALegend'
``` ```
**Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
**Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
5. From inside the src/ directory, deploy the app 5. From inside the src/ directory, deploy the app
@ -194,20 +196,17 @@ Head to `https://PROJECT_ID.REGION_ID.r.appspot.com/admin` and create a query af
The query parameters are as follows: The query parameters are as follows:
- **start-date**: fill in the first day of blog posting - **start-date**: fill in the first day of blog posting
- **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date) - **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date)
- **metrics**: select `ga:pageviews` - **metrics**: select `ga:pageviews`
- **dimensions**: select `ga:pagePath` - **dimensions**: select `ga:pagePath`
In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]: In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]:
- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=` - **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`.
Among them, `;` means using _logical AND_ to concatenate two rules. Among them, `;` means using _logical AND_ to concatenate two rules.
If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`. If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE. After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE.
@ -224,6 +223,7 @@ Once all the hard part is done, it is very easy to enable the Page View on Chirp
Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following: Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
```yaml ```yaml
google_analytics: google_analytics:
id: 'G-XXXXXXXXXX' # Fill with your Google Analytics ID id: 'G-XXXXXXXXXX' # Fill with your Google Analytics ID

File diff suppressed because it is too large Load Diff

View File

@ -100,6 +100,7 @@
@mixin panel-label { @mixin panel-label {
@include label(inherit); @include label(inherit);
display: block; display: block;
line-height: 1.2; line-height: 1.2;
padding-top: 0.5rem; padding-top: 0.5rem;

View File

@ -6,17 +6,18 @@
* MIT Licensed * MIT Licensed
*/ */
@import "colors/light-typography"; @import
@import "colors/dark-typography"; "colors/light-typography",
"colors/dark-typography",
@import "addon/module"; "addon/module",
@import "addon/variables"; "addon/variables",
@import 'addon/syntax'; "addon/syntax",
@import "addon/commons"; "addon/commons",
@import "layout/home"; "layout/home",
@import "layout/post"; "layout/post",
@import "layout/tags"; "layout/tags",
@import "layout/archives"; "layout/archives",
@import "layout/categories"; "layout/categories",
@import "layout/category-tag"; "layout/category-tag";

View File

@ -14,34 +14,12 @@
#archives { #archives {
letter-spacing: 0.03rem; letter-spacing: 0.03rem;
li {
font-size: 1.1rem;
line-height: 3rem;
&:nth-child(odd) {
background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(
to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
}
> div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
span.lead { span.lead {
font-size: 1.5rem; font-size: 1.5rem;
position: relative; position: relative;
left: 8px; left: 8px;
&:not(:first-child) {
position: relative;
left: 4px;
&::after {
left: 67px;
}
}
&::after { /* Year dot */ &::after { /* Year dot */
content: ""; content: "";
display: block; display: block;
@ -59,8 +37,64 @@
box-shadow: 0 0 2px 0 #c2c6cc; box-shadow: 0 0 2px 0 #c2c6cc;
z-index: 1; z-index: 1;
} }
&:not(:first-child) {
position: relative;
left: 4px;
&::after {
left: 67px;
}
}
} // #archives span.lead } // #archives span.lead
ul {
li {
font-size: 1.1rem;
line-height: 3rem;
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
/* post title in Archvies */
margin-left: 2.5rem;
position: relative;
top: 0.1rem;
}
}
&:nth-child(odd) {
background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
}
&::after {
@extend %date-timeline;
height: 2.8rem;
top: -1.3rem;
}
&:first-child::before {
@extend %date-timeline;
height: 3.06rem;
top: -1.61rem;
}
}
&:not(:last-child) > li:last-child::after {
height: 3.4rem;
}
&:last-child > li:last-child::after {
display: none;
}
} // #archives ul
.date { .date {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
@ -97,36 +131,8 @@
} }
} // #archives .date } // #archives .date
ul {
> li {
> div > a {
/* post title in Archvies */
margin-left: 2.5rem;
position: relative;
top: 0.1rem;
}
&::after {
@extend %date-timeline;
height: 2.8rem;
top: -1.3rem;
}
&:first-child::before {
@extend %date-timeline;
height: 3.06rem;
top: -1.61rem;
}
}
&:not(:last-child) > li:last-child::after {
height: 3.4rem;
}
&:last-child > li:last-child::after {
display: none;
}
} // #archives ul
} // #archives } // #archives
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#archives { #archives {
margin-top: -1rem; margin-top: -1rem;

View File

@ -11,6 +11,14 @@
.card-header { .card-header {
padding-right: 12px; padding-right: 12px;
} }
i {
&.far,
&.fas {
font-size: 86%; // fontawesome icons
}
}
.list-group-item { .list-group-item {
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -29,12 +37,6 @@
@extend %category-icon-color; @extend %category-icon-color;
} }
i {
&.far, &.fas {
font-size: 86%; // fontawesome icons
}
}
} // .categories } // .categories
.category-trigger { .category-trigger {
@ -42,7 +44,7 @@
height: 1.7rem; height: 1.7rem;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
color: #6c757d!important; color: #6c757d !important;
> i.fas { > i.fas {
position: relative; position: relative;
height: 0.7rem; height: 0.7rem;

View File

@ -2,10 +2,17 @@
Style for page Category and Tag Style for page Category and Tag
*/ */
#page-category, #page-tag { .dash {
margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted var(--dash-color);
}
#page-category,
#page-tag {
ul > li { ul > li {
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.6rem 0; padding: 0.6rem 0;
&::before { // dot &::before { // dot
background: #999; background: #999;
width: 5px; width: 5px;
@ -17,14 +24,16 @@
top: 0.6rem; top: 0.6rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
> a { /* post's title */ > a { /* post's title */
font-size: 1.1rem;
@extend %no-bottom-border; @extend %no-bottom-border;
font-size: 1.1rem;
} }
> span:last-child { > span:last-child {
white-space: nowrap; white-space: nowrap;
} } /* post's date */
/* post's date */
} }
} }
@ -36,22 +45,19 @@
font-size: 1.25rem; font-size: 1.25rem;
} }
a:hover { #page-category,
#page-category &, #page-tag,
#page-tag &, #access-lastmod {
#access-lastmod & { a:hover {
@extend %link-hover; @extend %link-hover;
margin-bottom: -1px; // Avoid jumping margin-bottom: -1px; // Avoid jumping
} }
} }
.dash {
margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted var(--dash-color);
}
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#page-category, #page-tag { #page-category,
#page-tag {
ul > li { ul > li {
&::before { &::before {
margin: 0 .5rem; margin: 0 .5rem;

View File

@ -2,6 +2,60 @@
Style for Homepage Style for Homepage
*/ */
.pagination {
font-size: 1rem;
a:hover {
text-decoration: none;
}
.page-item {
.page-link {
color: var(--btn-patinator-text-color);
width: 2.5rem;
height: 2.5rem;
padding: 0;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 50%;
border: 1px solid var(--btn-paginator-border-color);
font-family: 'Lato', sans-serif;
background-color: var(--button-bg);
&:hover {
background-color: var(--btn-paginator-hover-color);
}
}
&.active {
.page-link {
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);
}
}
&.disabled {
cursor: not-allowed;
.page-link {
color: rgba(108, 117, 125, 0.57);
border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg);
}
}
&:first-child .page-link,
&:last-child .page-link {
border-radius: 50%;
}
&:not(:last-child) {
margin-right: 0.7rem;
}
} // .page-item
} // .pagination
#post-list { #post-list {
margin-top: 1rem; margin-top: 1rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@ -11,6 +65,10 @@
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
a:hover {
@extend %link-hover;
}
h1 { h1 {
font-size: 1.4rem; font-size: 1.4rem;
margin: 0; margin: 0;
@ -55,60 +113,6 @@
} // #post-list } // #post-list
.pagination {
font-size: 1rem;
a:hover {
text-decoration: none;
}
.page-item {
.page-link {
color: var(--btn-patinator-text-color);
width: 2.5rem;
height: 2.5rem;
padding: 0;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 50%;
border: 1px solid var(--btn-paginator-border-color);
font-family: 'Lato', sans-serif;
background-color: var(--button-bg);
&:hover {
background-color: var(--btn-paginator-hover-color)
}
}
&.active {
.page-link {
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);
}
}
&.disabled {
cursor: not-allowed;
.page-link {
color: rgba(108, 117, 125, 0.57);
border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg);
}
}
&:first-child .page-link,
&:last-child .page-link {
border-radius: 50%;
}
&:not(:last-child) {
margin-right: 0.7rem;
}
} // .page-item
} // .pagination
/* Hide SideBar and TOC */ /* Hide SideBar and TOC */
@media all and (max-width: 830px) { @media all and (max-width: 830px) {
.pagination { .pagination {

View File

@ -4,7 +4,7 @@
@mixin btn-sharing-color($light-color, $important: false) { @mixin btn-sharing-color($light-color, $important: false) {
@if $important { @if $important {
color: var(--btn-share-color, $light-color)!important; color: var(--btn-share-color, $light-color) !important;
} @else { } @else {
color: var(--btn-share-color, $light-color); color: var(--btn-share-color, $light-color);
} }
@ -41,9 +41,10 @@
.post-content { .post-content {
.preview-img { .preview-img {
@include align-center;
margin-top: 0; margin-top: 0;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@include align-center;
} }
} }
@ -63,6 +64,7 @@
.btn { .btn {
@include btn-post-nav; @include btn-post-nav;
color: var(--link-color); color: var(--link-color);
&:hover { &:hover {
background: #2a408e; background: #2a408e;
@ -71,6 +73,7 @@
} }
&.disabled { &.disabled {
@include btn-post-nav; @include btn-post-nav;
pointer-events: auto; pointer-events: auto;
cursor: not-allowed; cursor: not-allowed;
background: none; background: none;
@ -139,17 +142,16 @@
} }
} }
#toc li>a { #toc li > a {
line-height: 1rem; line-height: 1rem;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
/* --- Related Posts --- */
/*--- Related Posts ---*/
#related-posts { #related-posts {
>h3 { > h3 {
@include label(1.1rem, 600); @include label(1.1rem, 600);
} }
.card { .card {
@ -165,7 +167,7 @@
&:hover { &:hover {
-webkit-transform: translate3d(0, -3px, 0); -webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15); box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
} }
} }
@ -190,7 +192,7 @@
ul { ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 1.5rem; padding-inline-start: 1.5rem;
>li::before { > li::before {
background: #c2c9d4; background: #c2c9d4;
width: 5px; width: 5px;
height: 5px; height: 5px;
@ -216,12 +218,17 @@
} }
%btn-share-hovor { %btn-share-hovor {
color: var(--btn-share-hover-color)!important; color: var(--btn-share-hover-color) !important;
} }
.share-wrapper { .share-wrapper {
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
i {
font-weight: 400;
}
.share-icons { .share-icons {
font-size: 1.2rem; font-size: 1.2rem;
a { a {
@ -230,12 +237,12 @@
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
>i { > i {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
} }
} }
>i { > i {
padding-top: 0.35rem; padding-top: 0.35rem;
&:hover { &:hover {
@extend %btn-share-hovor; @extend %btn-share-hovor;
@ -243,7 +250,7 @@
} }
.fab { .fab {
&.fa-twitter { &.fa-twitter {
@include btn-sharing-color(rgba(29, 161, 242, 1.00)); @include btn-sharing-color(rgba(29, 161, 242, 1));
} }
&.fa-facebook-square { &.fa-facebook-square {
@include btn-sharing-color(rgb(66, 95, 156)); @include btn-sharing-color(rgb(66, 95, 156));
@ -264,9 +271,9 @@
} // .share-wrapper } // .share-wrapper
.share-label { .share-label {
@include label(inherit, 400, inherit); @include label(inherit, 400, inherit);
&::after { &::after {
content: ":"; content: ":";
} }
@ -274,25 +281,22 @@
.license-wrapper { .license-wrapper {
line-height: 1.2rem; line-height: 1.2rem;
>a { > a {
font-weight: 600; font-weight: 600;
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
} }
} }
i {
font-weight: 400;
}
span:last-child { span:last-child {
font-size: 0.85rem; font-size: 0.85rem;
} }
} // .license-wrapper } // .license-wrapper
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
.post-tail-bottom { .post-tail-bottom {
-ms-flex-wrap: wrap-reverse!important; -ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse!important; flex-wrap: wrap-reverse !important;
>div:first-child { >div:first-child {
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@ -301,8 +305,8 @@
.post-content > div[class^='language-'] { .post-content > div[class^='language-'] {
@include ml-mr(-1.25rem); @include ml-mr(-1.25rem);
border-radius: 0;
border-radius: 0;
&::before { // the lang badge &::before { // the lang badge
right: 1rem; right: 1rem;
} }
@ -323,10 +327,10 @@
@include dot(0.5rem, 0.2rem); @include dot(0.5rem, 0.2rem);
} }
&.flex-column { &.flex-column {
-webkit-box-orient: horizontal!important; -webkit-box-orient: horizontal !important;
-webkit-box-direction: normal!important; -webkit-box-direction: normal !important;
-ms-flex-direction: row!important; -ms-flex-direction: row !important;
flex-direction: row!important; flex-direction: row !important;
} }
} }
} // .post } // .post

View File

@ -53,8 +53,8 @@ Language: [English](https://github.com/cotes2020/jekyll-theme-chirpy#readme) |
有二法可得此主题: 有二法可得此主题:
- 从 [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) 安装 - 从 [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) 安装
- 从 GitHub 上 Fork - 从 GitHub 上 Fork
### Rubygems 安装 ### Rubygems 安装
@ -86,9 +86,6 @@ $ bundle info --path jekyll-theme-chirpy
或者你可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点,以省去复制主题 gem 文件的时间。 或者你可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点,以省去复制主题 gem 文件的时间。
[starter]: https://github.com/cotes2020/chirpy-starter
[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
### 在 GitHub 上 Fork ### 在 GitHub 上 Fork
[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。 [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。
@ -109,15 +106,15 @@ $ bash tools/init.sh
上述脚本完成了以下工作: 上述脚本完成了以下工作:
1. 从你的仓库中删除了: 1. 从你的仓库中删除了:
- `.travis.yml` - `.travis.yml`
- `_posts` 下的文件 - `_posts` 下的文件
- `docs` 目录 - `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. 自动提交一个 Commit 以保存上述文件的更改。 3. 自动提交一个 Commit 以保存上述文件的更改。
## 使用 ## 使用
@ -159,19 +156,20 @@ $ docker run -it --rm \
由于安全原因GitHub Pages 的构建强制加了 `safe`参数,这导致了我们不能使用插件去创建所需的附加页面。因此,我们可以使用 GitHub Actions 去构建站点,把站点文件存储在一个新分支上,再指定该分支作为 Pages 服务的源。 由于安全原因GitHub Pages 的构建强制加了 `safe`参数,这导致了我们不能使用插件去创建所需的附加页面。因此,我们可以使用 GitHub Actions 去构建站点,把站点文件存储在一个新分支上,再指定该分支作为 Pages 服务的源。
确保你的 Jekyll 站点存在文件 `/.github/workflows/pages-deploy.yml`。没有的话,新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和你的仓库默认分支名相同。 快速检查 GitHub Actions 构建需要的文件:
[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook 1. 确保你的 Jekyll 站点存在文件 `/.github/workflows/pages-deploy.yml`。没有的话,新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和你的仓库默认分支名相同。
2. 检查你的 Jekyll 站点是否有文件 `/tools/test.sh``/tools/deploy.sh`. 没有的话, 从本仓库拷贝到你的 Jekyll 项目.
在 GitHub 把你的仓库命名为 `<GH-USERNAME>.github.io`,然后: 在 GitHub 把你的仓库命名为 `<GH-USERNAME>.github.io`,然后:
1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功,远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。 1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功,远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
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): 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):
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
3. 按照 GitHub 指示的地址去访问你的网站。 3. 按照 GitHub 指示的地址去访问你的网站。
#### 部署到其他 Pages 平台 #### 部署到其他 Pages 平台
@ -209,11 +207,9 @@ $ docker run -it --rm \
: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 还有,感谢 [JetBrains][jb] 提供开源 License
[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB] [![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][jb]
[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy
## 赞助 ## 赞助
@ -222,3 +218,8 @@ $ docker run -it --rm \
## 许可证书 ## 许可证书
本项目开源,基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。 本项目开源,基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。
[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
[jb]:https://www.jetbrains.com/?from=jekyll-theme-chirpy

View File

@ -12,7 +12,6 @@ const fs = require('fs');
const JS_ROOT = './assets/js'; const JS_ROOT = './assets/js';
const jsDest = `${ JS_ROOT }/dist/`; const jsDest = `${ JS_ROOT }/dist/`;
const copyrightPath = `${ JS_ROOT }/.copyright`;
function concatJs(files, output) { function concatJs(files, output) {
return src(files) return src(files)
@ -23,7 +22,7 @@ function concatJs(files, output) {
function minifyJs() { function minifyJs() {
return src(`${ jsDest }/*.js`) return src(`${ jsDest }/*.js`)
.pipe(insert.prepend(fs.readFileSync(copyrightPath, 'utf8'))) .pipe(insert.prepend(fs.readFileSync(`${ JS_ROOT }/.copyright`, 'utf8')))
.pipe(uglify({output: {comments: /^!|@preserve|@license|@cc_on/i}})) .pipe(uglify({output: {comments: /^!|@preserve|@license|@cc_on/i}}))
.pipe(dest(jsDest)); .pipe(dest(jsDest));
} }

View File

@ -21,15 +21,15 @@ NODE_META="package.json"
bump_assets() { bump_assets() {
_version="$1" _version="$1"
for i in ${!ASSETS[@]}; do for i in "${!ASSETS[@]}"; do
sed -i "s/v[[:digit:]]\.[[:digit:]]\.[[:digit:]]/v$_version/" ${ASSETS[$i]} sed -i "s/v[[:digit:]]\.[[:digit:]]\.[[:digit:]]/v$_version/" "${ASSETS[$i]}"
done done
gulp gulp
} }
bump_gemspec() { bump_gemspec() {
sed -i "s/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/$1/" $GEM_SPEC sed -i "s/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/$1/" "$GEM_SPEC"
} }
bump_node() { bump_node() {
@ -39,9 +39,9 @@ bump_node() {
} }
bump() { bump() {
bump_assets $1 bump_assets "$1"
bump_gemspec $1 bump_gemspec "$1"
bump_node $1 bump_node "$1"
if [[ -n $(git status . -s) ]]; then if [[ -n $(git status . -s) ]]; then
git add . git add .