f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-10-20 17:53:45 +00:00
Code Issues Packages Releases Activity

feat: add support for embed spotify (#2515)

Browse Source
This commit is contained in:
Alexander Fuks 2025-09-08 23:45:20 +04:00 committed by GitHub
parent 5f8ec7ffd3
commit cda62e28d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/embed/audio.html
View File

@ -9,7 +9,7 @@
{% endunless %} {% endunless %}
<p> <p>
<audio class="embed-audio" controls> <audio class="embed-audio file" controls>
{% assign extension = src | split: '.' | last %} {% assign extension = src | split: '.' | last %}
{% assign types = extension | concat: types %} {% assign types = extension | concat: types %}

22
_includes/embed/spotify.html Normal file
View File

@ -0,0 +1,22 @@
{% assign size = 352 %}
{% assign theme = '' %}
{% if include.compact %}
{% assign size = 152 %}
{% endif %}
{% if include.dark %}
{% assign theme = '?theme=0' %}
{% endif %}
<iframe
class="embed-audio spotify"
src="https://open.spotify.com/embed/track/{{ include.id | append: theme }}"
height="{{ size }}"
frameBorder="0"
allowfullscreen=""
allowtransparency="true"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
>
</iframe>

28
_posts/2019-08-08-write-a-new-post.md
View File

@ -256,11 +256,9 @@ For normal images:
``` ```
{: .nolineno } {: .nolineno }
### Video ### Social Media Platforms
#### Social Media Platform You can embed video/audio from social media platforms with the following syntax:
You can embed videos from social media platforms with the following syntax:
```liquid ```liquid
{% include embed/{Platform}.html id='{ID}' %} {% include embed/{Platform}.html id='{ID}' %}
@ -268,15 +266,21 @@ You can embed videos from social media platforms with the following syntax:
Where `Platform` is the lowercase of the platform name, and `ID` is the video ID. Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms. The following table shows how to get the two parameters we need in a given video/audio URL, and you can also know the currently supported video platforms.
| Video URL | Platform | ID | | Video URL | Platform | ID |
| -------------------------------------------------------------------------------------------------- | ---------- | :------------- | | -------------------------------------------------------------------------------------------------------------------------- | ---------- | :----------------------- |
| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` | | [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` | | [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` | | [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
| [https://www.open.**spotify**.com/track/**3OuMIIFP5TxM8tLXMWYPGV**](https://open.spotify.com/track/3OuMIIFP5TxM8tLXMWYPGV) | `spotify` | `3OuMIIFP5TxM8tLXMWYPGV` |
#### Video Files Spotify supports some additional parameters:
- `compact` - to display compact player instead (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' compact=1 %}`);
- `dark` - to force dark theme (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' dark=1 %}`).
### Video Files
If you want to embed a video file directly, use the following syntax: If you want to embed a video file directly, use the following syntax:
@ -310,7 +314,7 @@ Consider an example using all of the above:
%} %}
``` ```
### Audios ### Audio Files
If you want to embed an audio file directly, use the following syntax: If you want to embed an audio file directly, use the following syntax:

9
_sass/base/_base.scss
View File

@ -314,7 +314,14 @@ main {
.embed-audio { .embed-audio {
width: 100%; width: 100%;
display: block;
&.file {
display: block;
}
&.spotify {
border-radius: 14px;
}
@extend %img-caption; @extend %img-caption;
} }