Magazine Blog
Magazine-style blog template using PDRenderKit 1.2.0 declarative templates: ?page= routing with :if, :path partial views, :for loops and a Markdown post body.
Overview
| Item | Value |
|---|---|
| Created | 2023-07-19 |
| Last updated | 2024-08-08 |
| Category | Blog Examples |
| HTML files | index.html, views/top-nav.html, views/right-tab.html, views/default-header.html, views/body-home.html, views/body-list-1.html, views/body-list-2.html, views/body-grid-1.html, views/body-grid-2.html, views/body-post-1.html, views/body-post-2.html, views/body-author.html, views/body-contact.html, views/body-404.html, views/right.html, views/bottom-footer.html |
| Source | target/20230719 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Top nav (views/top-nav.html) | Logo text, dropdown menus Home/List/Post plus Author, Contact, 404; Home dropdown links to the sibling templates 20230720-20230723 on pardn.io; social icons and menu button. |
| Home (views/body-home.html) | Featured hero figure, blog block (one large article + 4 small links), sponsored ad image, further post groups; right sidebar from views/right.html. |
| Default header (views/default-header.html) | Simple header with h1 used by list, grid and contact pages. |
| List 1 / List 2 (views/body-list-*.html) | Two article-list layouts (10 items via :for) with 'Load More', plus right sidebar. |
| Grid 1 / Grid 2 (views/body-grid-*.html) | Image grid of 20 figures, and a card grid of 10 articles with excerpt. |
| Post 1 / Post 2 (views/body-post-*.html) | Breadcrumb header, title/author meta, Markdown body (section.md), share icons, tags, author box; Post 2 adds comments and a comment form. |
| Author (views/body-author.html) | User header (#user-header) and the author's article list with 'Load More'. |
| Contact (views/body-contact.html) | Contact info, embedded Google Maps iframe and a 'Send Message' form. |
| 404 (views/body-404.html) | '404 Not Found' message for any unknown ?page value. |
| Right sidebar (views/right.html) | Popular/Recent tabs (home only), About box with earth background, popular posts, topics, newsletter and tags. |
| Footer and mobile menu (views/bottom-footer.html, views/right-tab.html) | Footer with copyright and back-to-top button; off-canvas #right-tab menu mirroring the nav. |
Interactions
- js/index.js: reads ?page= with location.href.$query('page') (default 'home') and computes nav.index/subIndex to highlight the active menu item.
- event.rightTab (@click) toggles #right-tab display with a 300ms 'hide' class transition; event.scrollTop smooth-scrolls body to top.
- next(): body scroll listener adds/removes 'show' on #top-nav, writes a scroll percent attribute (0-1000) for a progress indicator, and repositions #section-right as a sticky-like sidebar.
- On post pages, fetches the PDMarkdownKit README.md from jsDelivr and renders it into section.md with PDMarkdownKit viewer (hashtag links to ?keyword=).
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.2.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js |
| PDMarkdownKit (ES module import) | 1.6.0 | https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.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 the #right-tab off-canvas keyframes, then imports top-nav, bottom-footer, header and the left (main column blocks: blog, lists, grids, post, comment, form, ads) and right (sidebar) partial groups. Color tokens (--color-dark-, --color-light-, --color-brand-*, --width-max, --bgcolor) are defined in an inline <style> in index.html.
cd target/20230719
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- PDRenderKit template directives in plain HTML: :path (load partial HTML), :if / :else-if / :else routing, :for="e in item_10", @click, :index/:sub-index attribute binding, :bg-image.
- new PD({ id, data, event, next }) instance bound to body#app; placeholder arrays item_2..item_20 drive repeated cards.
- img.lazyload with data-src and span.svg[src] inline-SVG placeholders handled by PDRenderKit.
- CSS custom properties for a color scale, multi-line clamp classes (.line.r2/.r3), keyframe slide-in menu, breakpoints 480/640/800/1024/1140px, flexbox layouts (no CSS grid), backdrop-filter, position: sticky in right/_index.
External Assets
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched at runtime as Markdown demo content)
- https://www.google.com/maps/embed?... (contact page iframe)
- https://pardn.io/web-template/target/20230720 ... 20230723 (Home dropdown links to sibling templates on pardn.io)
- local: image/wave.svg, image/eath.svg, image/left-ads.jpg, views/*.html (all relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230719.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230719
