Shen Lijun's Study Notes

This page demonstrates every content component available on this site. When writing a post, copy the markup from any code block below, paste it into your Markdown draft, and replace the sample values with your own. All components support light and dark mode.

1. Product / Resource Card

A mobile-friendly card for course recommendations, books, gear reviews or any affiliate product. The outbound link is automatically tagged with rel="nofollow sponsored noopener".

Syntax:

1

{% product img="https://example.com/cover.jpg" badge="Best Course" title="Course Name" desc="A one-line description." old="$89.99" price="$19.99" rating="4.8" link="https://example.com/" btn="Start Learning" %}

All parameters except title and link are optional. badge, old (strikethrough price), and rating can be omitted.

Result:

Best Course★ 4.8

Complete Python Bootcamp 2026

From absolute beginner to building real projects — 32 hours of video, 12 quizzes and a certificate.

$89.99$19.99

Start Learning ↗

2. Coupon Code

A one-click copyable coupon or promo code — a familiar pattern for online-course sales and software deals.

Syntax:

1

{% coupon code="STUDY20" title="20% off all courses" note="Enter the code at checkout. Click to copy." %}

Result:

3. Download Card

A resource card for Google Drive, Dropbox, OneDrive, MEGA, Gumroad, GitHub, iCloud, MediaFire, TeraBox or a direct link. Each platform gets its own brand-colored badge.

Syntax:

1

{% drive platform="Google Drive" name="Python Cheat Sheet (PDF, 3 MB)" url="https://drive.google.com/" code="AB12-CD34" %}

Parameters: platform (drives the badge color), name, url, code (optional access code), btn (optional, defaults to Download).

Result:

4. YouTube Video

Pass either a video id or a full url. The player is responsive (16:9).

Syntax:

1

{% youtube id="jNQXAC9IVRw" title="Me at the zoo" %}

Result:

5. Spotify Player

Embed a focus-music track, album, playlist, episode or show. The ID is the last part of the Spotify share URL — perfect for “study music” posts.

Syntax:

1

{% spotify type="playlist" id="37i9dQZF1DXcBWIGoYBM5M" %}

Result:

6. Local Video and Audio

Put media files in your source/media/ folder (for example source/media/demo.mp4) and reference them with an absolute path. Audio files (.mp3, .m4a, .wav, .ogg, .aac, .flac) render as an audio player automatically.

Syntax:

1
2

{% video src="/media/demo.mp4" poster="/media/poster.jpg" %}
{% video src="/media/demo.mp3" %}

Result (hosted samples used for demonstration):

7. Callout Boxes

Highlight notes, warnings, tips or successes. Types: info, success, warning, error.

Syntax:

1
2
3

{% alert type="warning" title="Heads up" %}
This is the callout body. **Markdown is supported.**
{% endalert %}

Result:

8. Collapsible Block (FAQ)

A native <details> block, ideal for FAQ sections or optional extra detail. Add open="true" to expand it by default.

Syntax:

1
2
3

{% collapse title="Do I need prior experience?" %}
No — the beginner track starts from zero.
{% endcollapse %}

Result:

9. Newsletter Form

A Buttondown-powered subscribe box so readers get new notes and resources in their inbox.

Syntax:

1

{% subscribe %}

Optional parameters: title, desc, ph (placeholder), btn.

Result:

10. Web-Novel Card (Platform Promos)

A card purpose-built for promoting serialized fiction apps such as Novellia, GoodNovel, PlotNovel and Novel Master: a portrait cover, a brand-colored platform badge, an Ongoing/Completed status pill, chapter count, star rating, genre tags, a free-chapters hook and a “Start Reading” button.

Syntax:

1

{% novel platform="GoodNovel" cover="/images/cover.jpg" title="Novel Title" author="Pen Name" status="Ongoing" chapters="486" rating="4.8" genres="Werewolf, Romance" desc="A one-line hook." free="First 30 chapters free" link="https://..." btn="Start Reading" %}

Only title and link are required. Badge colors are built in for Novellia, GoodNovel, PlotNovel, Novel Master, Royal Road, Wattpad, WebNovel, Kindle, Kobo and Bookshop.org (any other platform gets a neutral blue badge). status accepts Ongoing, Completed or Hiatus; omit any field you do not need.

Result:

GoodNovelOngoing★ 4.8

Her Mate, Her Enemy

by Luna Vane

WerewolfRomanceParanormal

📖 486 chapters🎁 First 30 chapters free

On the night of the blood moon, she finds out her destined mate is the alpha who destroyed her pack — and the feeling is mutual.

Start Reading ↗

NovelliaCompleted★ 4.9

Sword of the Ninth Heaven

by Mo Qingchen

XianxiaCultivationAdventure

📖 1204 chapters🎁 Full book unlocked

A discarded outer disciple inherits a broken jade sword containing the will of an immortal emperor. The long climb to the ninth heaven begins tonight.

Read the Full Novel ↗

That is the full toolbox. New components will be added to this page as they are built.

Welcome to my study notes!

Here I share technology learning and resources.

欢迎来到我的学习笔记！

这里分享学习资源和心得。