808 lines
22 KiB
HTML
808 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||
<meta
|
||
http-equiv="X-UA-Compatible"
|
||
content="ie=edge">
|
||
<meta
|
||
name="theme-color"
|
||
content="#fff"
|
||
id="theme-color">
|
||
<meta
|
||
name="description"
|
||
content="AKLabs">
|
||
<link
|
||
rel="icon"
|
||
href="/">
|
||
<title>Single Pane of Glass</title>
|
||
|
||
|
||
<meta
|
||
property="og:title"
|
||
content="Single Pane of Glass">
|
||
|
||
|
||
<meta
|
||
property="og:url"
|
||
content="https://aklabs.net/2026/01/04/Single-Pane-of-Glass/index.html">
|
||
|
||
|
||
<meta
|
||
property="og:img"
|
||
content="/images/akesterson.webp">
|
||
|
||
|
||
<meta
|
||
property="og:img"
|
||
content="There are too many ways of doing the same shit across too many different mediums and platforms">
|
||
|
||
|
||
<meta
|
||
property="og:type"
|
||
content="article">
|
||
<meta
|
||
property="og:article:published_time"
|
||
content="2026-01-04">
|
||
<meta
|
||
property="og:article:modified_time"
|
||
content="2026-01-10">
|
||
<meta
|
||
property="og:article:author"
|
||
content="Andrew Kesterson">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
|
||
<link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
|
||
<link rel="preload" href="/css/main.css" as="style" >
|
||
|
||
<link rel="modulepreload" href="//instant.page/5.1.0">
|
||
|
||
<link rel="stylesheet" href="/css/main.css">
|
||
|
||
<link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
|
||
|
||
<link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
|
||
|
||
<script>
|
||
function loadScript(url, cb) {
|
||
var script = document.createElement('script');
|
||
script.src = url;
|
||
if (cb) script.onload = cb;
|
||
script.async = true;
|
||
document.body.appendChild(script);
|
||
}
|
||
function loadCSS(href, data, attr) {
|
||
var sheet = document.createElement('link');
|
||
sheet.ref = 'stylesheet';
|
||
sheet.href = href;
|
||
sheet.dataset[data] = attr;
|
||
document.head.appendChild(sheet);
|
||
}
|
||
function changeCSS(cssFile, data, attr) {
|
||
var oldlink = document.querySelector(data);
|
||
var newlink = document.createElement("link");
|
||
newlink.setAttribute("rel", "stylesheet");
|
||
newlink.setAttribute("href", cssFile);
|
||
newlink.dataset.prism = attr;
|
||
document.head.replaceChild(newlink, oldlink);
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
function prismThemeChange() {
|
||
if(document.getElementById('theme-color').dataset.mode === 'dark') {
|
||
if(document.querySelector('[data-prism]')) {
|
||
changeCSS('/js/lib/prism/prism-tomorrow.min.css', '[data-prism]', 'prism-tomorrow');
|
||
} else {
|
||
loadCSS('/js/lib/prism/prism-tomorrow.min.css', 'prism', 'prism-tomorrow');
|
||
}
|
||
} else {
|
||
if(document.querySelector('[data-prism]')) {
|
||
changeCSS('/js/lib/prism/prism-defauult.min.css', '[data-prism]', 'prism-defauult');
|
||
} else {
|
||
loadCSS('/js/lib/prism/prism-defauult.min.css', 'prism', 'prism-defauult');
|
||
}
|
||
}
|
||
}
|
||
prismThemeChange()
|
||
</script>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/js/lib/prism/prism-line-numbers.min.css">
|
||
|
||
|
||
|
||
<script>
|
||
// control reverse button
|
||
var reverseDarkList = {
|
||
dark: 'light',
|
||
light: 'dark'
|
||
};
|
||
var themeColor = {
|
||
dark: '#1c1c1e',
|
||
light: '#fff'
|
||
}
|
||
// get the data of css prefers-color-scheme
|
||
var getCssMediaQuery = function() {
|
||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||
};
|
||
// reverse current darkmode setting function
|
||
var reverseDarkModeSetting = function() {
|
||
var setting = localStorage.getItem('user-color-scheme');
|
||
if(reverseDarkList[setting]) {
|
||
setting = reverseDarkList[setting];
|
||
} else if(setting === null) {
|
||
setting = reverseDarkList[getCssMediaQuery()];
|
||
} else {
|
||
return;
|
||
}
|
||
localStorage.setItem('user-color-scheme', setting);
|
||
return setting;
|
||
};
|
||
// apply current darkmode setting
|
||
</script>
|
||
|
||
<script>
|
||
var setDarkmode = function(mode) {
|
||
var setting = mode || localStorage.getItem('user-color-scheme');
|
||
if(setting === getCssMediaQuery()) {
|
||
document.documentElement.removeAttribute('data-user-color-scheme');
|
||
localStorage.removeItem('user-color-scheme');
|
||
document.getElementById('theme-color').content = themeColor[setting];
|
||
document.getElementById('theme-color').dataset.mode = setting;
|
||
prismThemeChange();
|
||
} else if(reverseDarkList[setting]) {
|
||
document.documentElement.setAttribute('data-user-color-scheme', setting);
|
||
document.getElementById('theme-color').content = themeColor[setting];
|
||
document.getElementById('theme-color').dataset.mode = setting;
|
||
prismThemeChange();
|
||
} else {
|
||
document.documentElement.removeAttribute('data-user-color-scheme');
|
||
localStorage.removeItem('user-color-scheme');
|
||
document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
|
||
document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
|
||
prismThemeChange();
|
||
}
|
||
};
|
||
setDarkmode();
|
||
</script>
|
||
|
||
|
||
|
||
<link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
|
||
<link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
|
||
|
||
|
||
<link rel="preload" href="/js/lib/lozad.min.js" as="script">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="generator" content="Hexo 6.0.0"><link rel="alternate" href="/atom.xml" title="AKLabs" type="application/atom+xml">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrapper">
|
||
|
||
<nav class="navbar">
|
||
<div class="navbar-logo">
|
||
<a class="navbar-logo-main" href="/">
|
||
|
||
<span class="navbar-logo-dsc">AKLabs</span>
|
||
</a>
|
||
</div>
|
||
<div class="navbar-menu">
|
||
|
||
<a
|
||
href="/now"
|
||
class="navbar-menu-item">
|
||
|
||
~/.plan
|
||
|
||
</a>
|
||
|
||
<a
|
||
href="/archives"
|
||
class="navbar-menu-item">
|
||
|
||
Archive
|
||
|
||
</a>
|
||
|
||
<a
|
||
href="/categories"
|
||
class="navbar-menu-item">
|
||
|
||
Categories
|
||
|
||
</a>
|
||
|
||
<a
|
||
href="/about"
|
||
class="navbar-menu-item">
|
||
|
||
About
|
||
|
||
</a>
|
||
|
||
<a
|
||
href="/consulting"
|
||
class="navbar-menu-item">
|
||
|
||
Consulting
|
||
|
||
</a>
|
||
|
||
<a
|
||
href="/contact"
|
||
class="navbar-menu-item">
|
||
|
||
Contact
|
||
|
||
</a>
|
||
|
||
<button
|
||
class="navbar-menu-item darknavbar navbar-menu-btn"
|
||
aria-label="Toggle dark mode"
|
||
id="dark">
|
||
<i class="iconfont icon-weather"></i>
|
||
</button>
|
||
<button
|
||
class="navbar-menu-item searchnavbar navbar-menu-btn"
|
||
aria-label="Toggle search"
|
||
id="search">
|
||
<!-- <i
|
||
class="iconfont icon-search"
|
||
style="font-size: 1.2rem; font-weight: 400;">
|
||
</i> -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
|
||
class="iconify iconify--ion" width="28" height="28" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
|
||
<path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
|
||
d="M256 80a176 176 0 1 0 176 176A176 176 0 0 0 256 80Z"></path>
|
||
<path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
|
||
d="M232 160a72 72 0 1 0 72 72a72 72 0 0 0-72-72Z"></path>
|
||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="28"
|
||
d="M283.64 283.64L336 336"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div
|
||
id="local-search"
|
||
style="display: none">
|
||
<input
|
||
class="navbar-menu-item"
|
||
id="search-input"
|
||
placeholder="请输入搜索内容..." />
|
||
<div id="search-content"></div>
|
||
</div>
|
||
|
||
<div class="section-wrap">
|
||
<div class="container">
|
||
<div class="columns">
|
||
<aside class="left-column">
|
||
|
||
<div class="card card-author">
|
||
|
||
<img
|
||
src="/images/akesterson.webp"
|
||
class="author-img"
|
||
width="88"
|
||
height="88"
|
||
alt="author avatar">
|
||
|
||
<p class="author-name">Andrew Kesterson</p>
|
||
<p class="author-description"><center><i>"Love God. Live Righteously. Die Well."</i> <br/> <br/> <a target="_blank" rel="noopener" href="https://github.com/akesterson">GitHub</a> || <a target="_blank" rel="noopener" href="https://www.linkedin.com/in/andrewkesterson/">LinkedIn</a> <br/> </center></p>
|
||
<div class="author-message">
|
||
<a
|
||
class="author-posts-count"
|
||
href="/archives">
|
||
<span>24</span>
|
||
<span>Posts</span>
|
||
</a>
|
||
<a
|
||
class="author-categories-count"
|
||
href="/categories">
|
||
<span>11</span>
|
||
<span>Categories</span>
|
||
</a>
|
||
<a
|
||
class="author-tags-count"
|
||
href="/tags">
|
||
<span>0</span>
|
||
<span>Tags</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="sticky-tablet">
|
||
|
||
|
||
<article class="display-when-two-columns spacer">
|
||
<div class="card card-content toc-card">
|
||
<div class="toc-header">
|
||
<i
|
||
class="iconfont icon-menu"
|
||
style="padding-right: 2px;">
|
||
</i>TOC
|
||
</div>
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text"></span></a></li></ol>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
<article class="card card-content categories-widget">
|
||
<div class="categories-card">
|
||
<div class="categories-header">
|
||
<i
|
||
class="iconfont icon-fenlei"
|
||
style="padding-right: 2px;">
|
||
</i>Categories
|
||
</div>
|
||
<div class="categories-list">
|
||
|
||
<a href="/categories/Books/">
|
||
<div class="categories-list-item">
|
||
Books
|
||
<span class="categories-list-item-badge">14</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Faith/">
|
||
<div class="categories-list-item">
|
||
Faith
|
||
<span class="categories-list-item-badge">6</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Outdoors/">
|
||
<div class="categories-list-item">
|
||
Outdoors
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Philosophy/">
|
||
<div class="categories-list-item">
|
||
Philosophy
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Leadership/">
|
||
<div class="categories-list-item">
|
||
Leadership
|
||
<span class="categories-list-item-badge">8</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/History/">
|
||
<div class="categories-list-item">
|
||
History
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Liberal-Education/">
|
||
<div class="categories-list-item">
|
||
Liberal-Education
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Technology/">
|
||
<div class="categories-list-item">
|
||
Technology
|
||
<span class="categories-list-item-badge">7</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Current-Events/">
|
||
<div class="categories-list-item">
|
||
Current-Events
|
||
<span class="categories-list-item-badge">2</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Technology/Current-Events/">
|
||
<div class="categories-list-item">
|
||
Technology/Current-Events
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="/categories/Technology/Current-Events/Philosophy/">
|
||
<div class="categories-list-item">
|
||
Technology/Current-Events/Philosophy
|
||
<span class="categories-list-item-badge">1</span>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card card-content tags-widget">
|
||
<div class="tags-card">
|
||
<div class="tags-header">
|
||
<i
|
||
class="iconfont icon-biaoqian"
|
||
style="padding-right: 2px;">
|
||
</i>hot tags
|
||
</div>
|
||
<div class="tags-list">
|
||
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
<main class="main-column">
|
||
|
||
<article class="card card-content">
|
||
<header>
|
||
<h1 class="post-title">
|
||
Single Pane of Glass
|
||
</h1>
|
||
</header>
|
||
<div class="post-meta post-show-meta">
|
||
<time datetime="2026-01-05T03:11:25.000Z">
|
||
<i
|
||
class="iconfont icon-calendar"
|
||
style="margin-right: 2px;">
|
||
</i>
|
||
<span>2026-01-04</span>
|
||
</time>
|
||
|
||
<span class="dot"></span>
|
||
|
||
<a
|
||
href="/categories/Technology/"
|
||
class="post-meta-link">
|
||
Technology
|
||
</a>
|
||
|
||
|
||
|
||
<span class="dot"></span>
|
||
<span>405 words</span>
|
||
|
||
</div>
|
||
|
||
</header>
|
||
<div
|
||
id="section"
|
||
class="post-content">
|
||
<h1 id=""><a href="#" class="headerlink" title=""></a></h1><p>On a given day, I have to manage:</p>
|
||
<ul>
|
||
<li>Three telephones that can ring</li>
|
||
<li>Two telephones that can manage text messages</li>
|
||
<li>Five separate chat programs</li>
|
||
<li>(At least) Three separate computers that I actually use (not even counting servers)</li>
|
||
<li>(At least) Three separate email accounts</li>
|
||
<li>(At least) Five separate task trackers</li>
|
||
<li>(At least) Three separate note apps (or physical notebooks with notes in them)</li>
|
||
</ul>
|
||
<p>How do I know what to do next? Let me check my task tracker. Oh wait… which one should I check first? Okay, I’ll check that one. But… what if I’m forgetting something important in the other four task trackers? I should go check. </p>
|
||
<center><img alt="Actual footage of me finding my next task" src="/images/dog-chasing-tail.gif"/></center>
|
||
|
||
<p>Hey this is an interesting news story that I’d like to forward to my wife. Let’s send it over to her quickly. Wait.. what’s the best way to send it? I found it on my laptop. She doesn’t use discord, or IRC, or steam chat, or mattermost. Her phone is an iphone, my PC is linux, so I can’t forward it from my laptop using iMessage. I could use google messenger, paired with my second android phone, to send it via google messages, but then she’s getting a text from my work number, which is confusing. I could email it, but that will take forever. I guess I’ll just send it over facebook messenger, and let Zuck see the meme.</p>
|
||
<center><img alt="Which mail carrier did that go through again?" src="/images/no-mail-charlie-brown.gif"/></center>
|
||
|
||
<p>Oh hey here’s a good idea I should write down for later. <em>later arrives</em> … Now where did I put that idea? I need to work on it some more. Did I put it in my Synology notes? In the notebook I keep in my breast pocket? In onenote? In my emacs org-mode that I am kinda half-assed using? In that random text file on my laptop that I forgot to sync somewhere else so I can reach it when I’m here at the coffee shop on my Android tablet? Well …. I guess that idea wasn’t that important anyway. I’m sure I’ll find it later.</p>
|
||
<center><img alt="O Note, Where Art Thou?" src="/images/i-disappear-sometimes.jpg"/></center>
|
||
|
||
<p>The fragmentation of the digital landscape, particularly my digital landscape, is absolutely out of control. My kingdom for a single tool for each of my central needs:</p>
|
||
<ul>
|
||
<li>Communication</li>
|
||
<li>Planning</li>
|
||
<li>Note taking</li>
|
||
</ul>
|
||
<p>I am officially on a quest to identify the proper single pane of glass for all of these items and to mercilessly eliminate the others from my life.</p>
|
||
<center><img alt="I'm a grown ass man" src="/images/too-old-for-this-shit.gif"/></center>
|
||
|
||
|
||
</div>
|
||
<div>
|
||
|
||
</div>
|
||
</article>
|
||
<div class="nav">
|
||
|
||
<div class="nav-item-prev">
|
||
<a
|
||
href="/2026/01/06/Smart-LEGO/"
|
||
class="nav-link">
|
||
<i class="iconfont icon-left nav-prev-icon"></i>
|
||
<div>
|
||
<div class="nav-label">Prev</div>
|
||
|
||
<div class="nav-title">Smart LEGO </div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<div class="nav-item-next">
|
||
<a
|
||
href="/2025/01/04/Socrates-got-a-raw-deal/"
|
||
class="nav-link">
|
||
<div>
|
||
<div class="nav-label">Next</div>
|
||
|
||
<div class="nav-title">Socrates got a raw deal </div>
|
||
|
||
</div>
|
||
<i class="iconfont icon-right nav-next-icon"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div
|
||
class="card card-content toc-card"
|
||
id="mobiletoc">
|
||
<div class="toc-header">
|
||
<i
|
||
class="iconfont icon-menu"
|
||
style="padding-right: 2px;">
|
||
</i>TOC
|
||
</div>
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text"></span></a></li></ol>
|
||
</div>
|
||
|
||
</main>
|
||
<aside class="right-column">
|
||
<div class="sticky-widescreen">
|
||
|
||
|
||
<article class="card card-content toc-card">
|
||
<div class="toc-header">
|
||
<i
|
||
class="iconfont icon-menu"
|
||
style="padding-right: 2px;">
|
||
</i>TOC
|
||
</div>
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text"></span></a></li></ol>
|
||
</article>
|
||
|
||
|
||
<article class="card card-content">
|
||
<div class="recent-posts-card">
|
||
<div class="recent-posts-header">
|
||
<i
|
||
class="iconfont icon-wenzhang_huaban"
|
||
style="padding-right: 2px;">
|
||
</i>Recent Posts
|
||
</div>
|
||
<div class="recent-posts-list">
|
||
|
||
<div class="recent-posts-item">
|
||
<div class="recent-posts-item-title">2026-01-23</div>
|
||
<a href="/2026/01/23/News-2026-Week-3/"><div class="recent-posts-item-content">News - 2026 - Week 3</div></a>
|
||
</div>
|
||
|
||
<div class="recent-posts-item">
|
||
<div class="recent-posts-item-title">2026-01-19</div>
|
||
<a href="/2026/01/19/This-Old-Tool-cmdarg/"><div class="recent-posts-item-content">This Old Tool : cmdarg</div></a>
|
||
</div>
|
||
|
||
<div class="recent-posts-item">
|
||
<div class="recent-posts-item-title">2026-01-16</div>
|
||
<a href="/2026/01/16/News-2026-Week-2/"><div class="recent-posts-item-content">News-2026-Week-2</div></a>
|
||
</div>
|
||
|
||
<div class="recent-posts-item">
|
||
<div class="recent-posts-item-title">2026-01-10</div>
|
||
<a href="/2026/01/10/libakerror/"><div class="recent-posts-item-content">libakerror</div></a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div>
|
||
<div class="footer-dsc">
|
||
<span>
|
||
Copyright ©
|
||
|
||
|
||
-
|
||
2026
|
||
|
||
</span>
|
||
|
||
<a
|
||
href="mailto:andrew@aklabs.net"
|
||
class="footer-link">
|
||
Andrew Kesterson
|
||
</a>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="footer-dsc">
|
||
|
||
Powered by
|
||
<a
|
||
href="https://hexo.io/"
|
||
class="footer-link"
|
||
target="_blank"
|
||
rel="nofollow noopener noreferrer">
|
||
Hexo
|
||
</a>
|
||
|
||
|
||
<span> | </span>
|
||
|
||
|
||
Theme -
|
||
<a
|
||
href="https://github.com/theme-kaze"
|
||
class="footer-link"
|
||
target="_blank"
|
||
rel="nofollow noopener noreferrer">
|
||
Kaze
|
||
</a>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</footer>
|
||
|
||
|
||
<a
|
||
role="button"
|
||
id="scrollbutton"
|
||
class="basebutton"
|
||
aria-label="回到顶部">
|
||
<i class="iconfont icon-arrowleft button-icon"></i>
|
||
</a>
|
||
|
||
<a
|
||
role="button"
|
||
id="menubutton"
|
||
aria-label="menu button"
|
||
class="basebutton">
|
||
<i class="iconfont icon-menu button-icon"></i>
|
||
</a>
|
||
<a
|
||
role="button"
|
||
id="popbutton"
|
||
class="basebutton"
|
||
aria-label="控制中心">
|
||
<i class="iconfont icon-expand button-icon"></i>
|
||
</a>
|
||
<a
|
||
role="button"
|
||
id="darkbutton"
|
||
class="basebutton darkwidget"
|
||
aria-label="夜色模式">
|
||
<i class="iconfont icon-weather button-icon"></i>
|
||
</a>
|
||
<a
|
||
role="button"
|
||
id="searchbutton"
|
||
class="basebutton searchwidget"
|
||
aria-label="搜索">
|
||
<i class="iconfont icon-search button-icon"></i>
|
||
</a>
|
||
|
||
|
||
|
||
<script>
|
||
var addImgLayout = function () {
|
||
var img = document.querySelectorAll('.post-content img')
|
||
var i
|
||
for (i = 0; i < img.length; i++) {
|
||
var wrapper = document.createElement('a')
|
||
wrapper.setAttribute('href', img[i].getAttribute('data-src'))
|
||
wrapper.setAttribute('aria-label', 'illustration')
|
||
wrapper.style.cssText =
|
||
'width: 100%; display: flex; justify-content: center;'
|
||
if (img[i].alt) wrapper.dataset.caption = img[i].alt
|
||
wrapper.dataset.nolink = true
|
||
img[i].before(wrapper)
|
||
wrapper.append(img[i])
|
||
var divWrap = document.createElement('div')
|
||
divWrap.classList.add('gallery')
|
||
wrapper.before(divWrap)
|
||
divWrap.append(wrapper)
|
||
}
|
||
baguetteBox.run('.gallery')
|
||
}
|
||
</script>
|
||
<script>
|
||
loadScript(
|
||
"/js/lib/lightbox/baguetteBox.min.js",
|
||
addImgLayout
|
||
)
|
||
</script>
|
||
|
||
|
||
|
||
<script src="/js/main.js"></script>
|
||
|
||
|
||
<script>
|
||
var addLazyload = function () {
|
||
var observer = lozad('.lozad', {
|
||
load: function (el) {
|
||
el.srcset = el.getAttribute('data-src')
|
||
},
|
||
loaded: function (el) {
|
||
el.classList.add('loaded')
|
||
},
|
||
})
|
||
observer.observe()
|
||
}
|
||
</script>
|
||
<script>
|
||
loadScript('/js/lib/lozad.min.js', addLazyload)
|
||
</script>
|
||
|
||
<script src="//instant.page/5.1.0" type="module"
|
||
integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
|
||
|
||
<script>
|
||
var googleAnalytics = function () {
|
||
window.dataLayer = window.dataLayer || []
|
||
function gtag() {
|
||
dataLayer.push(arguments)
|
||
}
|
||
gtag('js', new Date())
|
||
gtag('config', 'G-S3YLF516N6')
|
||
}
|
||
</script>
|
||
<script>
|
||
loadScript(
|
||
'https://www.googletagmanager.com/gtag/js?id=' +
|
||
'G-S3YLF516N6',
|
||
googleAnalytics
|
||
)
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|