Personal Blog

'Personal' blog variant, fully JS-rendered with PDRenderKit 1.5.1: featured slide carousel header, sidebar widgets and 9 JS-switched inner pages.

Overview

Item	Value
Created	2023-07-20
Category	Blog Examples
HTML files	`index.html`
Source	target/20230720

Live Preview

Open the example in a new tab

Page Sections

Section	Description
Top header (#top-header)	Social icon row, logo block and search/menu buttons; menu button opens #right-tab.
Top nav (#top-nav)	Dropdowns Home (links to the sibling templates 20230719-20230723 on pardn.io), List (List 1/2, Grid 1/2), Post (1/2), plus Author, contact, 404.
Home header	#personal-header: 5-slide featured carousel (image, category, title, author/date) with dot indicators.
Home main column	Blog block (one large article + 4 small links), sponsored ad (image/left-ads.jpg linking to joball.tw) and a post list/grid with share icons.
Right sidebar (#section-right)	Popular/Recent tabs (home only), About with earth background and wave SVG, Popular Posts, Explore Topics, Newsletter input, Hot Tags.
Inner pages	setList1/setList2/setGrid1/setGrid2 (list and grid layouts), setPost(1\|2) (article, share, tags, author box, comments/form), setAuthor (#user-header + posts), setContact (info, Google Maps iframe, form), set404.
Footer (#bottom-footer)	6-image Instagram strip, copyright, social icons and 'Back to Top' button.

Interactions

js/index.js: setHome/setList1/setList2/setGrid1/setGrid2/setPost/setAuthor/setContact/set404 rebuild the body via body.__child() and reset scrollTop (JS-only page switching, no URL change).
_RIGHT_TAB appends an off-canvas #right-tab menu; close button adds 'hide' and removes it after 300ms; submenu items toggle 'show' on click.
done(): body scroll listener shows #top-nav after scrolling past #top-header and writes a percent attribute (0-1000) as reading progress; #section-right top is set from viewport vs sidebar height.
_SVGListener() is called on load to inline span.svg[src] images; body class 'ft' is removed after 500ms.
Personal header carousel: clicking a dot sets [index] on the slider parent (this.$parent(1)._attr({index})), CSS shows the matching slide.

Dependencies

Name	Version	Source
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDRenderKit	1.5.1	https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.1/dist/PDRenderKit.js
Google Analytics (gtag.js)	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
Noto Sans TC (font-family only)	-	declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback

Styling

Item	Value
SCSS entry	`sass/index.scss`
Output CSS	`css/index.css`
Partials	`_top-nav.scss`, `_bottom-footer.scss`, `_header.scss`, `left/_index.scss`, `left/_topest.scss`, `left/_blog.scss`, `left/_list-1.scss`, `left/_list-2.scss`, `left/_grid-1.scss`, `left/_grid-2.scss`, `left/_post.scss`, `left/_comment.scss`, `left/_form.scss`, `left/_ads.scss`, `right/_index.scss`, `right/_button.scss`, `right/_list.scss`, `right/_topic.scss`, `right/_tag.scss (empty)`, `right/_contact.scss (empty)`

index.scss holds reset, shared components and #right-tab keyframes, then imports _top-nav, _bottom-footer, _header and the left (main column: blog, lists, grids, post, comment, form, ads) and right (sidebar) partial groups. _header styles #personal-header (carousel via [index] @for), #default-header, post and user headers. Color/size tokens var(--color-dark-), var(--color-light-), var(--color-brand-*), var(--width-max), var(--bgcolor) are used but not defined in this folder (20230719 defines them in an inline <style>; here they are absent).

cd target/20230720
npx sass sass/index.scss css/index.css --no-source-map || exit 1

Techniques

Entire page built in JS with PDRenderKit string-tag syntax (('section' + '#id').([...]), .$(), ._click(), ._open(), 'fa-...'._fa), tag names assembled from single-letter globals passed to an IIFE.
Attribute-driven state: ul[index][sub-index] highlights menus, [percent] drives the scroll progress bar, [index] on carousels selects the visible slide via SCSS @for loops.
Flexbox layouts (no CSS grid), position: sticky in _top-nav and right/_index, backdrop-filter, multi-line clamp classes .line.r2/.r3, keyframe slide-in menu.
Breakpoints 480/640/768/800/1024/1140/1280px.

External Assets

https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
https://www.google.com/maps/embed?... (contact page iframe)
https://pardn.io/web-template/target/20230719 ... 20230723 (Home menu links to sibling templates on pardn.io)
local: image/wave.svg, image/eath.svg, image/left-ads.jpg (relative)
https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230720.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230720