Classic Blog
'Classic' blog variant (PDRenderKit 1.5.1, JS-rendered): centered brand header, arrow-controlled featured carousel, grid + list home and 9 inner pages.
Overview
| Item | Value |
|---|---|
| Created | 2023-07-22 |
| Category | Blog Examples |
| HTML files | index.html |
| Source | target/20230722 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Top header (#top-header) | Centered 'PARDN LTD' brand with a social icon row (static element, no menu buttons). |
| Top nav (#top-nav) | Dropdown menus (Home links to sibling templates on pardn.io, List, Post, Author, contact, 404) with search and menu buttons; menu opens #right-tab. |
| Home header | #personal-header carousel with prev/next arrow buttons (index clamped to 0..slides-1). |
| Home main column | Blog block, a 4-item .grid-1 image grid, sponsored ad and a 3-item post list. |
| 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.
- Carousel arrows read [index] with $attr, clamp it, and write it back with _attr({ index }).
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 the #personal-header carousel with arrow buttons; _top-nav holds the centered header and sticky nav. 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/20230722
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 640/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/20230722.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230722
