From 7a88ddca69e5908d0468b9b8b66f20beaef8f8ae Mon Sep 17 00:00:00 2001 From: Ice-Hazymoon Date: Fri, 3 Jun 2022 19:17:03 +0200 Subject: [PATCH] =?UTF-8?q?-=20=F0=9F=90=9B=20Image=20processing=20without?= =?UTF-8?q?=20larger=20images=20-=20=F0=9F=92=84=20Convert=20thumbnails=20?= =?UTF-8?q?to=20jpg=20format=20-=20=F0=9F=94=A7=20Add=20autoSize=20option?= =?UTF-8?q?=20to=20image=20processing=20-=20=F0=9F=8E=A8=20Add=20function/?= =?UTF-8?q?image-process=20partial=20-=20=F0=9F=9A=B8=20Optimize=20noscrip?= =?UTF-8?q?t=20support=20-=20=F0=9F=8D=BB=20Beautify=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/sass/_base.scss | 8 +- assets/sass/_common/_shortcodes.scss | 12 +- assets/sass/_partial/_page_gallery.scss | 14 +- assets/sass/_partial/_page_home.scss | 2 +- assets/ts/main.ts | 1088 ++++++++--------- exampleSite/config.yaml | 783 ++++++------ .../content/en-us/posts/Typography/index.md | 466 ++++--- .../en-us/posts/Typography/index.zh-cn.md | 280 +++-- layouts/_default/_markup/render-image.html | 96 +- layouts/_default/archives.html | 2 +- layouts/_default/baseof.html | 2 +- layouts/_default/gallery.html | 2 +- layouts/_default/github.html | 2 +- layouts/_default/links.html | 2 +- layouts/_default/page.html | 2 +- layouts/_default/single.html | 87 +- layouts/_default/terms.html | 2 +- layouts/_default/twitter.html | 45 +- layouts/partials/custom/icons.html | 2 +- layouts/partials/functions/image-process.html | 54 + layouts/partials/html/footer.html | 2 +- layouts/partials/html/head.html | 6 +- layouts/partials/noscript.html | 5 +- layouts/partials/post-card.html | 96 +- layouts/partials/post/footer.html | 3 +- layouts/partials/post/lastmod.html | 2 +- layouts/partials/post/pagination.html | 5 +- layouts/partials/post/refs.html | 2 +- layouts/shortcodes/gallery-grid.html | 6 +- layouts/shortcodes/gallery.html | 4 +- layouts/shortcodes/link.html | 13 +- layouts/shortcodes/tab-panel.html | 9 +- layouts/shortcodes/tab-view.html | 2 +- layouts/shortcodes/tag-outlined.html | 1 + 34 files changed, 1563 insertions(+), 1544 deletions(-) create mode 100644 layouts/partials/functions/image-process.html diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss index 4d311995..bded82a8 100644 --- a/assets/sass/_base.scss +++ b/assets/sass/_base.scss @@ -97,6 +97,10 @@ figure { } bbb { - font-weight:bold; + font-weight: bold; opacity: 1; -} \ No newline at end of file +} + +.noscript-show { + @apply hidden; +} diff --git a/assets/sass/_common/_shortcodes.scss b/assets/sass/_common/_shortcodes.scss index f9fd0d95..b43e98ce 100644 --- a/assets/sass/_common/_shortcodes.scss +++ b/assets/sass/_common/_shortcodes.scss @@ -87,13 +87,13 @@ .tabs { input { - &[type="radio"] { + &[type='radio'] { @apply hidden; } - &[type="radio"]:checked + label { - @apply border-b-2 border-b-theme text-theme; + &[type='radio']:checked + label { + @apply border-b-2 border-b-theme text-theme; } - &[type="radio"]:checked + label + .tab { + &[type='radio']:checked + label + .tab { @apply block; } } @@ -101,7 +101,7 @@ .gallery-box { .gallery { - @apply my-4 relative flex flex-row justify-center; + @apply relative my-4 flex flex-row justify-center; figure { @apply my-0; img { @@ -112,4 +112,4 @@ @apply ml-4; } } -} \ No newline at end of file +} diff --git a/assets/sass/_partial/_page_gallery.scss b/assets/sass/_partial/_page_gallery.scss index 701e407d..b2bfe199 100644 --- a/assets/sass/_partial/_page_gallery.scss +++ b/assets/sass/_partial/_page_gallery.scss @@ -1,14 +1,14 @@ .page-gallery { .gallery-box { .gallery { - @apply md:my-4 my-3 md:mx-4 mx-3; + @apply my-3 mx-3 md:my-4 md:mx-4; figure + figure { - @apply md:ml-4 ml-3; + @apply ml-3 md:ml-4; } } } .gallery-image { - @apply relative md:mb-4 mb-3 overflow-hidden rounded; + @apply relative mb-3 overflow-hidden rounded md:mb-4; figcaption { @apply pointer-events-none absolute bottom-0 w-full px-4 pt-8 pb-4 text-center text-lg text-white opacity-100 transition-opacity duration-300 md:opacity-0; background-image: linear-gradient(to bottom, hsla(330, 0%, 0%, 0), cubic-bezier(0.42, 0, 0.4, 1), hsla(210, 0%, 0%, 0.3)); @@ -24,21 +24,21 @@ } h2 { - @apply text-2xl text-center mt-20 mb-14; + @apply mt-20 mb-14 text-center text-2xl; a { @apply hidden; } &::before { content: '「　'; - @apply text-theme font-bold; + @apply font-bold text-theme; } &::after { content: '　」'; - @apply text-theme font-bold; + @apply font-bold text-theme; } } blockquote { - @apply text-gray-400 text-center mb-12 -mt-10 italic; + @apply mb-12 -mt-10 text-center italic text-gray-400; } } diff --git a/assets/sass/_partial/_page_home.scss b/assets/sass/_partial/_page_home.scss index 56b8a30c..81ba1c7a 100644 --- a/assets/sass/_partial/_page_home.scss +++ b/assets/sass/_partial/_page_home.scss @@ -49,7 +49,7 @@ .tag { &:hover { box-shadow: -5px 5px 12px #f2f2f2, 5px -5px 12px #ffffff; - @apply dark:shadow-none opacity-90; + @apply opacity-90 dark:shadow-none; } } } diff --git a/assets/ts/main.ts b/assets/ts/main.ts index f308c53f..09c8d44d 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -1,544 +1,544 @@ -import * as params from '@params'; -import jump from "jump.js"; -import pangu from "pangu"; -import mediumZoom from "medium-zoom"; -import LazyLoad from "lazyload"; -import ClipboardJS from "./modules/clipboard"; -import renderToc from "./toc"; -import bionicReading from "./bionic-reading"; -// pjax -import Swup from 'swup'; -import SwupFadeTheme from 'swupFadeTheme'; -import SwupProgressPlugin from 'swupProgressPlugin'; -import SwupGaPlugin from 'swupGaPlugin'; -import SwupScriptsPlugin from 'swupScriptsPlugin'; -import SwupMorphPlugin from 'swupMorphPlugin'; - -declare global { - interface Window { - Luna: any; - initSearch: any; - rednerKatex: any; - isBionic: boolean; - __theme: { - cdn: string, - pjax: boolean, - imageZoom: boolean, - lazyload: boolean, - backtop: boolean, - pangu: boolean, - bionicReading: boolean, - isServer: boolean, - $version: string, - autoDarkMode: boolean, - googleAnalytics: boolean, - lang: string, - hugoEncrypt: { - wrongPasswordText: string, - userStorage: any, - }, - assets: { - error_svg: string, - search_svg: string, - }, - i18n: { - copySuccess: string, - copyFailed: string, - copyCode: string, - searchLoadFailure: string, - searchInput: string, - searchResults: Function, - untitled: string, - }, - creatTime: VarDate - } - } -} - -class Luna { - _LazyLoad: any; - zoom: any; - swup: any; - jump: boolean; - private clipboard: any; - constructor() { - } - async init() { - this.initPjax(); - - this.initLazyload(); - - this.initZoom(); - - this.hugoEncrypt(); - - this.initKatex(); - - this.initActiveMenu(); - - this.initSearch() - - this.initGallery(); - - this.initCodeBlockCopy(); - - this.initClipboard(); - - this.initFooterTime(); - - this.initBackTop(); - - this.initNightMode(); - - renderToc(); - - this.pangu(); - - this.initBionicReading(); - } - initPjax() { - if (!window.__theme.pjax) return false; - const swup = new Swup({ - cache: true, - plugins: [new SwupMorphPlugin({ - containers: ['#i18nlist'] - }), new SwupFadeTheme(), new SwupProgressPlugin(), new SwupScriptsPlugin({ - optin: true, - // head: false, - // body: false - })].concat(window.__theme.googleAnalytics ? [new SwupGaPlugin()] : []), - animateHistoryBrowsing: true, - linkSelector: - 'a[href^="' + - window.location.origin + - '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])', - }); - - this.swup = swup; - - swup.on('pageView', async function(n) { - await window.Luna.hugoEncrypt(); - window.Luna.initSearch(); - window.Luna.initActiveMenu(); - - window.Luna.renderPost(); - - if (!n && document.getElementById('back-top')) { - document.getElementById('back-top').click(); - } - }); - } - - renderPost() { - if (window.rednerKatex) window.rednerKatex(); - this._LazyLoad.update(); - this.updateZoom(); - this.initGallery(); - this.initCodeBlockCopy(); - this.initClipboard(); - renderToc(); - this.pangu(); - this.initBionicReading(); - } - - pangu() { - if (window.__theme.pangu) { - pangu.spacingElementById('swup'); - } - } - - initBionicReading() { - window.isBionic = false; - if (window.__theme.bionicReading && document.getElementById('bionicReading')) { - document.getElementById('bionicReading').addEventListener('click', () => { - if (window.isBionic) { - bionicReading.revoke(); - } else { - bionicReading.bionic(); - } - }); - } - } - - initZoom() { - if (window.__theme.imageZoom) { - if (!window.__theme.lazyload) { - this.noLazyload(false); - } - this.zoom = mediumZoom('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)', { - background: 'var(--color-zoom-bg)', - }); - } - } - - initLazyload() { - if (window.__theme.lazyload) { - this._LazyLoad = new LazyLoad({ - elements_selector: '[data-lazyload]', - class_loading: 'lazy-loading', - class_error: 'lazy-error', - class_loaded: 'lazy-loaded', - unobserve_entered: true, - callback_loaded: (el) => { - if (window.__theme.imageZoom) { - setTimeout(() => { - if (el.hasAttribute('data-zoomable')) { - el.setAttribute('src', el.currentSrc || el.getAttribute('src')); - el.removeAttribute('srcset'); - this.zoom.attach(el) - } - }, 500); - } - }, - callback_error: (el) => { - const errorImageURL = window.__theme.assets.error_svg; - el.setAttribute("src", errorImageURL); - el.setAttribute("srcset", errorImageURL); - if (el.previousSibling.tagName === 'SOURCE') { - el.previousSibling.setAttribute("src", errorImageURL); - el.previousSibling.setAttribute("srcset", errorImageURL); - } - } - }) - } else { - this._LazyLoad = { - update: () => { - if (window.__theme.imageZoom) { - this.noLazyload(true); - } - } - } - } - } - - noLazyload(zoom: boolean) { - const images = Array.from(document.querySelectorAll('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)')) as HTMLImageElement[]; - images.forEach(el => { - el.setAttribute('src', el.currentSrc || el.getAttribute('src')); - el.removeAttribute('srcset'); - if (zoom) this.zoom.attach(el); - }) - } - - switchLanguage(url) { - window.location.href = url; - } - - // Toggle navigation in pjax mode - initActiveMenu() { - const activeMenu = document.querySelector('.link-exact-active') - if (activeMenu) activeMenu.classList.remove('link-exact-active'); - const currentMenu = document.querySelector(`[data-active-link="${window.location.pathname.replace(/\/$/, '')}/"]`); - if (currentMenu) currentMenu.classList.add('link-exact-active'); - } - - async initSearch() { - const node = document.getElementById('search-input'); - if (!node) return false; - if (!window.initSearch) { - const script = document.createElement('script'); - script.src = `${window.__theme.cdn}${params.search}`; - document.body.appendChild(script); - } - } - - // https://github.com/CaiJimmy/hugo-theme-stack/blob/master/assets/ts/gallery.ts - initGallery() { - const figuresEl = Array.from(document.querySelectorAll('.gallery-box figure.gallery-image')) as HTMLElement[]; - let currentGallery = []; - if (figuresEl.length < 2) return false; - for (const figure of figuresEl) { - if (figure.parentElement.classList.contains('gallery')) return false; - if (!currentGallery.length) { - /// First iteration - currentGallery = [figure]; - } else if (figure.previousElementSibling.previousElementSibling === currentGallery[currentGallery.length - 1]) { - /// Adjacent figures - currentGallery.push(figure); - } else if (currentGallery.length) { - /// End gallery - wrap(currentGallery); - currentGallery = [figure]; - } - } - if (currentGallery.length > 0) { - wrap(currentGallery); - } - - function wrap(figures) { - const galleryContainer = document.createElement('div'); - galleryContainer.className = 'gallery'; - - const parentNode = figures[0].parentNode, - first = figures[0]; - - parentNode.insertBefore(galleryContainer, first) - - for (const figure of figures) { - galleryContainer.appendChild(figure); - } - } - } - - initFooterTime() { - const el = document.getElementById('run-time'); - if (!el) return false; - const runTimer = setInterval(() => { - if (document.querySelector('.goog-te-banner-frame')) { - el.remove(); - clearInterval(runTimer); - return false; - }; - const startDate = new Date(window.__theme.creatTime); - const time = new Date(); - const diff = time.getTime() - startDate.getTime(); - - const day = diff / (1000*60*60*24); - const hour = 24 * parseFloat('0.' + day.toString().replace(/\d+\.(\d*)/, '$1')); - const minute = 60 * parseFloat('0.' + hour.toString().replace(/\d+\.(\d*)/, '$1')); - const second = 60 * parseFloat('0.' + minute.toString().replace(/\d+\.(\d*)/, '$1')); - document.getElementById('run-time-d').innerText = (~~(day)).toString(); - document.getElementById('run-time-h').innerText = (~~(hour)).toString(); - document.getElementById('run-time-m').innerText = (~~(minute)).toString(); - document.getElementById('run-time-s').innerText = (~~(second)).toString(); - }, 1000); - } - - initBackTop() { - const el = document.getElementById('back-top'); - if (!window.__theme.backtop) return false; - window.addEventListener('scroll', () => { - const scrollH = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) - document.documentElement.clientHeight - 150; - const css = 157 - (~~(document.documentElement.scrollTop / scrollH * 100) * 1.57); - if (css <= 0) el.classList.add('back-top-completed'); - else el.classList.remove('back-top-completed'); - - const circle = el.querySelector('svg circle') as HTMLElement; - circle.style.strokeDashoffset = css < 0 ? '0' : css.toString(); - }) - - const _disabledMouseWheel = (e) => e.stopPropagation(); - function disabledMouseWheel(_) { - if (_) { - document.addEventListener('wheel', _disabledMouseWheel, { - passive: true - }); - document.addEventListener('touchstart', _disabledMouseWheel, { - passive: true - }); - } else { - document.removeEventListener('wheel', _disabledMouseWheel); - document.removeEventListener('touchstart', _disabledMouseWheel); - } - } - el.onclick = (e) => { - e.stopPropagation(); - e.preventDefault(); - if (this.jump) return false; - this.jump = true; - disabledMouseWheel(true); - const easeInOut = (t, b, c, d) => { - return t === d ? b + c : c * (-(2 ** ((-10 * t) / d)) + 1) + b; - }; - jump( - document.body, - { - duration: 400, - offset: 0, - callback: () => { - this.jump = false; - disabledMouseWheel(false); - }, - easing: easeInOut, - a11y: false - } - ); - } - window.addEventListener( - 'scroll', - () => { - if (!el) return false; - if (window.scrollY > 800) { - el.classList.add('x'); - } else { - el.classList.remove('x'); - } - }, - { - passive: true - } - ); - } - - initCodeBlockCopy() { - const highlightList = Array.from(document.querySelectorAll('.highlight')); - for (let index = 0; index < highlightList.length; index++) { - const el = highlightList[index]; - if (el.querySelector('[data-clipboard-text]')) continue; - const header = document.createElement('header'); - const codeEl = el.querySelector('pre code[data-lang]'); - const lang = codeEl.getAttribute('data-lang'); - const code = el.querySelector('table td:nth-child(2) pre').textContent; - - header.innerHTML = `
${lang}
` - const btn = header.querySelector('i.eva'); - el.prepend(header); - btn.setAttribute('data-clipboard-text', code); - } - } - - initClipboard() { - if (!document.querySelector('[data-clipboard-text]')) return false; - if (this.clipboard) { - this.clipboard.destroy(); - } - this.clipboard = new ClipboardJS('[data-clipboard-text]'); - this.clipboard.on('success', function(e) { - alert(window.__theme.i18n.copySuccess); - }) - this.clipboard.on('error', function(e) { - alert(window.__theme.i18n.copyFailed); - console.error('Action:', e.action); - console.error('Trigger:', e.trigger); - }); - } - - initNightMode() { - const el = document.querySelector('.dark-mode-switch'); - const _i = el.querySelector('i'); - - function setDarkMode(isDark) { - if (isDark) { - _i.classList.remove('eva-moon'); - _i.classList.add('eva-sun'); - document.documentElement.classList.add('dark'); - } else { - _i.classList.remove('eva-sun'); - _i.classList.add('eva-moon'); - document.documentElement.classList.remove('dark'); - } - } - - if (window.__theme.autoDarkMode) { - setDarkMode(localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)); - } else { - setDarkMode(localStorage.theme === 'dark'); - } - - - el.addEventListener('click', () => { - if (_i.classList.contains('eva-sun')) { - localStorage.setItem('theme', 'light'); - setDarkMode(false); - } else { - localStorage.setItem('theme', 'dark'); - setDarkMode(true); - } - }) - } - - async hugoEncrypt() { - const storageKey = location.pathname + "password"; - const encryption_blocks = Array.from(document.querySelectorAll("hugo-encrypt")); - const userStorage = window.__theme.hugoEncrypt.userStorage; - function deriveKey(passphrase, salt) { - salt = salt || crypto.getRandomValues(new Uint8Array(8)); - return crypto.subtle - .importKey("raw", new TextEncoder().encode(passphrase), "PBKDF2", false, ["deriveKey"]) - .then(key => - crypto.subtle.deriveKey( - { name: "PBKDF2", salt, iterations: 1000, hash: "SHA-256" }, - key, - { name: "AES-GCM", length: 256 }, - false, - ["encrypt", "decrypt"], - ), - ) - .then(key => [key, salt]); - } - function decrypt(passphrase, saltIvCipherHex) { - const [salt, iv, data] = saltIvCipherHex.split("-").map(hexStr => new Uint8Array(hexStr.match(/.{2}/g).map(h => parseInt(h, 16)))); - return deriveKey(passphrase, salt) - .then(([key]) => crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, data)) - .then(v => new TextDecoder("utf-8").decode(new Uint8Array(v))); - } - async function digestMessage(message) { - const msgUint8 = new TextEncoder().encode(message); - const hashBuffer = await crypto.subtle.digest('SHA-1', msgUint8); - const hashArray = Array.from(new Uint8Array(hashBuffer)); - const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); - return hashHex; - } - - async function hugoDecrypt(password, type, el, id) { - const cipher = el.querySelector('cipher-text'); - try { - const decrypted_text = await decrypt(password, cipher.innerText); - const sha1_sum = await digestMessage(decrypted_text.replace(/\r?\n?[^\r\n]*$/, "")); - if ( decrypted_text.includes(sha1_sum) ) { - el.querySelector(".hugo-encrypt-encryption-notice").remove(); - cipher.outerHTML = decrypted_text; - userStorage.setItem(storageKey + id, password); - document.querySelector(`#r${id} .hugo-encrypt-sha1sum`).innerHTML = "Success: " + sha1_sum; - console.log(`Decryption successful. Storing password in ${userStorage}.`); - } - } catch (error) { - if (type === "input") { - el.querySelector(".hugo-encrypt-input-response").innerHTML = window.__theme.hugoEncrypt.wrongPasswordText; - console.log(window.__theme.hugoEncrypt.wrongPasswordText, error); - } else if (type === "storage") { - userStorage.removeItem(location.pathname + "password"); - console.log("Password changed. Clearing userStorage.", error); - } - } - }; - - const hugoEncryptBlocks = Array.from(document.querySelectorAll('.hugo-encrypt-button')) as HTMLElement[]; - for (let index = 0; index < hugoEncryptBlocks.length; index++) { - const block = hugoEncryptBlocks[index]; - block.addEventListener('click', async (e) => { - const id = (e.target as HTMLElement).getAttribute('data-hugo-encrypt-id'); - const El = document.getElementById(`r${id}`); - const password = (El.querySelector('.hugo-encrypt-input') as HTMLInputElement).value; - await hugoDecrypt(password, 'input', El, id); - this.renderPost(); - }) - } - - if (encryption_blocks.length) { - for (const block of encryption_blocks) { - const id = block.id.replace(/^r/, ""); - const password = userStorage.getItem(storageKey + id); - if (password) { - await hugoDecrypt(password, "storage", block, id); - this.renderPost(); - } - } - } - } - - initKatex() { - if (params.katex) { - const script = document.createElement('script'); - script.src = params.katex; - document.body.appendChild(script); - script.addEventListener('load', () => { - window.rednerKatex(); - }) - } - } - - updateZoom() { - if (!window.__theme.imageZoom) return false; - if (!window.__theme.lazyload) { - this.noLazyload(true); - } - // this.zoom.detach(); - this.zoom.attach('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)'); - } -} - -window.addEventListener('load', async () => { - window.Luna = new Luna(); - window.Luna.init(); -}); +import * as params from '@params'; +import jump from "jump.js"; +import pangu from "pangu"; +import mediumZoom from "medium-zoom"; +import LazyLoad from "lazyload"; +import ClipboardJS from "./modules/clipboard"; +import renderToc from "./toc"; +import bionicReading from "./bionic-reading"; +// pjax +import Swup from 'swup'; +import SwupFadeTheme from 'swupFadeTheme'; +import SwupProgressPlugin from 'swupProgressPlugin'; +import SwupGaPlugin from 'swupGaPlugin'; +import SwupScriptsPlugin from 'swupScriptsPlugin'; +import SwupMorphPlugin from 'swupMorphPlugin'; + +declare global { + interface Window { + Luna: any; + initSearch: any; + rednerKatex: any; + isBionic: boolean; + __theme: { + cdn: string, + pjax: boolean, + imageZoom: boolean, + lazyload: boolean, + backtop: boolean, + pangu: boolean, + bionicReading: boolean, + isServer: boolean, + $version: string, + autoDarkMode: boolean, + googleAnalytics: boolean, + lang: string, + hugoEncrypt: { + wrongPasswordText: string, + userStorage: any, + }, + assets: { + error_svg: string, + search_svg: string, + }, + i18n: { + copySuccess: string, + copyFailed: string, + copyCode: string, + searchLoadFailure: string, + searchInput: string, + searchResults: Function, + untitled: string, + }, + creatTime: VarDate + } + } +} + +class Luna { + _LazyLoad: any; + zoom: any; + swup: any; + jump: boolean; + private clipboard: any; + constructor() { + } + async init() { + this.initPjax(); + + this.initLazyload(); + + this.initZoom(); + + this.hugoEncrypt(); + + this.initKatex(); + + this.initActiveMenu(); + + this.initSearch() + + this.initGallery(); + + this.initCodeBlockCopy(); + + this.initClipboard(); + + this.initFooterTime(); + + this.initBackTop(); + + this.initNightMode(); + + renderToc(); + + this.pangu(); + + this.initBionicReading(); + } + initPjax() { + if (!window.__theme.pjax) return false; + const swup = new Swup({ + cache: true, + plugins: [new SwupMorphPlugin({ + containers: ['#i18nlist'] + }), new SwupFadeTheme(), new SwupProgressPlugin(), new SwupScriptsPlugin({ + optin: true, + // head: false, + // body: false + })].concat(window.__theme.googleAnalytics ? [new SwupGaPlugin()] : []), + animateHistoryBrowsing: true, + linkSelector: + 'a[href^="' + + window.location.origin + + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])', + }); + + this.swup = swup; + + swup.on('pageView', async function(n) { + await window.Luna.hugoEncrypt(); + window.Luna.initSearch(); + window.Luna.initActiveMenu(); + + window.Luna.renderPost(); + + if (!n && document.getElementById('back-top')) { + document.getElementById('back-top').click(); + } + }); + } + + renderPost() { + if (window.rednerKatex) window.rednerKatex(); + this._LazyLoad.update(); + this.updateZoom(); + this.initGallery(); + this.initCodeBlockCopy(); + this.initClipboard(); + renderToc(); + this.pangu(); + this.initBionicReading(); + } + + pangu() { + if (window.__theme.pangu) { + pangu.spacingElementById('swup'); + } + } + + initBionicReading() { + window.isBionic = false; + if (window.__theme.bionicReading && document.getElementById('bionicReading')) { + document.getElementById('bionicReading').addEventListener('click', () => { + if (window.isBionic) { + bionicReading.revoke(); + } else { + bionicReading.bionic(); + } + }); + } + } + + initZoom() { + if (window.__theme.imageZoom) { + if (!window.__theme.lazyload) { + this.noLazyload(false); + } + this.zoom = mediumZoom('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)', { + background: 'var(--color-zoom-bg)', + }); + } + } + + initLazyload() { + if (window.__theme.lazyload) { + this._LazyLoad = new LazyLoad({ + elements_selector: '[data-lazyload]', + class_loading: 'lazy-loading', + class_error: 'lazy-error', + class_loaded: 'lazy-loaded', + unobserve_entered: true, + callback_loaded: (el) => { + if (window.__theme.imageZoom) { + setTimeout(() => { + if (el.hasAttribute('data-zoomable')) { + el.setAttribute('src', el.currentSrc || el.getAttribute('src')); + el.removeAttribute('srcset'); + this.zoom.attach(el) + } + }, 500); + } + }, + callback_error: (el) => { + const errorImageURL = window.__theme.assets.error_svg; + el.setAttribute("src", errorImageURL); + el.setAttribute("srcset", errorImageURL); + if (el.previousSibling.tagName === 'SOURCE') { + el.previousSibling.setAttribute("src", errorImageURL); + el.previousSibling.setAttribute("srcset", errorImageURL); + } + } + }) + } else { + this._LazyLoad = { + update: () => { + if (window.__theme.imageZoom) { + this.noLazyload(true); + } + } + } + } + } + + noLazyload(zoom: boolean) { + const images = Array.from(document.querySelectorAll('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)')) as HTMLImageElement[]; + images.forEach(el => { + el.setAttribute('src', el.currentSrc || el.getAttribute('src')); + el.removeAttribute('srcset'); + if (zoom) this.zoom.attach(el); + }) + } + + switchLanguage(url) { + window.location.href = url; + } + + // Toggle navigation in pjax mode + initActiveMenu() { + const activeMenu = document.querySelector('.link-exact-active') + if (activeMenu) activeMenu.classList.remove('link-exact-active'); + const currentMenu = document.querySelector(`[data-active-link="${window.location.pathname.replace(/\/$/, '')}/"]`); + if (currentMenu) currentMenu.classList.add('link-exact-active'); + } + + async initSearch() { + const node = document.getElementById('search-input'); + if (!node) return false; + if (!window.initSearch) { + const script = document.createElement('script'); + script.src = `${window.__theme.cdn}${params.search}`; + document.body.appendChild(script); + } + } + + // https://github.com/CaiJimmy/hugo-theme-stack/blob/master/assets/ts/gallery.ts + initGallery() { + const figuresEl = Array.from(document.querySelectorAll('.gallery-box figure.gallery-image')) as HTMLElement[]; + let currentGallery = []; + if (figuresEl.length < 2) return false; + for (const figure of figuresEl) { + if (figure.parentElement.classList.contains('gallery')) return false; + if (!currentGallery.length) { + /// First iteration + currentGallery = [figure]; + } else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) { + /// Adjacent figures + currentGallery.push(figure); + } else if (currentGallery.length) { + /// End gallery + wrap(currentGallery); + currentGallery = [figure]; + } + } + if (currentGallery.length > 0) { + wrap(currentGallery); + } + + function wrap(figures) { + const galleryContainer = document.createElement('div'); + galleryContainer.className = 'gallery'; + + const parentNode = figures[0].parentNode, + first = figures[0]; + + parentNode.insertBefore(galleryContainer, first) + + for (const figure of figures) { + galleryContainer.appendChild(figure); + } + } + } + + initFooterTime() { + const el = document.getElementById('run-time'); + if (!el) return false; + const runTimer = setInterval(() => { + if (document.querySelector('.goog-te-banner-frame')) { + el.remove(); + clearInterval(runTimer); + return false; + }; + const startDate = new Date(window.__theme.creatTime); + const time = new Date(); + const diff = time.getTime() - startDate.getTime(); + + const day = diff / (1000*60*60*24); + const hour = 24 * parseFloat('0.' + day.toString().replace(/\d+\.(\d*)/, '$1')); + const minute = 60 * parseFloat('0.' + hour.toString().replace(/\d+\.(\d*)/, '$1')); + const second = 60 * parseFloat('0.' + minute.toString().replace(/\d+\.(\d*)/, '$1')); + document.getElementById('run-time-d').innerText = (~~(day)).toString(); + document.getElementById('run-time-h').innerText = (~~(hour)).toString(); + document.getElementById('run-time-m').innerText = (~~(minute)).toString(); + document.getElementById('run-time-s').innerText = (~~(second)).toString(); + }, 1000); + } + + initBackTop() { + const el = document.getElementById('back-top'); + if (!window.__theme.backtop) return false; + window.addEventListener('scroll', () => { + const scrollH = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) - document.documentElement.clientHeight - 150; + const css = 157 - (~~(document.documentElement.scrollTop / scrollH * 100) * 1.57); + if (css <= 0) el.classList.add('back-top-completed'); + else el.classList.remove('back-top-completed'); + + const circle = el.querySelector('svg circle') as HTMLElement; + circle.style.strokeDashoffset = css < 0 ? '0' : css.toString(); + }) + + const _disabledMouseWheel = (e) => e.stopPropagation(); + function disabledMouseWheel(_) { + if (_) { + document.addEventListener('wheel', _disabledMouseWheel, { + passive: true + }); + document.addEventListener('touchstart', _disabledMouseWheel, { + passive: true + }); + } else { + document.removeEventListener('wheel', _disabledMouseWheel); + document.removeEventListener('touchstart', _disabledMouseWheel); + } + } + el.onclick = (e) => { + e.stopPropagation(); + e.preventDefault(); + if (this.jump) return false; + this.jump = true; + disabledMouseWheel(true); + const easeInOut = (t, b, c, d) => { + return t === d ? b + c : c * (-(2 ** ((-10 * t) / d)) + 1) + b; + }; + jump( + document.body, + { + duration: 400, + offset: 0, + callback: () => { + this.jump = false; + disabledMouseWheel(false); + }, + easing: easeInOut, + a11y: false + } + ); + } + window.addEventListener( + 'scroll', + () => { + if (!el) return false; + if (window.scrollY > 800) { + el.classList.add('x'); + } else { + el.classList.remove('x'); + } + }, + { + passive: true + } + ); + } + + initCodeBlockCopy() { + const highlightList = Array.from(document.querySelectorAll('.highlight')); + for (let index = 0; index < highlightList.length; index++) { + const el = highlightList[index]; + if (el.querySelector('[data-clipboard-text]')) continue; + const header = document.createElement('header'); + const codeEl = el.querySelector('pre code[data-lang]'); + const lang = codeEl.getAttribute('data-lang'); + const code = el.querySelector('table td:nth-child(2) pre').textContent; + + header.innerHTML = `
${lang}
` + const btn = header.querySelector('i.eva'); + el.prepend(header); + btn.setAttribute('data-clipboard-text', code); + } + } + + initClipboard() { + if (!document.querySelector('[data-clipboard-text]')) return false; + if (this.clipboard) { + this.clipboard.destroy(); + } + this.clipboard = new ClipboardJS('[data-clipboard-text]'); + this.clipboard.on('success', function(e) { + alert(window.__theme.i18n.copySuccess); + }) + this.clipboard.on('error', function(e) { + alert(window.__theme.i18n.copyFailed); + console.error('Action:', e.action); + console.error('Trigger:', e.trigger); + }); + } + + initNightMode() { + const el = document.querySelector('.dark-mode-switch'); + const _i = el.querySelector('i'); + + function setDarkMode(isDark) { + if (isDark) { + _i.classList.remove('eva-moon'); + _i.classList.add('eva-sun'); + document.documentElement.classList.add('dark'); + } else { + _i.classList.remove('eva-sun'); + _i.classList.add('eva-moon'); + document.documentElement.classList.remove('dark'); + } + } + + if (window.__theme.autoDarkMode) { + setDarkMode(localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)); + } else { + setDarkMode(localStorage.theme === 'dark'); + } + + + el.addEventListener('click', () => { + if (_i.classList.contains('eva-sun')) { + localStorage.setItem('theme', 'light'); + setDarkMode(false); + } else { + localStorage.setItem('theme', 'dark'); + setDarkMode(true); + } + }) + } + + async hugoEncrypt() { + const storageKey = location.pathname + "password"; + const encryption_blocks = Array.from(document.querySelectorAll("hugo-encrypt")); + const userStorage = window.__theme.hugoEncrypt.userStorage; + function deriveKey(passphrase, salt) { + salt = salt || crypto.getRandomValues(new Uint8Array(8)); + return crypto.subtle + .importKey("raw", new TextEncoder().encode(passphrase), "PBKDF2", false, ["deriveKey"]) + .then(key => + crypto.subtle.deriveKey( + { name: "PBKDF2", salt, iterations: 1000, hash: "SHA-256" }, + key, + { name: "AES-GCM", length: 256 }, + false, + ["encrypt", "decrypt"], + ), + ) + .then(key => [key, salt]); + } + function decrypt(passphrase, saltIvCipherHex) { + const [salt, iv, data] = saltIvCipherHex.split("-").map(hexStr => new Uint8Array(hexStr.match(/.{2}/g).map(h => parseInt(h, 16)))); + return deriveKey(passphrase, salt) + .then(([key]) => crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, data)) + .then(v => new TextDecoder("utf-8").decode(new Uint8Array(v))); + } + async function digestMessage(message) { + const msgUint8 = new TextEncoder().encode(message); + const hashBuffer = await crypto.subtle.digest('SHA-1', msgUint8); + const hashArray = Array.from(new Uint8Array(hashBuffer)); + const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); + return hashHex; + } + + async function hugoDecrypt(password, type, el, id) { + const cipher = el.querySelector('cipher-text'); + try { + const decrypted_text = await decrypt(password, cipher.innerText); + const sha1_sum = await digestMessage(decrypted_text.replace(/\r?\n?[^\r\n]*$/, "")); + if ( decrypted_text.includes(sha1_sum) ) { + el.querySelector(".hugo-encrypt-encryption-notice").remove(); + cipher.outerHTML = decrypted_text; + userStorage.setItem(storageKey + id, password); + document.querySelector(`#r${id} .hugo-encrypt-sha1sum`).innerHTML = "Success: " + sha1_sum; + console.log(`Decryption successful. Storing password in ${userStorage}.`); + } + } catch (error) { + if (type === "input") { + el.querySelector(".hugo-encrypt-input-response").innerHTML = window.__theme.hugoEncrypt.wrongPasswordText; + console.log(window.__theme.hugoEncrypt.wrongPasswordText, error); + } else if (type === "storage") { + userStorage.removeItem(location.pathname + "password"); + console.log("Password changed. Clearing userStorage.", error); + } + } + }; + + const hugoEncryptBlocks = Array.from(document.querySelectorAll('.hugo-encrypt-button')) as HTMLElement[]; + for (let index = 0; index < hugoEncryptBlocks.length; index++) { + const block = hugoEncryptBlocks[index]; + block.addEventListener('click', async (e) => { + const id = (e.target as HTMLElement).getAttribute('data-hugo-encrypt-id'); + const El = document.getElementById(`r${id}`); + const password = (El.querySelector('.hugo-encrypt-input') as HTMLInputElement).value; + await hugoDecrypt(password, 'input', El, id); + this.renderPost(); + }) + } + + if (encryption_blocks.length) { + for (const block of encryption_blocks) { + const id = block.id.replace(/^r/, ""); + const password = userStorage.getItem(storageKey + id); + if (password) { + await hugoDecrypt(password, "storage", block, id); + this.renderPost(); + } + } + } + } + + initKatex() { + if (params.katex) { + const script = document.createElement('script'); + script.src = params.katex; + document.body.appendChild(script); + script.addEventListener('load', () => { + window.rednerKatex(); + }) + } + } + + updateZoom() { + if (!window.__theme.imageZoom) return false; + if (!window.__theme.lazyload) { + this.noLazyload(true); + } + // this.zoom.detach(); + this.zoom.attach('[data-zoomable]:not([data-lazyload]):not(.medium-zoom-image)'); + } +} + +window.addEventListener('load', async () => { + window.Luna = new Luna(); + window.Luna.init(); +}); diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 6922dee9..eab9da56 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -1,390 +1,393 @@ -baseURL: https://hugo-theme-luna.imiku.me/ -languageCode: en-us -defaultContentLanguage: en-us -title: Ice-Hazymoon's Blog -enableRobotsTXT: true -enableEmoji: true -theme: hugo-theme-luna -timeout: 60000 -timeZone: Asia/Shanghai - -# 可根据 Git 中的提交生成最近更新记录。 -# use git commit log to generate lastmod record -enableGitInfo: true - -# 如果你的博客包含中日韩语，请启用此选项 -# enable CJK language support -hasCJKLanguage: true - -# 每页显示文章数量 -# pagination size -paginate: 10 - -# 启用谷歌统计 -# google analytics tracking code -# googleAnalytics: UA-98634098-1 - -# 版权信息，默认为 author.name ↓ -# default: author.name ↓ -# copyright: "" -permalinks: - # 文章链接的格式 - # Format of posts links - posts: /:year/:month/:day/:slug.html # 2019/01/01/hello-world.html - pages: /:slug.html # about.html - -author: - name: Ice-Hazymoon - -frontmatter: - lastmod: - - :git - - lastmod - - :fileModTime - - date - - publishDate - - :default - -taxonomies: - tag: "tags" - category: "categories" - -summaryLength: 70 -canonifyURLs: false -relativeURLs: false - -# 图像处理 -# see https://gohugo.io/content-management/image-processing/#imaging-configuration -imaging: - resampleFilter: CatmullRom - quality: 95 - anchor: smart - -outputFormats: - offline: - name: offline - baseName: offline - mediaType: text/html - notAlternative: true - permalinkable: true - -caches: - getresource: - dir: :resourceDir/_gen - maxAge: 24h - -# 隐私政策，请查看 https://gohugo.io/about/hugo-and-gdpr/ -# See https://gohugo.io/about/hugo-and-gdpr/ -privacy: - googleAnalytics: - anonymizeIP: true - youtube: - privacyEnhanced: true - -sitemap: - changefreq: weekly - priority: 0.5 - filename: sitemap.xml - -menu: - main: - - name: Home - weight: 10 - identifier: home - params: - icon: eva eva-home - url: / - - name: About - weight: 20 - identifier: about - params: - icon: eva eva-heart - url: /about/ - - name: Links - weight: 30 - identifier: links - params: - icon: eva eva-people - url: /links/ - - name: Archives - weight: 40 - identifier: archives - params: - icon: eva eva-bar-chart - url: /archives/ - # - name: Tags - # weight: 50 - # identifier: tags - # params: - # icon: eva eva-hash - # url: /tags/ - # - name: Categories - # weight: 60 - # identifier: categories - # params: - # icon: eva eva-folder - # url: /categories/ - - name: Twitter - weight: 70 - identifier: twitter - params: - icon: eva eva-twitter - url: /twitter/ - - name: GitHub - weight: 80 - identifier: github - params: - icon: eva eva-github - url: /github/ - - name: Search - weight: 999 - identifier: search - params: - icon: eva eva-search - url: /search/ - -languages: - zh-cn: - contentDir: content/zh-hans - title: Ice-Hazymoon 的博客 - languageName: 中文 - params: - icon: "images/i18n/zh-cn.svg" # in assets folder - twitter: - rsshub: "https://rsshub.rssforever.com" - id: "Ice_Hazymoon" - imageProcessing: true - github: - id: "Ice-Hazymoon" - minStars: 10 - license: - enabled: true - name: "署名 - 非商业性使用 - 禁止演绎 4.0" - icon: "Cc-by-nc-nd.svg" # in assets folder - url: "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" - notification: - enabled: true - file: "README.zh.md" - en-us: - contentDir: content/en-us - title: Ice-Hazymoon's Blog - languageName: English - params: - icon: "images/i18n/en-us.svg" # in assets folder - -markup: - highlight: - style: dracula - guessSyntax: true - tabWidth: 4 - lineNumbersInTable: true - lineNos: true - codeFences: true - goldmark: - renderer: - unsafe: true # enable html in markdown - -# .Site.Params -params: - # CDN 地址 - # CDN URL - publicCDN: "" - - # 在首页顶部创建一个通知部分 - # Create a notification section at the top of the home page - notification: - enabled: true - file: "README.md" # assets/README.md - - # Rss 配置 - # RSS configuration - rss: - # 如果为 false，你必须设置 Output Formats，请查看：https://gohugo.io/templates/output-formats#customizing-output-formats - # If false, you must set Output Formats, see: https://gohugo.io/templates/output-formats#customizing-output-formats - enabled: true - # 是否输出全文 - # Output full text - fullText: true - - # 如果为 false，你必须设置 Output Formats，请查看：https://gohugo.io/templates/output-formats#customizing-output-formats - # If false, you must set Output Formats, see: https://gohugo.io/templates/output-formats#customizing-output-formats - sitemap: true - - # 网站主题颜色 - # Site theme colors - themeColor: "#dd6065" - - # 网站字体 - # Site font - # font: '"Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' - font: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' - - # 自定义脚本 - # ts/custom.ts - customScript: - enable: false - pjax: true # Auto-reload in pjax mode - - # 网站底部显示运行时间 - # Show site runtime - runTime: - enable: true - # 网站创建时间 - # Site creation time - creatTime: 2016/12/12 - - # 网站创建年份 - # Site creation year - since: "2016" - - # 显示文章过时提醒 - # show warning when outdated info detected - outdatedInfoWarning: - enable: true - # 超过该天数将显示过时提醒 - # A timeout reminder will be displayed if the last modification time exceeds that number of days - day: 90 - - # 自动切换夜间模式（使用设备设置） - # Automatic switching of night mode (using device settings) - autoDarkMode: false - - # 文章分享功能 - share: - twitter: true - facebook: true - weibo: true - copyLinkText: true - qrcode: true - - # 文章许可设置 - # license - license: - enabled: true - name: "CC BY-NC-ND 4.0" - icon: "Cc-by-nc-nd.svg" # in assets folder - url: "https://creativecommons.org/licenses/by-nc-nd/4.0" - - # 显示右上角 i18n 切换按钮 - # Display i18n toggle button - i18nlist: true - - # GitHub 页面设置 - # github page - github: - id: "torvalds" - minStars: 5 - - # Twitter 页面设置 - # tweet page - twitter: - rsshub: "https://rsshub.rssforever.com" - id: "GenshinImpact" - imageProcessing: true - - # 开启图片放大功能 - # Image Zoom Plugin - # see https://github.com/francoischalifour/medium-zoom - imageZoom: true - - # 图片懒加载 - # lazyload image - lazyload: true - - # 更快速的阅读英文内容, 参考：https://bionic-reading.com/ - # Read English content faster, see https://bionic-reading.com/ - bionicReading: - enabled: true - - - # 启用谷歌翻译插件 - # enable google translate in footer - googleTranslate: true - - # 优化中文排版，请参考：https://github.com/vinta/pangu.js - # Optimize Chinese typography, see: https://github.com/vinta/pangu.js - pangu: true - - # 文章页显示最后修改时间 - # For outdated reminders - lastmod: true - - # 显示阅读时间 - # show reading time - readingTime: true - - # 显示文章字数 - # show word count - wordCount: false - - # 开启文章内目录，可以在页面内单独设置 - # Show table of contents - # You can enable it separately in the page - toc: - enable: true - # 超过这个字数后将显示目录 - # When the article word count is greater than this value, the TOC will be displayed - wordCount: 400 - - # 加密功能 - # encryption articles - HugoEncrypt: - # 默认密码 - # default password - Password: "123456" - # 密码缓存选项 "session" or "local" - # or "local" - Storage: "session" - - # 开启 Pjax 无刷新加载 - # Enable pjax with swup.js - pjax: true - - # 开启 PWA - # use service worker - pwa: true - - # 开启数学公式 - # katex - katex: true - - # 开启返回顶部按钮 - # backtop button - backtop: true - - # 默认文章封面图片 - # 图片必须位于 assets 文件夹 - # Default featured image - # Your images must be located in the assets folder - # /images/featured_image.jpg or https://source.unsplash.com/random - defaultFeaturedImage: false - - # 自动调整图片大小并兼容 Webp 格式 - # Optimize your images and SEO - imageProcessing: - cover: - enabled: true - content: - enabled: true - - # 网站信息，根据需要修改 - # site info - image: - url: "/cover.png" - width: 1000 - height: 519 - - logo: - url: "/icon.png" - width: 200 - height: 200 - - author: Ice-Hazymoon - keywords: - - Hugo - - Hugo Theme - - Luna - description: "A simple, performance-first, SEO-friendly Hugo theme" - -build: - noJSConfigInAssets: true +baseURL: https://hugo-theme-luna.imiku.me/ +languageCode: en-us +defaultContentLanguage: en-us +title: Ice-Hazymoon's Blog +enableRobotsTXT: true +enableEmoji: true +theme: hugo-theme-luna +timeout: 60000 +timeZone: Asia/Shanghai + +# 可根据 Git 中的提交生成最近更新记录。 +# use git commit log to generate lastmod record +enableGitInfo: true + +# 如果你的博客包含中日韩语，请启用此选项 +# enable CJK language support +hasCJKLanguage: true + +# 每页显示文章数量 +# pagination size +paginate: 10 + +# 启用谷歌统计 +# google analytics tracking code +# googleAnalytics: UA-98634098-1 + +# 版权信息，默认为 author.name ↓ +# default: author.name ↓ +# copyright: "" +permalinks: + # 文章链接的格式 + # Format of posts links + posts: /:year/:month/:day/:slug.html # 2019/01/01/hello-world.html + pages: /:slug.html # about.html + +author: + name: Ice-Hazymoon + +frontmatter: + lastmod: + - :git + - lastmod + - :fileModTime + - date + - publishDate + - :default + +taxonomies: + tag: "tags" + category: "categories" + +summaryLength: 70 +canonifyURLs: false +relativeURLs: false + +# 图像处理 +# see https://gohugo.io/content-management/image-processing/#imaging-configuration +imaging: + resampleFilter: CatmullRom + quality: 95 + anchor: smart + +outputFormats: + offline: + name: offline + baseName: offline + mediaType: text/html + notAlternative: true + permalinkable: true + +caches: + getresource: + dir: :resourceDir/_gen + maxAge: 24h + +# 隐私政策，请查看 https://gohugo.io/about/hugo-and-gdpr/ +# See https://gohugo.io/about/hugo-and-gdpr/ +privacy: + googleAnalytics: + anonymizeIP: true + youtube: + privacyEnhanced: true + +sitemap: + changefreq: weekly + priority: 0.5 + filename: sitemap.xml + +menu: + main: + - name: Home + weight: 10 + identifier: home + params: + icon: eva eva-home + url: / + - name: About + weight: 20 + identifier: about + params: + icon: eva eva-heart + url: /about/ + - name: Links + weight: 30 + identifier: links + params: + icon: eva eva-people + url: /links/ + - name: Archives + weight: 40 + identifier: archives + params: + icon: eva eva-bar-chart + url: /archives/ + # - name: Tags + # weight: 50 + # identifier: tags + # params: + # icon: eva eva-hash + # url: /tags/ + # - name: Categories + # weight: 60 + # identifier: categories + # params: + # icon: eva eva-folder + # url: /categories/ + - name: Twitter + weight: 70 + identifier: twitter + params: + icon: eva eva-twitter + url: /twitter/ + - name: GitHub + weight: 80 + identifier: github + params: + icon: eva eva-github + url: /github/ + - name: Search + weight: 999 + identifier: search + params: + icon: eva eva-search + url: /search/ + +languages: + zh-cn: + contentDir: content/zh-hans + title: Ice-Hazymoon 的博客 + languageName: 中文 + params: + icon: "images/i18n/zh-cn.svg" # in assets folder + twitter: + rsshub: "https://rsshub.rssforever.com" + id: "Ice_Hazymoon" + imageProcessing: true + github: + id: "Ice-Hazymoon" + minStars: 10 + license: + enabled: true + name: "署名 - 非商业性使用 - 禁止演绎 4.0" + icon: "Cc-by-nc-nd.svg" # in assets folder + url: "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" + notification: + enabled: true + file: "README.zh.md" + en-us: + contentDir: content/en-us + title: Ice-Hazymoon's Blog + languageName: English + params: + icon: "images/i18n/en-us.svg" # in assets folder + +markup: + highlight: + style: dracula + guessSyntax: true + tabWidth: 4 + lineNumbersInTable: true + lineNos: true + codeFences: true + goldmark: + renderer: + unsafe: true # enable html in markdown + +# .Site.Params +params: + # CDN 地址 + # CDN URL + publicCDN: "" + + # 在首页顶部创建一个通知部分 + # Create a notification section at the top of the home page + notification: + enabled: true + file: "README.md" # assets/README.md + + # Rss 配置 + # RSS configuration + rss: + # 如果为 false，你必须设置 Output Formats，请查看：https://gohugo.io/templates/output-formats#customizing-output-formats + # If false, you must set Output Formats, see: https://gohugo.io/templates/output-formats#customizing-output-formats + enabled: true + # 是否输出全文 + # Output full text + fullText: true + + # 如果为 false，你必须设置 Output Formats，请查看：https://gohugo.io/templates/output-formats#customizing-output-formats + # If false, you must set Output Formats, see: https://gohugo.io/templates/output-formats#customizing-output-formats + sitemap: true + + # 网站主题颜色 + # Site theme colors + themeColor: "#dd6065" + + # 网站字体 + # Site font + # font: '"Times New Roman", Times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' + font: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif' + + # 自定义脚本 + # ts/custom.ts + customScript: + enable: false + pjax: true # Auto-reload in pjax mode + + # 网站底部显示运行时间 + # Show site runtime + runTime: + enable: true + # 网站创建时间 + # Site creation time + creatTime: 2016/12/12 + + # 网站创建年份 + # Site creation year + since: "2016" + + # 显示文章过时提醒 + # show warning when outdated info detected + outdatedInfoWarning: + enable: true + # 超过该天数将显示过时提醒 + # A timeout reminder will be displayed if the last modification time exceeds that number of days + day: 90 + + # 自动切换夜间模式（使用设备设置） + # Automatic switching of night mode (using device settings) + autoDarkMode: false + + # 文章分享功能 + share: + twitter: true + facebook: true + weibo: true + copyLinkText: true + qrcode: true + + # 文章许可设置 + # license + license: + enabled: true + name: "CC BY-NC-ND 4.0" + icon: "Cc-by-nc-nd.svg" # in assets folder + url: "https://creativecommons.org/licenses/by-nc-nd/4.0" + + # 显示右上角 i18n 切换按钮 + # Display i18n toggle button + i18nlist: true + + # GitHub 页面设置 + # github page + github: + id: "torvalds" + minStars: 5 + + # Twitter 页面设置 + # tweet page + twitter: + rsshub: "https://rsshub.rssforever.com" + id: "GenshinImpact" + imageProcessing: true + + # 开启图片放大功能 + # Image Zoom Plugin + # see https://github.com/francoischalifour/medium-zoom + imageZoom: true + + # 图片懒加载 + # lazyload image + lazyload: true + + # 更快速的阅读英文内容, 参考：https://bionic-reading.com/ + # Read English content faster, see https://bionic-reading.com/ + bionicReading: + enabled: true + + + # 启用谷歌翻译插件 + # enable google translate in footer + googleTranslate: true + + # 优化中文排版，请参考：https://github.com/vinta/pangu.js + # Optimize Chinese typography, see: https://github.com/vinta/pangu.js + pangu: true + + # 文章页显示最后修改时间 + # For outdated reminders + lastmod: true + + # 显示阅读时间 + # show reading time + readingTime: true + + # 显示文章字数 + # show word count + wordCount: false + + # 开启文章内目录，可以在页面内单独设置 + # Show table of contents + # You can enable it separately in the page + toc: + enable: true + # 超过这个字数后将显示目录 + # When the article word count is greater than this value, the TOC will be displayed + wordCount: 400 + + # 加密功能 + # encryption articles + HugoEncrypt: + # 默认密码 + # default password + Password: "123456" + # 密码缓存选项 "session" or "local" + # or "local" + Storage: "session" + + # 开启 Pjax 无刷新加载 + # Enable pjax with swup.js + pjax: true + + # 开启 PWA + # use service worker + pwa: true + + # 开启数学公式 + # katex + katex: true + + # 开启返回顶部按钮 + # backtop button + backtop: true + + # 默认文章封面图片 + # 图片必须位于 assets 文件夹 + # Default featured image + # Your images must be located in the assets folder + # /images/featured_image.jpg or https://source.unsplash.com/random + defaultFeaturedImage: false + + # 自动调整图片大小并兼容 Webp 格式 + # Optimize your images and SEO + imageProcessing: + cover: true + content: true + autoResize: + - 640 + - 1080 + - 1440 + webp: true + + # 网站信息，根据需要修改 + # site info + image: + url: "/cover.png" + width: 1000 + height: 519 + + logo: + url: "/icon.png" + width: 200 + height: 200 + + author: Ice-Hazymoon + keywords: + - Hugo + - Hugo Theme + - Luna + description: "A simple, performance-first, SEO-friendly Hugo theme" + +build: + noJSConfigInAssets: true diff --git a/exampleSite/content/en-us/posts/Typography/index.md b/exampleSite/content/en-us/posts/Typography/index.md index 846c92a2..51ca5b77 100644 --- a/exampleSite/content/en-us/posts/Typography/index.md +++ b/exampleSite/content/en-us/posts/Typography/index.md @@ -1,237 +1,229 @@ ---- -title: "Typography" -date: 2022-04-15T02:49:13+02:00 -slug: typography -featured_image: cover.jpg -tags: - - English -refs: - - link: https://play.tailwindcss.com/uj1vGACRJA?layout=preview ---- - -Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS. - - - -By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive. - -We get lots of complaints about it actually, with people regularly asking us things like: - -> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too? - -We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful. - -The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles. - -It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document: - -```html {linenos=table,hl_lines=[8,"4-6"],linenostart=199} -
-

Garlic bread with cheese: What the science tells us

-

- For years parents have espoused the health benefits of eating garlic bread with cheese to their - children, with the food earning such an iconic status in our culture that kids will often dress - up as warm, cheesy loaf for Halloween. -

-

- But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases - springing up around the country. -

- -
-``` - -For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md). - ---- - -## What to expect from here on out - -What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_. - -It's important to cover all of these use cases for a few reasons: - -1. We want everything to look good out of the box. -2. Really just the first reason, that's the whole point of the plugin. -3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items. - -Now we're going to try out another header style. - -### Typography should be easy - -So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable. - -Something a wise person once told me about typography is: - -> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad. - -It's probably important that images look okay here by default as well: - -![Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.](https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80) - -Now I'm going to show you an example of an unordered list to make sure that looks good, too: - -- So here is the first item in this list. -- In this example we're keeping the items short. -- Later, we'll use longer, more complex list items. - -And that's the end of this section. - -## What if we stack headings? - -### We should make sure that looks good, too. - -Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be. - -### When a heading comes after a paragraph … - -When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like. - -- **I often do this thing where list items have headings.** - - For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right. - - I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way. - -- **Since this is a list, I need at least two items.** - - I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles. - -- **It's not a bad idea to add a third item either.** - - I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it. - -After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading. - -## Code should look okay by default. - -I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting. - -Here's what a default `tailwind.config.js` file looks like at the time of writing: - -```js -module.exports = { - purge: [], - theme: { - extend: {}, - }, - variants: {}, - plugins: [], -} -``` - -Hopefully that looks good enough to you. - -### What about nested lists? - -Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work. - -1. **Nested lists are rarely a good idea.** - - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read. - - Nested navigation in UIs is a bad idea too, keep things as flat as possible. - - Nesting tons of folders in your source code is also not helpful. -2. **Since we need to have more items, here's another one.** - - I'm not sure if we'll bother styling more than two levels deep. - - Two is already too much, three is guaranteed to be a bad idea. - - If you nest four levels deep you belong in prison. -3. **Two items isn't really a list, three is good though.** - - Again please don't nest lists if you want people to actually read your content. - - Nobody wants to look at this. - - I'm upset that we even have to bother styling this. - -The most annoying thing about lists in Markdown is that `
  • ` elements aren't given a child `

    ` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too. - -- **For example, here's another nested list.** - - But this time with a second paragraph. - - - These list items won't have `

    ` tags - - Because they are only one line each - -- **But in this second top-level list item, they will.** - - This is especially annoying because of the spacing on this paragraph. - - - As you can see here, because I've added a second line, this list item now has a `

    ` tag. - - This is the second line I'm talking about by the way. - - - Finally here's another list item so it's more like a list. - -- A closing list item, but with no nested list, because why not? - -And finally a sentence to close off this section. - -## There are other elements we need to style - -I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier. - -We even included table styles, check it out: - -| Wrestler | Origin | Finisher | -| ----------------------- | ------------ | ------------------ | -| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter | -| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner | -| Randy Savage | Sarasota, FL | Elbow Drop | -| Vader | Boulder, CO | Vader Bomb | -| Razor Ramon | Chuluota, FL | Razor's Edge | - -We also need to make sure inline code looks good, like if I wanted to talk about `` elements or tell you the good news about `@tailwindcss/typography`. - -### Sometimes I even use `code` in headings - -Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really. - -Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it. - -#### We haven't used an `h4` yet - -But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`. - -We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks. - -### We still need to think about stacked headings though. - -#### Let's make sure we don't screw that up with `h4` elements, either. - -Phew, with any luck we have styled the headings above this text and they look pretty good. - -Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document. - -What I've written here is probably long enough, but adding this final sentence can't hurt. - -## Math - -```TeX -this is a inline katex: $ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$$ E_{0}=mc^{2} $$ - -$$ -{\mathrm d}K={\mathbf F}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf p}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf x}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf p} -$$ - -\\[3 < 4\\] - -\begin{align} - p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ - p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) -\end{align} -``` - -this is a inline katex: $ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$$ E_{0}=mc^{2} $$ - -$$ -{\mathrm d}K={\mathbf F}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf p}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf x}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf p} -$$ - -\\[3 < 4\\] - -\begin{align} - \nonumber p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ - p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) -\end{align} +--- +title: "Typography" +date: 2022-04-15T02:49:13+02:00 +slug: typography +featured_image: cover.jpg +tags: + - English +refs: + - link: https://play.tailwindcss.com/uj1vGACRJA?layout=preview +--- + +Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS. + + + +By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive. + +We get lots of complaints about it actually, with people regularly asking us things like: + +> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too? + +We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look _awesome_, not awful. + +The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles. + +It adds a new `prose` class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document: + +```html {linenos=table,hl_lines=[8,"4-6"],linenostart=199} +

    +

    Garlic bread with cheese: What the science tells us

    +

    + For years parents have espoused the health benefits of eating garlic bread with cheese to their + children, with the food earning such an iconic status in our culture that kids will often dress + up as warm, cheesy loaf for Halloween. +

    +

    + But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases + springing up around the country. +

    + +
    +``` + +For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md). + +--- + +## What to expect from here on out + +What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_. + +It's important to cover all of these use cases for a few reasons: + +1. We want everything to look good out of the box. +2. Really just the first reason, that's the whole point of the plugin. +3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items. + +Now we're going to try out another header style. + +### Typography should be easy + +So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable. + +Something a wise person once told me about typography is: + +> Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad. + +It's probably important that images look okay here by default as well: + +![Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.](https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80) + +Now I'm going to show you an example of an unordered list to make sure that looks good, too: + +- So here is the first item in this list. +- In this example we're keeping the items short. +- Later, we'll use longer, more complex list items. + +And that's the end of this section. + +## What if we stack headings? + +### We should make sure that looks good, too. + +Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be. + +### When a heading comes after a paragraph … + +When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like. + +- **I often do this thing where list items have headings.** + + For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right. + + I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way. + +- **Since this is a list, I need at least two items.** + + I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles. + +- **It's not a bad idea to add a third item either.** + + I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it. + +After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading. + +## Code should look okay by default. + +I think most people are going to use [highlight.js](https://highlightjs.org/) or [Prism](https://prismjs.com/) or something if they want to style their code blocks but it wouldn't hurt to make them look _okay_ out of the box, even with no syntax highlighting. + +Here's what a default `tailwind.config.js` file looks like at the time of writing: + +```js +module.exports = { + purge: [], + theme: { + extend: {}, + }, + variants: {}, + plugins: [], +} +``` + +Hopefully that looks good enough to you. + +### What about nested lists? + +Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess since some of you goofballs are going to do it we have to carry the burden of at least making it work. + +1. **Nested lists are rarely a good idea.** + - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read. + - Nested navigation in UIs is a bad idea too, keep things as flat as possible. + - Nesting tons of folders in your source code is also not helpful. +2. **Since we need to have more items, here's another one.** + - I'm not sure if we'll bother styling more than two levels deep. + - Two is already too much, three is guaranteed to be a bad idea. + - If you nest four levels deep you belong in prison. +3. **Two items isn't really a list, three is good though.** + - Again please don't nest lists if you want people to actually read your content. + - Nobody wants to look at this. + - I'm upset that we even have to bother styling this. + +The most annoying thing about lists in Markdown is that `
  • ` elements aren't given a child `

    ` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too. + +- **For example, here's another nested list.** + + But this time with a second paragraph. + + - These list items won't have `

    ` tags + - Because they are only one line each + +- **But in this second top-level list item, they will.** + + This is especially annoying because of the spacing on this paragraph. + + - As you can see here, because I've added a second line, this list item now has a `

    ` tag. + + This is the second line I'm talking about by the way. + + - Finally here's another list item so it's more like a list. + +- A closing list item, but with no nested list, because why not? + +And finally a sentence to close off this section. + +## There are other elements we need to style + +I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier. + +We even included table styles, check it out: + +| Wrestler | Origin | Finisher | +| ----------------------- | ------------ | ------------------ | +| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter | +| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner | +| Randy Savage | Sarasota, FL | Elbow Drop | +| Vader | Boulder, CO | Vader Bomb | +| Razor Ramon | Chuluota, FL | Razor's Edge | + +We also need to make sure inline code looks good, like if I wanted to talk about `` elements or tell you the good news about `@tailwindcss/typography`. + +### Sometimes I even use `code` in headings + +Even though it's probably a bad idea, and historically I've had a hard time making it look good. This _"wrap the code blocks in backticks"_ trick works pretty well though really. + +Another thing I've done in the past is put a `code` tag inside of a link, like if I wanted to tell you about the [`tailwindcss/docs`](https://github.com/tailwindcss/docs) repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it. + +#### We haven't used an `h4` yet + +But now we have. Please don't use `h5` or `h6` in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a `before` pseudo-element to scream at you if you use an `h5` or `h6`. + +We don't style them at all out of the box because `h4` elements are already so small that they are the same size as the body copy. What are we supposed to do with an `h5`, make it _smaller_ than the body copy? No thanks. + +### We still need to think about stacked headings though. + +#### Let's make sure we don't screw that up with `h4` elements, either. + +Phew, with any luck we have styled the headings above this text and they look pretty good. + +Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want things to end that way but I have to assume it's because I think things will look weird or unbalanced if there is a heading too close to the end of the document. + +What I've written here is probably long enough, but adding this final sentence can't hurt. + +## Math + +```TeX +this is a inline katex: $ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$$ E_{0}=mc^{2} $$ + +\\[3 < 4\\] + +\begin{align} + p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ + p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) +\end{align} +``` + +this is a inline katex: $ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$$ E_{0}=mc^{2} $$ + +\\[3 < 4\\] + +\begin{align} + \nonumber p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ + p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) +\end{align} diff --git a/exampleSite/content/en-us/posts/Typography/index.zh-cn.md b/exampleSite/content/en-us/posts/Typography/index.zh-cn.md index 650c7416..7baebaee 100644 --- a/exampleSite/content/en-us/posts/Typography/index.zh-cn.md +++ b/exampleSite/content/en-us/posts/Typography/index.zh-cn.md @@ -1,144 +1,136 @@ ---- -title: "中文排版测试" -date: 2022-04-15T02:49:13+02:00 -slug: typography -featured_image: cover.jpg -tags: - - 中文 -refs: - - link: https://unsplash.com/ ---- - -## 中文文章排版实例：论语学而篇第一 - - - -**作者：** 孔子（ 前551年9月28日－前479年4月11日 ） - -### 本篇引语 - -《学而》是《论语》第一篇的篇名。 **《论语》** 中各篇一般都是以第一章的前二三个字作为该~~篇的篇名~~。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 - -### 原文 - -子曰：*「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」* - -### 译文 - -孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，`inline code` 不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 - -### 评析 - -宋代著名学者朱熹对此章评价极高，说它是 **「入道之门，积德之基」** 。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；~~「时」不能解为时常，而是时代或社会的意思~~，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同我的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见[《齐鲁学刊》](https://baike.baidu.com/item/%E9%BD%90%E9%B2%81%E5%AD%A6%E5%88%8A/10666044)1986年第6期文）这种解释可以`自圆其说`，而且也有一定的道理，供读者在理解本章内容时参考。 - -此外，在对「[人不知，而不愠](https://baike.baidu.com/item/%E4%BA%BA%E4%B8%8D%E7%9F%A5%E8%80%8C%E4%B8%8D%E6%84%A0%EF%BC%8C%E4%B8%8D%E4%BA%A6%E5%90%9B%E5%AD%90%E4%B9%8E/2867323)」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。 - -总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。 - -## 表格 - -| Wrestler | Origin | Finisher | -| ----------------------- | ------------ | ------------------ | -| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter | -| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner | -| Randy Savage | Sarasota, FL | Elbow Drop | -| Vader | Boulder, CO | Vader Bomb | -| Razor Ramon | Chuluota, FL | Razor's Edge | - -## 代码块 - -```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199} -// GetTitleFunc returns a func that can be used to transform a string to -// title case. -// -// The supported styles are -// -// - "Go" (strings.Title) -// - "AP" (see https://www.apstylebook.com/) -// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html) -// -// If an unknown or empty style is provided, AP style is what you get. -func GetTitleFunc(style string) func(s string) string { - switch strings.ToLower(style) { - case "go": - return strings.Title - case "chicago": - return transform.NewTitleConverter(transform.ChicagoStyle) - default: - return transform.NewTitleConverter(transform.APStyle) - } -} -``` - -## 列表 - -1. **Nested lists are rarely a good idea.** - - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read. - - Nested navigation in UIs is a bad idea too, keep things as flat as possible. - - Nesting tons of folders in your source code is also not helpful. -2. **Since we need to have more items, here's another one.** - - I'm not sure if we'll bother styling more than two levels deep. - - Two is already too much, three is guaranteed to be a bad idea. - - If you nest four levels deep you belong in prison. -3. **Two items isn't really a list, three is good though.** - - Again please don't nest lists if you want people to actually read your content. - - Nobody wants to look at this. - - I'm upset that we even have to bother styling this. - -*** - -- If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.
    - 如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。 -- Sometimes one pays most for the things one gets for nothing.
    - 有时候一个人为不花钱得到的东西付出的代价最高。 -- Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
    - 只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。 - -## 引用 - -> 　　我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。 - -### 套娃引用 - -> ## 呐喊 -> -> 题作呐喊，就是为革命者助战振威。呐喊中的小说，以振聋发聩的气势，揭示了中国的社会面貌，控诉了封建制度的罪恶，喊出了五四时期革命者的心声。 -> -> > 我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？ —— 鲁迅 -> > > 使劲套娃 - -## 数学公式 - -```TeX -这是一条行内公式：$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$$ E_{0}=mc^{2} $$ - -$$ -{\mathrm d}K={\mathbf F}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf p}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf x}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf p} -$$ - -\\[3 < 4\\] - -\begin{align} - p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ - p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) -\end{align} -``` - -这是一条行内公式：$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ - -$$ E_{0}=mc^{2} $$ - -$$ -{\mathrm d}K={\mathbf F}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf p}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf x}={\frac {{\mathrm d}{\mathbf x}}{{\mathrm d}t}}\cdot {\mathrm d}{\mathbf p} -$$ - -\\[3 < 4\\] - -\begin{align} - \nonumber p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ - p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) -\end{align} +--- +title: "中文排版测试" +date: 2022-04-15T02:49:13+02:00 +slug: typography +featured_image: cover.jpg +tags: + - 中文 +refs: + - link: https://unsplash.com/ +--- + +## 中文文章排版实例：论语学而篇第一 + + + +**作者：** 孔子（ 前551年9月28日－前479年4月11日 ） + +### 本篇引语 + +《学而》是《论语》第一篇的篇名。 **《论语》** 中各篇一般都是以第一章的前二三个字作为该~~篇的篇名~~。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 + +### 原文 + +子曰：*「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」* + +### 译文 + +孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，`inline code` 不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 + +### 评析 + +宋代著名学者朱熹对此章评价极高，说它是 **「入道之门，积德之基」** 。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；~~「时」不能解为时常，而是时代或社会的意思~~，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同我的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见[《齐鲁学刊》](https://baike.baidu.com/item/%E9%BD%90%E9%B2%81%E5%AD%A6%E5%88%8A/10666044)1986年第6期文）这种解释可以`自圆其说`，而且也有一定的道理，供读者在理解本章内容时参考。 + +此外，在对「[人不知，而不愠](https://baike.baidu.com/item/%E4%BA%BA%E4%B8%8D%E7%9F%A5%E8%80%8C%E4%B8%8D%E6%84%A0%EF%BC%8C%E4%B8%8D%E4%BA%A6%E5%90%9B%E5%AD%90%E4%B9%8E/2867323)」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。 + +总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。 + +## 表格 + +| Wrestler | Origin | Finisher | +| ----------------------- | ------------ | ------------------ | +| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter | +| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner | +| Randy Savage | Sarasota, FL | Elbow Drop | +| Vader | Boulder, CO | Vader Bomb | +| Razor Ramon | Chuluota, FL | Razor's Edge | + +## 代码块 + +```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199} +// GetTitleFunc returns a func that can be used to transform a string to +// title case. +// +// The supported styles are +// +// - "Go" (strings.Title) +// - "AP" (see https://www.apstylebook.com/) +// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html) +// +// If an unknown or empty style is provided, AP style is what you get. +func GetTitleFunc(style string) func(s string) string { + switch strings.ToLower(style) { + case "go": + return strings.Title + case "chicago": + return transform.NewTitleConverter(transform.ChicagoStyle) + default: + return transform.NewTitleConverter(transform.APStyle) + } +} +``` + +## 列表 + +1. **Nested lists are rarely a good idea.** + - You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read. + - Nested navigation in UIs is a bad idea too, keep things as flat as possible. + - Nesting tons of folders in your source code is also not helpful. +2. **Since we need to have more items, here's another one.** + - I'm not sure if we'll bother styling more than two levels deep. + - Two is already too much, three is guaranteed to be a bad idea. + - If you nest four levels deep you belong in prison. +3. **Two items isn't really a list, three is good though.** + - Again please don't nest lists if you want people to actually read your content. + - Nobody wants to look at this. + - I'm upset that we even have to bother styling this. + +*** + +- If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.
    + 如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。 +- Sometimes one pays most for the things one gets for nothing.
    + 有时候一个人为不花钱得到的东西付出的代价最高。 +- Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
    + 只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。 + +## 引用 + +> 　　我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。 + +### 套娃引用 + +> ## 呐喊 +> +> 题作呐喊，就是为革命者助战振威。呐喊中的小说，以振聋发聩的气势，揭示了中国的社会面貌，控诉了封建制度的罪恶，喊出了五四时期革命者的心声。 +> +> > 我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？ —— 鲁迅 +> > > 使劲套娃 + +## 数学公式 + +```TeX +这是一条行内公式：$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$$ E_{0}=mc^{2} $$ + +\\[3 < 4\\] + +\begin{align} + p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ + p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) +\end{align} +``` + +这是一条行内公式：$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $ + +$$ E_{0}=mc^{2} $$ + +\\[3 < 4\\] + +\begin{align} + \nonumber p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\ + p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) +\end{align} diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index d8757d6d..128ec125 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,71 +1,46 @@ {{- $lazyload := .Page.Site.Params.lazyload -}} {{- $imageZoom := .Page.Site.Params.imageZoom -}} {{- $public_cdn := cond .Page.Site.IsServer "" .Page.Site.Params.publicCDN -}} +{{- $lazyload_image := print $public_cdn ("images/outload.svg" | relURL) -}} {{- $Alt := .PlainText | safeHTML -}} + {{- if (urls.Parse (.Destination | safeURL)).Scheme -}}

    - + + {{- with $Alt -}}
    {{- . | markdownify -}}
    {{- end -}}
    - {{- else -}} {{- $Image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}} {{- $Permalink := .Destination | relURL | safeURL -}} - {{- $Width := 0 -}} - {{- $Height := 0 -}} - {{- $Srcset := "" -}} - {{- $Srcset_Webp := "" -}} - - {{- $Placeholder := "" -}} - - {{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}} {{- $galleryImage := false -}} - {{- if and $Image (not (eq $Image.MediaType.SubType "gif")) -}} - {{- $notSVG := ne (path.Ext .Destination) ".svg" -}} - {{- $Permalink = $Image.RelPermalink -}} - - {{- if $notSVG -}} - {{- $Width = $Image.Width -}} - {{- $Height = $Image.Height -}} - {{- $galleryImage = true -}} - {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}} - {{- $small := $Image.Resize "640x" -}} - {{- $big := $Image.Resize "1080x" -}} - - {{- $small_webp := $Image.Resize "640x webp" -}} - {{- $big_webp := $Image.Resize "1080x webp" -}} + {{- $processImage := partial "functions/image-process" (dict "Image" $Image "Site" .Page.Site) -}} - {{- $Placeholder = ($Image.Resize "50x").Filter (images.GaussianBlur 2) -}} - - {{- $Srcset = printf `%s 640w, %s 1080w` (print $public_cdn $small.RelPermalink) (print $public_cdn $big.RelPermalink) -}} - {{- $Srcset_Webp = printf `%s 640w, %s 1080w` (print $public_cdn $small_webp.RelPermalink) (print $public_cdn $big_webp.RelPermalink) -}} - {{- $Placeholder = print $public_cdn $Placeholder.RelPermalink -}} - {{- end -}} - {{- end -}} - {{- else -}} - {{- if $Image -}} - {{- $Permalink = $Image.RelPermalink -}} - {{- end -}} + {{- if $processImage.Processed -}} + {{- $galleryImage = true -}} {{- end -}} - - {{- $Permalink = print $public_cdn $Permalink -}} + {{- $Permalink = print $public_cdn $processImage.Permalink -}}
    - - {{- with $Srcset_Webp -}}{{- end -}} + + {{- with $processImage.SrcsetWebp -}}{{- end -}} + {{- if not (eq $Alt .Page.Title) -}} {{- with $Alt -}} @@ -94,13 +83,4 @@ {{- end -}} {{- end -}}
    - {{- end -}} diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html index 94e0dae6..bde1e9c3 100644 --- a/layouts/_default/archives.html +++ b/layouts/_default/archives.html @@ -1,5 +1,5 @@ {{- define "main" -}} -
    +
    diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d5519b71..048e02b2 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -11,7 +11,7 @@
    -
    {{- block "main" . -}}{{- end -}}
    +
    {{- block "main" . -}}{{- end -}}
    {{- partial "html/footer" . -}} diff --git a/layouts/_default/gallery.html b/layouts/_default/gallery.html index 5578d431..72b3b1ee 100644 --- a/layouts/_default/gallery.html +++ b/layouts/_default/gallery.html @@ -1,6 +1,6 @@ {{- define "main" -}}
    -
    +
    {{- .Title -}}
    {{- with .Summary -}}
    diff --git a/layouts/_default/github.html b/layouts/_default/github.html index 8631a4a5..5261235c 100644 --- a/layouts/_default/github.html +++ b/layouts/_default/github.html @@ -2,7 +2,7 @@ {{- $githubConfig := .Site.Params.github -}}
    {{- if and $githubConfig (and $githubConfig.id $githubConfig.minStars) -}} -
    +
    {{- .Title -}} diff --git a/layouts/_default/links.html b/layouts/_default/links.html index a8c3cca7..8b68acf3 100644 --- a/layouts/_default/links.html +++ b/layouts/_default/links.html @@ -1,6 +1,6 @@ {{- define "main" -}}
    -
    +
    {{- .Title -}} diff --git a/layouts/_default/page.html b/layouts/_default/page.html index 7c9d335f..8b0e662d 100644 --- a/layouts/_default/page.html +++ b/layouts/_default/page.html @@ -1,5 +1,5 @@ {{- define "main" -}} -
    +
    {{- .Content -}}
    diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 7e1b7b77..7bcb6091 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,87 +1,70 @@ {{- define "main" -}} {{- $public_cdn := cond .Site.IsServer "" .Site.Params.publicCDN -}} + {{- $lazyload_image := print $public_cdn ("images/outload.svg" | relURL) -}} {{- $Title := or $.Title (T "post.untitled") -}}
    {{- if or (.Site.Params.defaultFeaturedImage) (.Params.featured_image) -}} - {{- $featured_image := "" -}} - {{- $srcset := "" -}} - {{- $srcset_webp := "" -}} - {{- $featured_image_small := "" -}} - {{- $featured_image_big := "" -}} - {{- $featured_image_small_webp := "" -}} - {{- $featured_image_big_webp := "" -}} - {{- $featured_image_bg := "" -}} - {{- $width := 0 }} - {{- $height := 0 }} + {{- $featuredImage := "" -}} + {{- $processImage := "" -}} {{- $lazyload := .Site.Params.lazyload -}} - {{- $featured_image_url := or .Params.featured_image .Site.Params.defaultFeaturedImage -}} + {{- $featuredImageUrl := or .Params.featured_image .Site.Params.defaultFeaturedImage -}} - {{- if (urls.Parse ($featured_image_url | safeURL)).Scheme -}} - {{- $featured_image = $featured_image_url | safeURL -}} + {{- if (urls.Parse ($featuredImageUrl | safeURL)).Scheme -}} + {{- $featuredImage = $featuredImageUrl | safeURL -}} {{- else -}} - {{- if .Params.featured_image -}} - {{- $featured_image = .Resources.GetMatch .Params.featured_image -}} - {{- else -}} - {{- $featured_image = resources.Get .Site.Params.defaultFeaturedImage -}} - {{- end }} + {{- $featuredImage = cond (isset .Params "featured_image") (.Resources.GetMatch .Params.featured_image) (resources.Get .Site.Params.defaultFeaturedImage) -}} + {{- $processImage = partial "functions/image-process" (dict "Image" $featuredImage "Site" .Page.Site) -}} - {{- $width = $featured_image.Width -}} - {{- $height = $featured_image.Height -}} - - {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}} - {{- $featured_image_small = print $public_cdn ($featured_image.Resize "800x").RelPermalink -}} - {{- $featured_image_big = print $public_cdn ($featured_image.Resize "1200x").RelPermalink -}} - {{- $featured_image_bg = print $public_cdn (($featured_image.Resize "50x").Filter (images.GaussianBlur 2)).RelPermalink -}} - {{- $srcset = printf "%s 800w, %s 1200w" $featured_image_small $featured_image_big -}} - - {{- $featured_image_small_webp = print $public_cdn ($featured_image.Resize "800x webp").RelPermalink -}} - {{- $featured_image_big_webp = print $public_cdn ($featured_image.Resize "1200x webp").RelPermalink -}} - {{- $srcset_webp = printf "%s 800w, %s 1200w" $featured_image_small_webp $featured_image_big_webp -}} - {{- end -}} + {{- $featuredImageUrl = print $public_cdn $processImage.Permalink -}} {{- end -}} -

    +

    {{ $Title }}

    {{- else -}}
    -
    +
    {{ $Title }}
    {{- end -}}
    -
    +
    @@ -149,10 +132,14 @@

    +
    {{- if .Site.Params.bionicReading.enabled -}} - {{- $.Site.Data.luna.icon.wand | safeHTML -}} + {{- $.Site.Data.luna.icon.wand | safeHTML -}} {{- end -}} {{- .Content -}}
    diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 8f4d027d..d5c52b1e 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -1,6 +1,6 @@ {{- define "main" -}}
    -
    +
    {{- if eq .Title "Categories" -}} diff --git a/layouts/_default/twitter.html b/layouts/_default/twitter.html index caed14a4..f1ec18b3 100644 --- a/layouts/_default/twitter.html +++ b/layouts/_default/twitter.html @@ -1,10 +1,12 @@ {{- define "main" -}} {{- $public_cdn := cond .Site.IsServer "" .Site.Params.publicCDN -}} + {{- $lazyload_image := print $public_cdn ("images/outload.svg" | relURL) -}} {{- $twitterConfig := .Site.Params.twitter -}} {{- $twitterData := getJSON (print "https://api.rss2json.com/v1/api.json?rss_url=" $twitterConfig.rsshub "/twitter/user/" $twitterConfig.id) -}} {{- $lazyload := .Site.Params.lazyload -}} - {{- $imageZoom := .Page.Site.Params.imageZoom -}} + {{- $imageZoom := .Site.Params.imageZoom -}} + {{- $Site := .Site -}}
    @@ -49,38 +51,53 @@ {{- range $pics -}} {{- $picURL := htmlUnescape (replaceRE "" `${1}` .) -}} + {{- with resources.GetRemote $picURL -}} {{- with .Err -}} {{- warnf "%s" . -}} {{- else -}} + {{- $processImage := "" -}} {{- $pic_placeholder := "" -}} {{- $pic_webp := "" -}} + {{- $pic_srcset := "" -}} {{- if $twitterConfig.imageProcessing -}} - {{- $pic_placeholder = print $public_cdn ((.Resize "50x").Filter (images.GaussianBlur 2)).RelPermalink -}} - {{- $pic_webp = print $public_cdn (.Resize "1200x webp").RelPermalink -}} + {{- $processImage = partial "functions/image-process" (dict "Image" . "Site" $Site) -}} {{- end -}}
    - - {{- with $pic_webp -}} + + {{- with $processImage.SrcsetWebp -}} {{- end -}} - +
    {{- end -}} diff --git a/layouts/partials/custom/icons.html b/layouts/partials/custom/icons.html index fe5961f5..b8b3f39c 100644 --- a/layouts/partials/custom/icons.html +++ b/layouts/partials/custom/icons.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/layouts/partials/functions/image-process.html b/layouts/partials/functions/image-process.html new file mode 100644 index 00000000..480792f7 --- /dev/null +++ b/layouts/partials/functions/image-process.html @@ -0,0 +1,54 @@ +{{- $public_cdn := cond .Site.IsServer "" .Site.Params.publicCDN -}} + +{{- $Image := .Image -}} + +{{- $Permalink := "" -}} +{{- $galleryImage := false -}} + +{{- $NotSVG := ne $Image.MediaType.SubType "svg" -}} +{{- $NotGIF := ne $Image.MediaType.SubType "gif" -}} +{{- $Width := 0 -}} +{{- $Height := 0 -}} +{{- $Srcset := "" -}} +{{- $SrcsetWebp := "" -}} +{{- $Placeholder := "" -}} + +{{- $imageProcessing := .Site.Params.imageProcessing -}} + +{{- $returnValue := newScratch -}} + +{{- if and $Image (and $NotSVG $NotGIF) -}} + {{- $Permalink = $Image.RelPermalink -}} + {{- $Width = $Image.Width -}} + {{- $Height = $Image.Height -}} + {{- $galleryImage = true -}} + {{- if (default true $imageProcessing.content) -}} + {{- range $index, $size := sort $imageProcessing.autoResize -}} + {{- $isLast := eq (add $index 1) (len $imageProcessing.autoResize) -}} + {{- $end := print " " . "w" (cond $isLast "" ", ") -}} + {{- $resizeWidth := cond (gt $Width $size) $size $Width -}} + + {{- $Srcset = print $Srcset $public_cdn ($Image.Resize (print $resizeWidth "x")).RelPermalink $end -}} + + {{- if $imageProcessing.webp -}} + {{- $SrcsetWebp = print $SrcsetWebp $public_cdn ($Image.Resize (print $resizeWidth "x webp")).RelPermalink $end -}} + {{- end -}} + {{- end -}} + + {{- $Placeholder = print $public_cdn (($Image.Resize "50x jpg").Filter (images.GaussianBlur 2)).RelPermalink -}} + {{- end -}} + + {{- $returnValue.SetInMap "returnValue" "Processed" true -}} + {{- $returnValue.SetInMap "returnValue" "Srcset" $Srcset -}} + {{- $returnValue.SetInMap "returnValue" "SrcsetWebp" $SrcsetWebp -}} + {{- $returnValue.SetInMap "returnValue" "Placeholder" $Placeholder -}} + {{- $returnValue.SetInMap "returnValue" "Width" $Width -}} + {{- $returnValue.SetInMap "returnValue" "Height" $Height -}} + {{- $returnValue.SetInMap "returnValue" "NotSVG" $NotSVG -}} + {{- $returnValue.SetInMap "returnValue" "NotGIF" $NotGIF -}} + {{- $returnValue.SetInMap "returnValue" "Permalink" $Permalink -}} +{{- else -}} + {{- $returnValue.SetInMap "returnValue" "Processed" false -}} +{{- end -}} + +{{- return $returnValue.Get "returnValue" -}} diff --git a/layouts/partials/html/footer.html b/layouts/partials/html/footer.html index 5cc5fbb9..893069f2 100644 --- a/layouts/partials/html/footer.html +++ b/layouts/partials/html/footer.html @@ -15,7 +15,7 @@
    {{- if or .Site.Params.rss.enabled .Site.Params.sitemap -}} - + {{- end -}} {{- if .Site.Params.rss.enabled -}} diff --git a/layouts/partials/html/head.html b/layouts/partials/html/head.html index ac2b1a80..e216c964 100644 --- a/layouts/partials/html/head.html +++ b/layouts/partials/html/head.html @@ -47,9 +47,9 @@ - - - + + + {{- if .IsPage -}} {{- if not .Date.IsZero -}} diff --git a/layouts/partials/noscript.html b/layouts/partials/noscript.html index ddfc6e84..b2060af3 100644 --- a/layouts/partials/noscript.html +++ b/layouts/partials/noscript.html @@ -1,8 +1,8 @@ diff --git a/layouts/partials/post-card.html b/layouts/partials/post-card.html index b47cc1f4..21eda6ce 100644 --- a/layouts/partials/post-card.html +++ b/layouts/partials/post-card.html @@ -1,83 +1,59 @@ {{- $Summary := .Summary | plainify -}} {{- $public_cdn := cond .Site.IsServer "" .Site.Params.publicCDN -}} +{{- $lazyload_image := print $public_cdn ("images/outload.svg" | relURL) -}} {{- if eq .Type "posts" -}}
    {{- $hasCover := or (.Site.Params.defaultFeaturedImage) (.Params.featured_image) -}} {{- if $hasCover -}} - {{- $featured_image := "" -}} - {{- $srcset := "" -}} - {{- $srcset_webp := "" -}} - {{- $featured_image_small := "" -}} - {{- $featured_image_big := "" -}} - {{- $featured_image_small_webp := "" -}} - {{- $featured_image_big_webp := "" -}} - {{- $featured_image_bg := "" -}} - {{- $width := 0 }} - {{- $height := 0 }} + {{- $featuredImage := "" -}} + {{- $processImage := "" -}} {{- $lazyload := .Site.Params.lazyload -}} - {{- $featured_image_url := or .Params.featured_image .Site.Params.defaultFeaturedImage -}} + {{- $featuredImageUrl := or .Params.featured_image .Site.Params.defaultFeaturedImage -}} - {{- if (urls.Parse ($featured_image_url | safeURL)).Scheme -}} - {{- $featured_image = $featured_image_url | safeURL -}} + {{- if (urls.Parse ($featuredImageUrl | safeURL)).Scheme -}} + {{- $featured_image = $featuredImageUrl | safeURL -}} {{- else -}} - {{- if .Params.featured_image -}} - {{- $featured_image = .Resources.GetMatch .Params.featured_image -}} - {{- else -}} - {{- $featured_image = resources.Get .Site.Params.defaultFeaturedImage -}} - {{- end }} + {{- $featuredImage = cond (isset .Params "featured_image") (.Resources.GetMatch .Params.featured_image) (resources.Get .Site.Params.defaultFeaturedImage) -}} + {{- $processImage = partial "functions/image-process" (dict "Image" $featuredImage "Site" .Page.Site) -}} - {{- $width = $featured_image.Width -}} - {{- $height = $featured_image.Height -}} - - {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}} - {{- $featured_image_small = print $public_cdn ($featured_image.Resize "800x").RelPermalink -}} - {{- $featured_image_big = print $public_cdn ($featured_image.Resize "1200x").RelPermalink -}} - {{- $featured_image_bg = print $public_cdn (($featured_image.Resize "50x").Filter (images.GaussianBlur 2 )).RelPermalink -}} - {{- $srcset = printf "%s 800w, %s 1200w" $featured_image_small $featured_image_big -}} - - {{- $featured_image_small_webp = print $public_cdn ($featured_image.Resize "800x webp").RelPermalink -}} - {{- $featured_image_big_webp = print $public_cdn ($featured_image.Resize "1200x webp").RelPermalink -}} - {{- $srcset_webp = printf "%s 800w, %s 1200w" $featured_image_small_webp $featured_image_big_webp -}} - {{- end -}} - - {{- $featured_image = print $public_cdn $featured_image.RelPermalink -}} + {{- $featuredImageUrl = print $public_cdn $processImage.Permalink -}} {{- end }}
    {{- else -}}
    diff --git a/layouts/partials/post/footer.html b/layouts/partials/post/footer.html index a6d92c85..1468ef85 100644 --- a/layouts/partials/post/footer.html +++ b/layouts/partials/post/footer.html @@ -1,6 +1,5 @@ {{- partial "post/refs" . }} {{- partial "post/share" . }}
    -{{- partial "post/lastmod" . }} {{- partial "post/pagination" . }} -{{- partial "comment.html" . -}} \ No newline at end of file +{{- partial "comment.html" . -}} diff --git a/layouts/partials/post/lastmod.html b/layouts/partials/post/lastmod.html index 790d97aa..b979c60d 100644 --- a/layouts/partials/post/lastmod.html +++ b/layouts/partials/post/lastmod.html @@ -8,7 +8,7 @@ {{- end -}} {{- $lastMod := int (div (now.Sub ($updateTime)).Hours 24) -}} {{- if (gt $lastMod $config.day) -}} -
    +
    +
    \ No newline at end of file +
    diff --git a/layouts/partials/post/refs.html b/layouts/partials/post/refs.html index c926c4ef..fa92d159 100644 --- a/layouts/partials/post/refs.html +++ b/layouts/partials/post/refs.html @@ -1,5 +1,5 @@ {{- if .Params.refs -}} -
    +
    {{- T "post.refs" -}}
    {{- range $index, $ref := .Params.refs -}} diff --git a/layouts/shortcodes/gallery-grid.html b/layouts/shortcodes/gallery-grid.html index 03eb2d1d..9408f198 100644 --- a/layouts/shortcodes/gallery-grid.html +++ b/layouts/shortcodes/gallery-grid.html @@ -1,3 +1,3 @@ -
    - {{ with .Inner }} {{ $.Page.RenderString . }} {{ end }} -
    \ No newline at end of file +
    + {{ with .Inner }}{{ $.Page.RenderString . }}{{ end }} +
    diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index 1d1a8550..49515c7e 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -1,3 +1,3 @@
    - {{ with .Inner }} {{ $.Page.RenderString . }} {{ end }} -
    \ No newline at end of file + {{ with .Inner }}{{ $.Page.RenderString . }}{{ end }} +
    diff --git a/layouts/shortcodes/link.html b/layouts/shortcodes/link.html index abcebd66..2fca41c0 100644 --- a/layouts/shortcodes/link.html +++ b/layouts/shortcodes/link.html @@ -18,11 +18,20 @@ > {{- $title -}} + + +
    {{- $title -}}
    {{- $desc -}}
    diff --git a/layouts/shortcodes/tab-panel.html b/layouts/shortcodes/tab-panel.html index 767ca742..326fa7ad 100644 --- a/layouts/shortcodes/tab-panel.html +++ b/layouts/shortcodes/tab-panel.html @@ -1,7 +1,8 @@ {{- $id := print "tab-" (delimit (shuffle (seq 1 9)) "") "-" -}} - - - diff --git a/layouts/shortcodes/tab-view.html b/layouts/shortcodes/tab-view.html index 098af8d5..5004884d 100644 --- a/layouts/shortcodes/tab-view.html +++ b/layouts/shortcodes/tab-view.html @@ -1,3 +1,3 @@
    {{- .Inner -}} -
    \ No newline at end of file +
    diff --git a/layouts/shortcodes/tag-outlined.html b/layouts/shortcodes/tag-outlined.html index 6ecdff8c..6ef74e42 100644 --- a/layouts/shortcodes/tag-outlined.html +++ b/layouts/shortcodes/tag-outlined.html @@ -4,4 +4,5 @@ {{- $colors.Set "blue" "bg-blue-500 text-blue-500" -}} {{- $colors.Set "orange" "bg-orange-500 text-orange-500" -}} + {{- index .Params 1 | markdownify -}}