Move from miccall theme to kaze

This commit is contained in:
2024-02-26 19:58:14 -05:00
parent 9de3279861
commit 32b0f8343d
205 changed files with 71658 additions and 9534 deletions

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>The Righteous Mind</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="The Righteous Mind">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2022/03/17/The-Righteous-Mind/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2022-03-17">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/therighteousmind-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >The Righteous Mind</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of The Righteous Mind" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/therighteousmind.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
The Righteous Mind
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2022-03-18T01:31:56.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2022-03-17</span>
</time>
<span class="dot"></span>
<a
href="/categories/Leadership/"
class="post-meta-link">
Leadership
</a>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<span class="dot"></span>
<span>308 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of The Righteous Mind" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/therighteousmind.jpg">
<p><strong>Rating: 6&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Righteous-Mind-Divided-Politics-Religion-ebook/dp/B0052FF7YM/ref=sr_1_1?crid=2B3A0KL8SMS31&keywords=the+righteous+mind+jonathan+haidt&qid=1707791214&s=digital-text&sprefix=the+righteous+mind+,digital-text,228&sr=1-1">click here</a><br><strong>TL;DR</strong> An examination of the unconscious habits, biases and cultural norms that guide our subconscious actions, the moral matrices we form and how we interface with each other across those boundaries.</p>
<hr>
@@ -183,30 +428,246 @@
<p>But the ideas of the elephant and the rider (or the horse and the rider for the cowboys among us), the moral brain being like a tongue with six taste buds, and the idea that we are 90% chimp (individualist) but 10% bee (hive mind) and that there is a “hive switch” in each of us that can be activated … Those are useful tools. </p>
<p>If you have time to kill, its a fine read, but I wouldnt go out of your way unless you just enjoy this kind of stuff.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2022/05/02/The-Hero-Code/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">The Hero Code </div>
</div>
</a>
</div>
</body>
</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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>The Hero Code</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="The Hero Code">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2022/05/02/The-Hero-Code/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2022-05-02">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/theherocode-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >The Hero Code</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of The Hero Code" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/theherocode.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
The Hero Code
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2022-05-03T01:58:12.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2022-05-02</span>
</time>
<span class="dot"></span>
<a
href="/categories/Leadership/"
class="post-meta-link">
Leadership
</a>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<span class="dot"></span>
<span>139 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of The Hero Code" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/theherocode.jpg">
<p><strong>Rating: 8&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Hero-Code-Lessons-Learned-Lives/dp/B08WRGWVPL/ref=sr_1_1?crid=OTU4GDSYKS4Q&keywords=mcraven+the+hero+code&qid=1707792802&s=books&sprefix=mcraven+the+hero+,stripbooks,640&sr=1-1">click here</a><br><strong>TL;DR</strong> A code of conduct and values for living like a heroic warrior.</p>
<hr>
@@ -181,30 +426,260 @@
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/yaQZFhrW0fU?si=YstvDK1rd9E3-mn9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</center>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2022/05/04/American-Prison/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">American Prison </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2022/03/17/The-Righteous-Mind/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">The Righteous Mind </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,417 @@
<!DOCTYPE HTML>
<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>American Prison</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="American Prison">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2022/05/04/American-Prison/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2022-05-04">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/americanprison-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >American Prison</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of American Prison" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/americanprison.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
American Prison
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2022-05-05T01:42:34.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2022-05-04</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<span class="dot"></span>
<span>484 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of American Prison" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/americanprison.jpg">
<p><strong>Rating: 8&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/American-Prison-Reporters-Undercover-Punishment/dp/0735223580">click here</a><br><strong>TL;DR</strong> The realities of life in prison, as told from a reporter who went undercover as a prison guard, what he learned from the experience, how it changed him, the kinds of people he met, the realization that the guards are in prison just as much as the inmates, and the great lengths to which the prison system went to try and silence his report.</p>
<hr>
@@ -181,30 +420,260 @@
<p>It is not a short book, and it is not for the squeamish - it contains graphic depictions of many kinds of violence and sexual assault. (Though, to be honest, it is much more tame than other prison accounts.) But if you have time and want to better understand the mess we are in, I think it is a useful book and I do recommend it.</p>
<p>It is also a good inspiration for prayer. Pray for those who are incarcerated; for those who stand guard over them; for those in charge who perpetuate this system; and for those of us who stand by and watch its effects. Pray for all of it. Because it is only Gods love that can set our hearts right, help us to properly balance justice and mercy, and help us find the way out of this mess</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2022/05/19/Jesus-Outside-the-Lines/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Jesus Outside the Lines </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2022/05/02/The-Hero-Code/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">The Hero Code </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,207 +1,682 @@
<!DOCTYPE HTML>
<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>Jesus Outside the Lines</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Jesus Outside the Lines">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2022/05/19/Jesus-Outside-the-Lines/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2022-05-19">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/jesusoutsidethelines-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Jesus Outside the Lines</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of Jesus Outside the Lines" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/jesusoutsidethelines.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Jesus Outside the Lines
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2022-05-20T01:51:09.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2022-05-19</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>179 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of Jesus Outside the Lines" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/jesusoutsidethelines.jpg">
<p><strong>Rating: 8&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Jesus-Outside-Lines-Forward-Taking/dp/1496400933/ref=sxts_entity_rec_bsx_s_def_r00_t_aufl?content-id=amzn1.sym.a36c3969-f821-4d5b-a8e8-be129cf4aa4a:amzn1.sym.a36c3969-f821-4d5b-a8e8-be129cf4aa4a&crid=QCGKVXDV3YFG&cv_ct_cx=jesus+outside+the+lines+scott+sauls&keywords=jesus+outside+the+lines+scott+sauls&pd_rd_i=1496400933&pd_rd_r=8d93ba21-d2ef-4da1-a8f6-0ba487369ee3&pd_rd_w=O1ERH&pd_rd_wg=tyJqr&pf_rd_p=a36c3969-f821-4d5b-a8e8-be129cf4aa4a&pf_rd_r=4Y22JFHHPP5TGCRP1WK9&qid=1707792343&s=books&sprefix=jesus+outside+the+lines+,stripbooks,235&sr=1-2-ef9bfdb7-b507-43a0-b887-27e2a8414df0">click here</a><br><strong>TL;DR</strong> A comparison between the modern Christian and the biblical Pharisees that lays bare some uncomfortable facts.</p>
<hr>
<p>Just finished this book, and I think I will go back to it again later. The central idea is that modern Christians have become far too much like the old Pharisees, we spend too much time judging and separating ourselves from the ones that we are supposed to be loving and fellowshipping with. The modern Christian is compared to Jesus, who is our ultimate example, and found lacking, in many cases found to have completely missed the point. Much like the last book I reviewed, Radical by David Platt, the book calls us to make imitating Christ our first and most important habit; in the company we keep, how we love each other, how we relate to God, and how we evangelize. If you love Jesus and are frustrated by so many of the words and actions or lack thereof by those who take His name in vain, this book will be a motivating refreshment.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2022/10/15/Live-Not-By-Lies/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Live Not By Lies </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2022/05/04/American-Prison/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">American Prison </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>Live Not By Lies</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Live Not By Lies">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2022/10/15/Live-Not-By-Lies/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2022-10-15">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/livenotbylies-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Live Not By Lies</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of Live Not By Lies" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/livenotbylies.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Live Not By Lies
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2022-10-16T02:11:25.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2022-10-15</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>336 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of Live Not By Lies" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/livenotbylies.jpg">
<p><strong>Rating: 10&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Live-Not-Lies-Christian-Dissidents/dp/0593087399/ref=sr_1_1?crid=1NUG0JTQIY27X&keywords=live+not+by+lies&qid=1707793590&sprefix=live+not+by+li,aps,334&sr=8-1">click here</a><br><strong>TL;DR</strong> A startling wake-up call to, and call-to-arms for, Western Christians living in supposedly “free” nations which are actually coming under the grip of soft totalitarianism; a wolf in sheeps clothing that is successfully compared to and viewed through the lens of the worst “hard” totalitarian regimes of the 20th century.</p>
<hr>
@@ -181,30 +426,260 @@
<p>It talks about hard totalitarianism versus soft totalitarianism, explains that the modern West is suffering from soft totalitarianism, and explains how the consequences will be no less dire if it is not resisted. It talks about courage, faith, love, service, and justice in the face of great personal cost and the great liberation that comes from loving and following Christ in the darkest times of your life and in the most cruel affairs of the world. </p>
<p>This one should have a spot on the bookshelf of anyone who rejects totalitarian rule, and especially those who are faithful.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/09/12/Christianity-First-3000-Years/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Christianity: The First 3000 Years </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2022/05/19/Jesus-Outside-the-Lines/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">Jesus Outside the Lines </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>Christianity: The First 3000 Years</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Christianity: The First 3000 Years">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/09/12/Christianity-First-3000-Years/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-09-12">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/christianity3000years-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Christianity: The First 3000 Years</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of Christianity: The First 3000 Years" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/christianity3000years.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Christianity: The First 3000 Years
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-09-13T01:20:20.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-09-12</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>430 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of Christianity: The First 3000 Years" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/christianity3000years.jpg">
<p><strong>Rating: 8&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Christianity-First-Three-Thousand-Years-ebook/dp/B0030CVQ5I/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=1707790560&sr=1-1">click here</a><br><strong>TL;DR</strong> A complete (if highly opinionated) coverage of the first 3000 years of the history of Christianity, including the major historical events, points of disagreement amongst the elements of the church, and the interplay between the Church and the rest of society. This is a record not only of the Church, but of Western society - the two are, as you understand once reading this volume, inseparable.</p>
<hr>
@@ -182,30 +427,260 @@
<p>Overall if you find a copy of this Id snatch it up. It isnt complete (and, after listening to it, I understand why - the history of the western world IS the history of the church, and vice versa, so you cant fit it all into one volume) - but it is <em>sufficiently complete</em> to form a basis of understanding of major events, key players, repeating themes and conflicts in the history of the faith that has literally shaped the history of the world for the last two thousand years.</p>
<p>8&#x2F;10, would recommend. But beware - this is a marathon, not a sprint.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/09/24/How-Should-We-Then-Live/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">How Should We Then Live </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2022/10/15/Live-Not-By-Lies/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">Live Not By Lies </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>How Should We Then Live</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="How Should We Then Live">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/09/24/How-Should-We-Then-Live/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-09-24">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/howshouldwethenlive-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >How Should We Then Live</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of How Should We Then Live" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/howshouldwethenlive.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
How Should We Then Live
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-09-25T00:58:40.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-09-24</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>1k words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of How Should We Then Live" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/howshouldwethenlive.jpg">
<p><strong>Rating: 6&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Should-Then-Live-LAbri-Anniversary/dp/1581345364/ref=asc_df_1581345364/?tag=hyprod-20&linkCode=df0&hvadid=312115051380&hvpos=&hvnetw=g&hvrand=3191160308367114299&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9011415&hvtargid=pla-488039960134&psc=1&mcid=192c8ff5f5c8346db0b01d2a0a62e5ea&gclid=Cj0KCQiAoKeuBhCoARIsAB4WxtciVfsYCA29xi0dIRTEl4gIIF5wI0iggrdqPzuuyv1LOnHoWFYifNcaAp4UEALw_wcB">click here</a><br><strong>TL;DR</strong> A summary of the rise of Western civilization and philosophy, from the time of the Greeks through the modern era, with an attempt to explain how the change in our moral character has influenced the rise and fall of nations, and lead to our current predicament.</p>
<hr>
@@ -183,30 +428,260 @@
<p>The frustrating thing, to me, is that the author never answers the title of the book: How shall we then live? He does answer it, in a certain way, but it is (to me) altogether unsatisfactory. I was hoping to see some concrete examples of how to reject modernity and adhere better to the tenets of the Christian faith in the modern world, but all we get is “Accept the Bible as the ultimate source of truth and live the way Jesus said”. And really, “Accept the Bible as the ultimate source of truth” is the bigger thrust. I mean … The author isnt wrong. But did we really need to read 12 chapters to be told that? Perhaps someone who is less entrenched in their faith will have a revelation, and this will be useful to them, but for me this was kind of a “Well, duh” moment, without a lot of additional substance I was looking for. As the author is fond of saying throughout the book, “the particulars” were not well served.</p>
<p>Overall its a decent read. If you have a chance to pick it up from your library, give it a go, but I doubt Id pay cover price for it.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/09/28/Bill-Heavey-Jerkey-What-Did-I-Just-Eat/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">If You Didn&#39;t Bring Jerky, What Did I Just Eat? </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/09/12/Christianity-First-3000-Years/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">Christianity: The First 3000 Years </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>If You Didn't Bring Jerky, What Did I Just Eat?</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="If You Didn&#39;t Bring Jerky, What Did I Just Eat?">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/09/28/Bill-Heavey-Jerkey-What-Did-I-Just-Eat/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-09-28">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/billheaveywhatdidijusteat-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >If You Didn&#39;t Bring Jerky, What Did I Just Eat?</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of If You Didn't Bring Jerky, What Did I Just Eat?" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/billheaveywhatdidijusteat.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
If You Didn&#39;t Bring Jerky, What Did I Just Eat?
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-09-29T00:34:33.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-09-28</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Outdoors/"
class="post-meta-link">
Outdoors
</a>
<span class="dot"></span>
<span>367 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of If You Didn't Bring Jerky, What Did I Just Eat?" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/billheaveywhatdidijusteat.jpg">
<p><strong>Rating: 10&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Didnt-Bring-Jerky-What-Just/dp/0871139731/ref=tmm_hrd_swatch_0?_encoding=UTF8&qid=&sr=">click here</a><br><strong>TL;DR</strong> A delightful collection of stories from an outdoorsman for the rest of us: not incredibly successful, not incredibly smart, but oh so incredibly human, and so in love with the majesty of Gods outdoor creation.</p>
<hr>
@@ -181,30 +426,260 @@
<p>Heavey is a fantastic storyteller, an everyman who invites the average listener to take part in the stories - most of us can sympathize with being average (at best) hunters, average (at best) fisherman, average (at best) fathers and husbands, but Heavey is such a lovabale galoot that he inspires and gives the rest of us hope. But the introduction to the book contains a warning - his stories can run the gamut from funny, to heartwarming, to tragic, and Heaveys storytelling talents allow him to swing between moods quickly, without warning, taking you along for the ride. More than once, I would go quickly from laughing to wondering who in the world was cutting all these onions in my truck?!</p>
<p>If it wasnt jerky, I dont know what it was - but I liked it, and Im going to go get some more of it. 10&#x2F;10, if youre an outdoorsman, a father, or know someone who is, this one is worth every penny. Im probably going to buy a print copy and circulate it amongst my close male friends.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/10/10/The-Cost-of-Discipleship/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">The Cost of Discipleship </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/09/24/How-Should-We-Then-Live/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">How Should We Then Live </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>The Cost of Discipleship</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="The Cost of Discipleship">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/10/10/The-Cost-of-Discipleship/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-10-10">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/costofdiscipleship-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >The Cost of Discipleship</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of The Cost of Discipleship" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/costofdiscipleship.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
The Cost of Discipleship
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-10-11T00:23:33.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-10-10</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>510 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of The Cost of Discipleship" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/costofdiscipleship.jpg">
<p><strong>Rating: 7&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Cost-Discipleship-Dietrich-Bonhoeffer/dp/0684815001">click here</a><br><strong>TL;DR</strong> An honest (and, perhaps, frightening) look at the true cost of following Jesus Christ in your life, and how far you must be willing to go in order to claim Christ as Lord.</p>
<hr>
@@ -182,30 +427,260 @@
<p>Its a path few can walk. I openly admit I fail in it daily. I look around me and consider all the things I cherish too dearly to do some of the crazier things I can imagine doing as a Chrisitian; my family which I love, my home where I find comfort and constance, my job where I find the means to sustain myself and do good works in the name of God. My various worldly possessions with their utilitarian purposes so essential for daily life. I say that God will provide, that he will clothe His believers more gloriously than the lilies of the field, that He will feed us our fill daily if we rely on Him, and yet there are so many things that I do not do. And I think it is because I, like many other Christians, are not willing to pay the full cost of discipleship.</p>
<p>Dietrich Bonhoeffer paid the ultimate price for his beliefs and his stand against earthly tyranny. He knew the cost of discipleship. But in a way, it is easier to die for your faith than to live for it. You die, once, and youre done. Im by no means discounting his faith or his sacrifice. What Im saying is that its easy for us to idolize the one-time glorious sacrifice of the martyr while being unwilling to daily crucify our flesh, pick up our cross, and follow Him wherever He may lead. And that is the cost of discipleship.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/11/05/Copper-Sun/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Copper Sun </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/09/28/Bill-Heavey-Jerkey-What-Did-I-Just-Eat/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">If You Didn&#39;t Bring Jerky, What Did I Just Eat? </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,417 @@
<!DOCTYPE HTML>
<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>Copper Sun</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Copper Sun">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/11/05/Copper-Sun/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-11-05">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/coppersun-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Copper Sun</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<img alt="Image of Copper Sun" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/coppersun.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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>
</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Copper Sun
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-11-06T01:01:51.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-11-05</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<span class="dot"></span>
<span>554 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<img alt="Image of Copper Sun" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/coppersun.jpg">
<p><strong>Rating: 7&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Copper-Sun-Sharon-M-Draper/dp/1416953485">click here</a><br><strong>TL;DR</strong> A story of slavery and freedom, love and loss, black and white, stereotype and surprise, spanning from the African bush to the American south.</p>
<hr>
@@ -181,30 +420,260 @@
<p>Copper Sun definitely uses plenty of stereotypes, but I dont think they were egregious or damaging to anyone or to the story. Like I say, stereotypes exist for a reason. But even the stereotyped characters had some good depth to them, and one of the antagonists, Master Clay, was a surprisingly sympathetic character at times - but only a few.</p>
<p>Overall Id say this one is a 7&#x2F;10. If you have time and it pops up, give it a read or a listen. It might make you ask some new questions, or give you some new perspective. It may open old wounds or bring back bad memories, too, so keep that in mind. But Id say this story is worth it.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">US Catholic Catechism for Adults </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/10/10/The-Cost-of-Discipleship/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">The Cost of Discipleship </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>
</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>
</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>US Catholic Catechism for Adults</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="US Catholic Catechism for Adults">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2023/12/23/United-States-Catholic-Catechism-for-Adults/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2023-12-23">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/uscatechismforadults-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >US Catholic Catechism for Adults</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<h1 id="United-States-Catholic-Catechism-for-Adults"><a href="#United-States-Catholic-Catechism-for-Adults" class="headerlink" title="United States Catholic Catechism for Adults"></a>United States Catholic Catechism for Adults</h1><img alt="Image of United States Catholic Catechism for Adults" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/uscatechismforadults.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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" href="#United-States-Catholic-Catechism-for-Adults"><span class="toc-text">United States Catholic Catechism for Adults</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
US Catholic Catechism for Adults
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2023-12-23T22:03:44.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2023-12-23</span>
</time>
<span class="dot"></span>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<a
href="/categories/Faith/"
class="post-meta-link">
Faith
</a>
<span class="dot"></span>
<span>933 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<h1 id="United-States-Catholic-Catechism-for-Adults"><a href="#United-States-Catholic-Catechism-for-Adults" class="headerlink" title="United States Catholic Catechism for Adults"></a>United States Catholic Catechism for Adults</h1><img alt="Image of United States Catholic Catechism for Adults" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/uscatechismforadults.jpg">
<p><strong>Rating: 10&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/United-States-Catholic-Catechism-Adults/dp/B003ATP9Z4/ref=sr_1_4?crid=38DB6CAZ2E34V&keywords=united+states+catholic+catechism+for+adults,+english+updated+edition&qid=1707775572&s=books&sprefix=united+states+catholic+c,stripbooks,162&sr=1-4">click here</a><br><strong>TL;DR:</strong> A comprehensible and complete examination of the core doctrines and dogmas of the Catholic church in the United States.</p>
<hr>
@@ -198,30 +443,260 @@
<p>If youre a protestant, you need to pick up the Catechism and read it. You need to read the early church fathers. You need to understand the traditions of your brothers and sisters in Christ and come to the table with them. Because Christ founded one church, and its up to all of us to seek to reunite with the other parts of the body. Christ is calling us to unity, not to division, and we will never get there if we dont stop treating each other like heathens and heretics.</p>
<p>What Catholics actually believe is not some secret. You can go to the bookstore and buy it. Its right next to the bible. Its even in an audiobook. And its only 19 hours long. As protestants, we have no excuse for being ignorant of what our Catholic brothers and sisters believe.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2024/01/29/Simon-Sinek-Start-with-Why/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Start with Why </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/11/05/Copper-Sun/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">Copper Sun </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" href="#United-States-Catholic-Catechism-for-Adults"><span class="toc-text">United States Catholic Catechism for Adults</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" href="#United-States-Catholic-Catechism-for-Adults"><span class="toc-text">United States Catholic Catechism for Adults</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,423 @@
<!DOCTYPE HTML>
<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>Start with Why</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Start with Why">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2024/01/29/Simon-Sinek-Start-with-Why/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2024-01-29">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/books/startwithwhy-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Start with Why</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<h1 id="Start-with-Why"><a href="#Start-with-Why" class="headerlink" title="Start with Why"></a>Start with Why</h1><img alt="Image of Start with Why by Simon Sinek" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/startwithwhy.jpg">
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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" href="#Start-with-Why"><span class="toc-text">Start with Why</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Start with Why
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2024-01-29T21:35:48.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2024-01-29</span>
</time>
<span class="dot"></span>
<a
href="/categories/Leadership/"
class="post-meta-link">
Leadership
</a>
<a
href="/categories/Books/"
class="post-meta-link">
Books
</a>
<span class="dot"></span>
<span>799 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<h1 id="Start-with-Why"><a href="#Start-with-Why" class="headerlink" title="Start with Why"></a>Start with Why</h1><img alt="Image of Start with Why by Simon Sinek" style="float: left; padding: 20px 20px 20px 20px;" src="/images/books/startwithwhy.jpg">
<p><strong>Rating: 10&#x2F;10</strong><br><strong>Amazon Link:</strong> <a target="_blank" rel="noopener" href="https://www.amazon.com/Start-Why-Leaders-Inspire-Everyone/dp/1591846447/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1707775201&sr=1-1">click here</a><br><strong>TL;DR</strong> : An exploration of different types of leaders (“how” types vs “why” types), how the two motivate differently, which ones tend to be the most effective at motivating their organizations and their customers, and how the two need each other. It is also an exploration of why, for you as a person, it is so important to understand not just what you do, but why. You can get pretty much the same information from <a target="_blank" rel="noopener" href="https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action?language=en">Sineks Ted talk</a> - which is the whole point, hes trying desperately to give this information away, and the book is just one place to find it. The TED talk is embedded at the bottom of the page.</p>
<hr>
@@ -184,30 +429,260 @@
<p>Start with Why.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4?si=49m1TxsH7DUzJtZS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
<div class="nav-item-prev">
<a
href="/2024/02/09/expectations/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-title">Setting Expectations </div>
</div>
</a>
</div>
</body>
<div class="nav-item-next">
<a
href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">US Catholic Catechism for Adults </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" href="#Start-with-Why"><span class="toc-text">Start with Why</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" href="#Start-with-Why"><span class="toc-text">Start with Why</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

View File

@@ -1,178 +1,417 @@
<!DOCTYPE HTML>
<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>Setting Expectations</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Setting Expectations">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/2024/02/09/expectations/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<meta
property="og:type"
content="article">
<meta
property="og:article:published_time"
content="2024-02-09">
<meta
property="og:article:modified_time"
content="2024-02-12">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body>
<div class="wrapper">
<!-- Layouts -->
<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="/"
class="navbar-menu-item">
<!-- 代码渲染 -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in">
<!-- Intro 头部显示 s -->
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
Home
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
</a>
<!-- archives 归档 -->
<a
href="/archives"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Archive
</a>
<!-- Pages 自定义 -->
<a
href="/tags"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Tags
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
About
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/links"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
Friends
</ul>
</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="main" >
<!--
<div class ="post_page_title_img" style="height: 25rem;background-image: url(/images/dilbert-expectations-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
<a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >Setting Expectations</h2></a>
</div>
-->
<!-- Post -->
<div class="typo" style="padding: 3rem;">
<h1 id="“My-expectation-is-…”"><a href="#“My-expectation-is-…”" class="headerlink" title="“My expectation is …”"></a>“My expectation is …”</h1><p><img src="/images/dilbert-expectations.jpg" alt="dilbert comic about expectations"></p>
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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" href="#%E2%80%9CMy-expectation-is-%E2%80%A6%E2%80%9D"><span class="toc-text">“My expectation is …”</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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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">
Setting Expectations
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2024-02-09T13:30:30.000Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2024-02-09</span>
</time>
<span class="dot"></span>
<a
href="/categories/Leadership/"
class="post-meta-link">
Leadership
</a>
<span class="dot"></span>
<span>1.1k words</span>
</div>
</header>
<div
id="section"
class="post-content">
<h1 id="“My-expectation-is-…”"><a href="#“My-expectation-is-…”" class="headerlink" title="“My expectation is …”"></a>“My expectation is …”</h1><p><img src="/images/dilbert-expectations.jpg" alt="dilbert comic about expectations"></p>
<p>Imagine that you are playing a game, but you dont know the rules; you have to pick it up as you go along by watching others, and then figuring out how to apply their experience to your own performance. You will make many mistakes, you will perform poorly, and you may feel personally embarassed. Now imagine that you are playing this game with people who are supposed to help you, and you know that they know the rules, but for whatever reason, they arent telling you the rules. You would likely feel dejected, unvalued, you may feel resentment at your unfair treatment, and would likely not have any desire to stick around and keep playing the game. Now imagine an entire team being treated in this way. How could such a team ever survive, let alone win?</p>
<p>We are playing this game with our employees; it is a high stakes game where our entire shared future is the prize for success, and the cost for failure. We ask the players on the team to give us 100% of their potential - their blood, sweat and tears. And in return, we promise to explain the rules, help guide and develop their performance against those rules, and inspire them to continue giving that 100% when it gets even harder than it already is. We must not neglect the bedrock work of explaining the rules of the business, of our department, of our discipline, of our imposed goals from our own leadership, and of our own personal leadership style. And we, as leaders, have to boil these down into consumable sets of expectations which can be held in the minds of our team members as they go about their daily duties.</p>
<p>One of the first promises I make to any team Im leading is that I will always strive to set fair, simple, clear expectations for them. And I will communicate clearly when I do it. I tell them that I will always use the same language when Im doing it, so there is never any possibility for ambiguity. When I speak to my team, and I say, “My expectation is…” - everyone perks up. Because they know that I am not giving an opinion, or an off the cuff remark, or an emotional response to something that just happened. I am articulating a rule of the game we are playing together; I am explaining a strongly held position that represents the shared values of the business we all support, the strategic goals of my own leadership, and the culture of our organization, by which everyones future performance (including my own) will be judged.</p>
@@ -181,30 +420,246 @@
<p>That is not to say that we should be casual with declaring our expectations and taking strong positions. We must not allow ourselves to be subjected to the whims of emotion, defining new rules to the game just because we lost; this is childish behavior, and we should have put away childish behavior by this point in our lives. We must carefully and thoughtfully analyze the results of our actions, and the effects of those things which happen to us through no apparent fault of our own. When we realize that we have failed, and that one of our prior expectations has proven inadequate or incorrect, we must never try to “protect ourselves” with a new resolution; rather we must inspect what we expected with an eye towards how we can better align our future actions with our shared values, and how we can better achieve our stated goals. We must be less concerned with our personal feelings and reputation than we are with the shared health of the organization, and the success of our shared goal; we must be willing to sacrifice our own ego for the success of our team. When we approach things this way, understanding that the actual goal of our expectations are to support and bring forth the best in our team, rather than in protecting ourselves, we will naturally be drawn to carefully selected sets of fair, simple, clear expectations that we can fully support.</p>
<p>My expectation is that, as leaders, we will take the time to thoughtfully set fair, simple, clear expectations for those who commit their blood, sweat, and tears to us in this shared game we are all playing together. If you are a leader, and you are not doing this, I admonish you to examine why, and to put this into practice immediately. If you feel your leaders have not set fair, simple, clear expectations for you, I encourage you to approach them and ask them to articulate their expectations for you. Because unless we all know the rules of the game, we cant possibly expect to win the game.</p>
</div>
</div>
<div>
<!-- Post Comments -->
<!--
</div>
</article>
<div class="nav">
-->
</div>
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<div class="nav-item-next">
<a
href="/2024/01/29/Simon-Sinek-Start-with-Why/"
class="nav-link">
<div>
<div class="nav-label">Next</div>
<div class="nav-title">Start with Why </div>
</div>
<i class="iconfont icon-right nav-next-icon"></i>
</a>
</div>
</body>
</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" href="#%E2%80%9CMy-expectation-is-%E2%80%A6%E2%80%9D"><span class="toc-text">“My expectation is …”</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" href="#%E2%80%9CMy-expectation-is-%E2%80%A6%E2%80%9D"><span class="toc-text">“My expectation is …”</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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</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 ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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>
</body>
</html>

806
about/index.html Normal file
View File

@@ -0,0 +1,806 @@
<!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>About</title>
<meta
property="og:title"
content="About">
<meta
property="og:url"
content="https://www.aklabs.net/about/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<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">
<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>
// 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;
} 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;
} 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();
}
};
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"></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="/"
class="navbar-menu-item">
Home
</a>
<a
href="/archives"
class="navbar-menu-item">
Archive
</a>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
<a
href="/about"
class="navbar-menu-item">
About
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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="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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<article class="card card-content">
<header>
<h1 class="post-title">
About
</h1>
</header>
<div class="post-meta post-show-meta">
<time datetime="2024-02-27T00:43:47.243Z">
<i
class="iconfont icon-calendar"
style="margin-right: 2px;">
</i>
<span>2024-02-26</span>
</time>
<span class="dot"></span>
<span>827 words</span>
</div>
</header>
<div
id="section"
class="post-content">
<h2 id="Family"><a href="#Family" class="headerlink" title="Family"></a>Family</h2><p>I grew up in the Ozark mountains of southwestern Missouri. Born to hard working middle class parents from an agricultural background, I am the youngest of six sons.</p>
<center><img alt="Andrew and His Extended Family" width=50% src="/images/brothersandfamily.jpg"><img alt="Andrew and His Brothers" width=50% src="/images/brothersdisco.JPG"></center>
<p>I met my wife Cameron online in the mid 1990s, when the internet was a very different place. (Alas - the internet we knew back then is dead and buried - but I digress.) After having met Cameron, I moved to Georgia to live with her in 2002. Cameron made me the happiest man ever by agreeing to marry me in February 2004. Together we have bounced around the continental United States several times, and currently live in Georgia, near Camerons family. Cameron and I have three children: Annastasia (2005), Gabriel (2008), and Catherine (2010).</p>
<center><img alt="Andrew and His Family" width=50% src="/images/lineupfamily.jpg"><img alt="Andrew's wife Cameron" width=50% src="/images/cameron.jpg">
</center>
<p>I have dedicated my life to the service of my family, and put them first at all times. Only my dedication to my God can come before them.</p>
<h2 id="Technology-Leadership"><a href="#Technology-Leadership" class="headerlink" title="Technology Leadership"></a>Technology Leadership</h2><h1 id="Infrastructure-amp-Cloud-Engineering-Manager"><a href="#Infrastructure-amp-Cloud-Engineering-Manager" class="headerlink" title="Infrastructure &amp; Cloud Engineering Manager"></a>Infrastructure &amp; Cloud Engineering Manager</h1><p><em>Wiser Solutions, Inc.</em> <em>4&#x2F;20222&#x2F;2024</em></p>
<p>Directed engineering of Cloud and hybrid infrastructures to align with business goals and empower teams across enterprise to achieve growth and scale objectives. Built relationships with colleagues and leaders, leveraging relationships to guide decision-making, strategic planning, and vision for future initiatives. Championed automation to streamline processes and engage teams in higher-level projects. Managed performance from a fully remote environment.</p>
<h1 id="IT-Manager"><a href="#IT-Manager" class="headerlink" title="IT Manager"></a>IT Manager</h1><p><em>Nintendo of America</em> <em>2&#x2F;20144&#x2F;2022</em></p>
<p>Managed complexity of multiple functions spanning reliability engineering, IT operations, hosting, build &amp; delivery functions, and enterprise IT for Nintendo of America and Nintendo Technology Development. Monitored performance of multimillion-dollar portfolio encompassing dozens of platforms, including eCommerce solutions, internal tools, B2B integrations, and other key systems. Defined engineering standards, including creating measures and metrics for assessing designs, products, and solutions in terms of alignment with said standards. Collaborated with global Nintendo on strategic planning and process development. Served as part of Product Support Team for critical platforms and products.</p>
<h1 id="Automation-Team-Manager"><a href="#Automation-Team-Manager" class="headerlink" title="Automation Team Manager"></a>Automation Team Manager</h1><p><em>Vonage Business Solutions</em> <em>4&#x2F;20132&#x2F;2014</em></p>
<p>Oversaw team of Automation Architects and provided ongoing leadership, mentoring, and performance management to ensure performance goals were met. Managed critical technical projects related to automation. Developed tools in Bash and Puppet for deployment across diverse environments, as well as wrote automated build and test frameworks in Ruby, Puppet, and Jenkins. Gathered requirements from other teams (System Administration, Product Development, and more) and acted as liaison between teams to create bridges across projects and processes. Provided ongoing troubleshooting.</p>
<h1 id="DevOps-Team-Leader"><a href="#DevOps-Team-Leader" class="headerlink" title="DevOps Team Leader"></a>DevOps Team Leader</h1><p><em>Total Systems, Inc</em> <em>2&#x2F;20114&#x2F;2013</em></p>
<p>Led DevOps team responsible for creation of automation tools and other technologies, improving operating capacity and processes such as audits through tools. Championed DevOps practices to guide integration across enterprise.</p>
<h1 id="Miscellanious"><a href="#Miscellanious" class="headerlink" title="Miscellanious"></a>Miscellanious</h1><p>Also served as Software Engineer for Global Net Access (leading software development for major colocation datacenter) and Software Engineer&#x2F;Network Administrator at Logical Solutions (managing 300 remote sites).</p>
<p>For more information about my professional background, current workplace, open positions, or to approach me with an opportunity, please see <a target="_blank" rel="noopener" href="https://www.linkedin.com/in/andrewkesterson/">My LinkedIn Profile</a>.</p>
<h2 id="Civil-Service"><a href="#Civil-Service" class="headerlink" title="Civil Service"></a>Civil Service</h2><h1 id="Infantry-Soldier"><a href="#Infantry-Soldier" class="headerlink" title="Infantry Soldier"></a>Infantry Soldier</h1><p><em><a target="_blank" rel="noopener" href="https://www.gasdf.com/">Georgia State Defense Force</a></em> <em>04&#x2F;2022-06&#x2F;2023</em></p>
<ul>
<li>Swore oath of enlistment February 2022 (for the second time - first time in 2000)</li>
<li>Completed IET July 2022, graduated with honors</li>
<li>Served in the elite <a target="_blank" rel="noopener" href="https://paonews.net/units-map/opfor/">OPFOR Battalion</a>, simulating enemy forces to train Georgia national guard troops. Serving as an infantry soldier and as the acting S4, managing signal (radio) equipment, processes, and training for the batallion.</li>
</ul>
<h1 id="Volunteer-Firefighter"><a href="#Volunteer-Firefighter" class="headerlink" title="Volunteer Firefighter"></a>Volunteer Firefighter</h1><p><em><a target="_blank" rel="noopener" href="https://www.facebook.com/Fortperryvfd/">Fort Perry, Georgia</a></em> Volunteer Fire Department <em>03&#x2F;2022 - Current</em><br><em><a target="_blank" rel="noopener" href="https://www.facebook.com/GenevaGaVFD/">Geneva, Georgia</a></em> Volunteer Fire Department <em>03&#x2F;2022 - Current</em></p>
<ul>
<li>Joined both departments in March 2022.</li>
<li>Completed Firefighter 1 certification July 2022, training with Flint Hill Fire Dept, Georgia.</li>
<li>Elected Treasurer of Geneva Fire Dept Sep 2022</li>
</ul>
<h1 id="Knight"><a href="#Knight" class="headerlink" title="Knight"></a>Knight</h1><p><em><a target="_blank" rel="noopener" href="https://christianknights.com/">Order of Christian Knights</a></em> <em>2019 - 06&#x2F;2023</em></p>
<ul>
<li>Became attached to the Order around 2019.</li>
<li>Knighted as Sir Andrew in September, 2021. Committed to living a lifestyle that affirms the traditions of chivalry.</li>
<li>Helped craft founding documents for the organization - primarily bylaws and constitution.</li>
<li>Elected Master Deputy in Winter 2021 to assist the Grandmaster of the Order with executive functions. Served until December 2022.</li>
<li>Appointed Master Secretary of the Order and Commander of the Southeast Regional Commandery December 2022.</li>
<li>Active in numerous churches to encourage men and women to serve their family, churches and community.</li>
<li>Vacated Order positions in June 2023 to focus on Fire department and local Church responsiblities</li>
</ul>
<h1 id="Search-and-Rescue-Technician"><a href="#Search-and-Rescue-Technician" class="headerlink" title="Search and Rescue Technician"></a>Search and Rescue Technician</h1><p><em><a target="_blank" rel="noopener" href="https://www.facebook.com/skagitcountysar/">Skagit Ground Search and Rescue</a></em> <em>2017 - 10&#x2F;2021</em></p>
<ul>
<li>Joined Fall 2017 after traveling to Houston, Texas to provide humanitarian aid after Hurricane Harvey.</li>
<li>Served as field rescue technician, locating and extricating lost or injured subjects.</li>
<li>Trained in First Aid, CPR, AED, bleeding control, and patient packout.</li>
<li>Assisted with evidence searches for Skagit county Washington Sheriffs Office.</li>
<li>Assisted with the 2018, 2019, and 2020 SAR training academies.</li>
<li>Served as Secretary in 2021 and briefly as Vice President.</li>
<li>Assisted Search and Rescue Council with the implementation of Google Suites for Nonprofits via Techsoup</li>
</ul>
</div>
<div>
</div>
</article>
<div class="nav">
</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-2"><a class="toc-link" href="#Family"><span class="toc-text">Family</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Technology-Leadership"><span class="toc-text">Technology Leadership</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Infrastructure-amp-Cloud-Engineering-Manager"><span class="toc-text">Infrastructure &amp; Cloud Engineering Manager</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#IT-Manager"><span class="toc-text">IT Manager</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Automation-Team-Manager"><span class="toc-text">Automation Team Manager</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#DevOps-Team-Leader"><span class="toc-text">DevOps Team Leader</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Miscellanious"><span class="toc-text">Miscellanious</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Civil-Service"><span class="toc-text">Civil Service</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Infantry-Soldier"><span class="toc-text">Infantry Soldier</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Volunteer-Firefighter"><span class="toc-text">Volunteer Firefighter</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Knight"><span class="toc-text">Knight</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Search-and-Rescue-Technician"><span class="toc-text">Search and Rescue Technician</span></a>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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 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>
</body>
</html>

21
aplayer/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) DIYgod <diy.d.god@gmail.com> (https://www.anotherhome.net/)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

81
aplayer/README.html Normal file
View File

@@ -0,0 +1,81 @@
<p align="center">
<img src="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg" alt="ADPlayer" width="100">
</p>
<h1 align="center">APlayer</h1>
<blockquote>
<p>Wow, such a lovely HTML5 music player</p>
</blockquote>
<p><a href="https://www.npmjs.com/package/aplayer"><img src="https://img.shields.io/npm/v/aplayer.svg?style=flat-square" alt="npm"></a><br><a href="https://github.com/MoePlayer/APlayer/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/aplayer.svg?style=flat-square" alt="npm"></a><br><a href="https://www.npmjs.com/package/aplayer"><img src="https://img.shields.io/npm/dt/aplayer.svg?style=flat-square" alt="npm"></a><br><a href="https://github.com/MoePlayer/APlayer/tree/master/dist"><img src="https://badge-size.herokuapp.com/MoePlayer/APlayer/master/dist/APlayer.min.js?compression=gzip&style=flat-square" alt="size"></a><br><a href="https://travis-ci.org/MoePlayer/APlayer"><img src="https://img.shields.io/travis/MoePlayer/APlayer.svg?style=flat-square" alt="Travis"></a><br><a href="https://david-dm.org/MoePlayer/APlayer#info=devDependencies"><img src="https://img.shields.io/david/dev/MoePlayer/aplayer.svg?style=flat-square" alt="devDependency Status"></a><br><a href="https://github.com/MoePlayer/APlayer#donate"><img src="https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square" alt="donate"></a></p>
<h2 id="Introduction"><a href="#Introduction" class="headerlink" title="Introduction"></a>Introduction</h2><p><img src="https://i.imgur.com/JDrJXCr.png" alt="image"></p>
<p>APlayer is a lovely HTML5 music player.</p>
<p><strong>APlayer supports:</strong></p>
<ul>
<li>Media formats - MP4 H.264 (AAC or MP3) - WAVE PCM - Ogg Theora Vorbis</li>
<li>Features - Playlist - Lyrics</li>
</ul>
<p>Using APlayer on your project? <a href="https://github.com/MoePlayer/APlayer/issues/79">Let me know!</a></p>
<p><strong><a href="https://aplayer.js.org/">Docs</a></strong></p>
<p><strong><a href="https://aplayer.js.org/#/zh-Hans/">中文文档</a></strong></p>
<h2 id="Join-the-Discussion"><a href="#Join-the-Discussion" class="headerlink" title="Join the Discussion"></a>Join the Discussion</h2><ul>
<li><a href="https://t.me/adplayer">Telegram Group</a></li>
<li><a href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ Group</a>: 415835947</li>
</ul>
<h2 id="Related-Projects"><a href="#Related-Projects" class="headerlink" title="Related Projects"></a>Related Projects</h2><h3 id="Plugins"><a href="#Plugins" class="headerlink" title="Plugins"></a>Plugins</h3><ul>
<li><a href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
<li><a href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
<li><a href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
<li><a href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
<li><a href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
<li><a href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
<li><a href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
<li><a href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
<li><a href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
</ul>
<h3 id="Tooling"><a href="#Tooling" class="headerlink" title="Tooling"></a>Tooling</h3><ul>
<li><a href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
<li><a href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
<li>Feel free to submit yours in <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></li>
</ul>
<h2 id="Who-use-APlayer"><a href="#Who-use-APlayer" class="headerlink" title="Who use APlayer?"></a>Who use APlayer?</h2><ul>
<li><a href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
<li><a href="https://hacpai.com/">黑客派</a>: 程序员和设计师的聚集地,一个活跃的小众社区</li>
<li><a href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学 CC98 论坛</a>: 浙江大学校网内规模最大的论坛,中国各大学中较活跃的 BBS 之一</li>
<li><a href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
<li><a href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
<li><a href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
<li><a href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
<li><a href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的 LRC 歌词网站</li>
<li><a href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
<li><a href="https://github.com/MoeFE/Lyric">LRC 歌词编辑器</a>: 一款非常实用的在线 LRC 歌词编辑器</li>
<li><a href="https://aerostatica.ru/">Аэростатика</a></li>
<li><a href="https://healthdig.co/">HealthDig</a>: 每天只需两分钟的重点新闻资讯</li>
<li>Feel free to submit yours in <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></li>
</ul>
<h2 id="Current-Premium-Sponsors"><a href="#Current-Premium-Sponsors" class="headerlink" title="Current Premium Sponsors"></a>Current Premium Sponsors</h2><h3 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h3><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
</a>
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
<img width="222px" src="https://imgur.com/apG1uKf.png">
</a>
<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890"></p>
<h2 id="Contributors"><a href="#Contributors" class="headerlink" title="Contributors"></a>Contributors</h2><p>This project exists thanks to all the people who contribute.</p>
<p><a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a></p>
<h2 id="Donate"><a href="#Donate" class="headerlink" title="Donate"></a>Donate</h2><p>APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.</p>
<h2 id="One-time-Donations"><a href="#One-time-Donations" class="headerlink" title="One-time Donations"></a>One-time Donations</h2><p>We accept donations through these channels:</p>
<ul>
<li><a href="https://www.paypal.me/DIYgod">Paypal</a></li>
<li><a href="https://i.imgur.com/aq6PtWa.png">WeChat Pay</a></li>
<li><a href="https://i.imgur.com/wv1Pj2k.png">Alipay</a></li>
<li>Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
</ul>
<h2 id="Recurring-Pledges"><a href="#Recurring-Pledges" class="headerlink" title="Recurring Pledges"></a>Recurring Pledges</h2><p>Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.</p>
<ul>
<li>Become a backer or sponsor via <a href="https://opencollective.com/aplayer">OpenCollective</a></li>
<li>E-mail us: i#html.love</li>
</ul>
<h2 id="Author"><a href="#Author" class="headerlink" title="Author"></a>Author</h2><p><strong>APlayer</strong> © <a href="https://github.com/DIYgod">DIYgod</a>, Released under the <a href="./LICENSE">MIT</a> License.<br><br>Authored and maintained by DIYgod with help from contributors (<a href="https://github.com/DIYgod/APlayer/contributors">list</a>).</p>
<blockquote>
<p><a href="https://diygod.me/">Blog</a> · GitHub <a href="https://github.com/DIYgod">@DIYgod</a> · Twitter <a href="https://twitter.com/DIYgod">@DIYgod</a> · Telegram Channel <a href="https://t.me/awesomeDIYgod">@awesomeDIYgod</a></p>
</blockquote>

215
aplayer/demo/demo.js Normal file
View File

@@ -0,0 +1,215 @@
const ap1 = new APlayer({
element: document.getElementById('player1'),
mini: false,
autoplay: false,
lrcType: false,
mutex: true,
preload: 'metadata',
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2'
}]
});
ap1.on('play', function () {
console.log('play');
});
ap1.on('play', function () {
console.log('play play');
});
ap1.on('pause', function () {
console.log('pause');
});
ap1.on('canplay', function () {
console.log('canplay');
});
ap1.on('playing', function () {
console.log('playing');
});
ap1.on('ended', function () {
console.log('ended');
});
ap1.on('error', function () {
console.log('error');
});
const ap2 = new APlayer({
element: document.getElementById('player2'),
mini: true,
autoplay: false,
lrcType: false,
mutex: true,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}]
});
const ap3 = new APlayer({
element: document.getElementById('player3'),
mini: false,
autoplay: false,
lrcType: 3,
mutex: true,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}]
});
const ap4 = new APlayer({
element: document.getElementById('player4'),
mini: false,
autoplay: false,
lrcType: false,
mutex: true,
theme: '#ad7a86',
order: 'random',
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}, {
name: '光るなら(HLS)',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hls/hikarunara.m3u8',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2',
type: 'hls'
}]
});
const ap5 = new APlayer({
element: document.getElementById('player5'),
mini: false,
autoplay: false,
lrcType: 3,
mutex: true,
theme: '#e9e9e9',
listFolded: false,
listMaxHeight: 80,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
}]
});
const colorThief = new ColorThief();
const image = new Image();
const xhr = new XMLHttpRequest();
const setTheme = (index) => {
if (!ap5.list.audios[index].theme) {
xhr.onload = function(){
let coverUrl = URL.createObjectURL(this.response);
image.onload = function(){
let color = colorThief.getColor(image);
ap5.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
URL.revokeObjectURL(coverUrl)
};
image.src = coverUrl;
}
xhr.open('GET', ap5.list.audios[index].cover, true);
xhr.responseType = 'blob';
xhr.send();
}
};
setTheme(ap5.list.index);
ap5.on('listswitch', (data) => {
setTheme(data.index);
});
const ap6 = new APlayer({
element: document.getElementById('player6'),
mutex: true,
audio: [{
name: '光るなら(HLS)',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hls/hikarunara.m3u8',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2',
type: 'hls'
}]
});
const ap7 = new APlayer({
element: document.getElementById('player7'),
mutex: true,
audio: [{
name: '光るなら(HLS)',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hls/hikarunara.m3u8',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2',
type: 'customHls',
}],
customAudioType: {
'customHls': function (audioElement, audio, player) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audio.url);
hls.attachMedia(audioElement);
}
else if (audioElement.canPlayType('application/x-mpegURL') || audioElement.canPlayType('application/vnd.apple.mpegURL')) {
audioElement.src = audio.url;
}
else {
player.notice('Error: HLS is not supported.');
}
}
}
});
const ap8 = new APlayer({
element: document.getElementById('player8'),
mutex: true,
theme: '#ad7a86',
order: 'random',
lrcType: 3,
fixed: true,
});
$.ajax({
url: 'https://api.i-meto.com/meting/api?server=netease&type=playlist&id=35798529',
success: function (list) {
ap8.list.add(JSON.parse(list));
}
});

110
aplayer/demo/index.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="0; URL=https://aplayer.js.org/#/zh-Hans/" />
<title>APlayer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
max-width: 32rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 150px;
}
h1 {
font-size: 54px;
color: #333;
margin: 30px 0 10px;
}
h2 {
font-size: 22px;
color: #555;
}
h3 {
font-size: 24px;
color: #555;
}
hr {
display: block;
width: 7rem;
height: 1px;
margin: 2.5rem 0;
background-color: #eee;
border: 0;
}
a {
color: #08c;
text-decoration: none;
}
p {
font-size: 18px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="APlayer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
</head>
<body>
<div class="container">
<h1>APlayer</h1>
<h2>Wow, such a beautiful html5 music player</h2>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/APlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
<hr>
<h3>Normal</h3>
<div id="player1"></div>
<p></p>
<button onclick="ap1.play()">ap.play()</button>
<button onclick="ap1.seek(100)">ap.seek(100)</button>
<button onclick="ap1.pause()">ap.pause()</button>
<button onclick="ap1.toggle()">ap.toggle()</button>
<button onclick="ap1.volume(0.1)">ap.volume(0.1)</button>
<button onclick="ap1.addAudio([
{
name: 'あっちゅ~ま青春!',
artist: '七森中☆ごらく部',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yuruyuri.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yuruyuri.jpg'
},
{
name: 'secret base~君がくれたもの~',
artist: '茅野愛衣',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/secretbase.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/secretbase.jpg'
},
{
name: '回レ!雪月花',
artist: '小倉唯',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/snowmoonflowers.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/snowmoonflowers.jpg'
}
])">ap.addAudio(...)</button>
<button onclick="ap1.destroy()">ap.destroy()</button>
<h3>With playlist</h3>
<div id="player4" class="aplayer"></div>
<p></p>
<button onclick="ap4.switchAudio(2)">ap.switchAudio(2)</button>
<h3>With lyrics</h3>
<div id="player3" class="aplayer"></div>
<h3>With playlist and lyrics</h3>
<div id="player5" class="aplayer"></div>
<h3>Narrow</h3>
<div id="player2" class="aplayer"></div>
<h3>HLS</h3>
<div id="player6" class="aplayer"></div>
<div id="player7" class="aplayer"></div>
<div id="player8" class="aplayer"></div>
</div>
<script>
if (/mobile/i.test(window.navigator.userAgent)) {
new VConsole();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="demo.js"></script>
</body>
</html>

2235
aplayer/dist/APlayer.js vendored Normal file

File diff suppressed because it is too large Load Diff

683
aplayer/dist/APlayer.min.css vendored Normal file
View File

@@ -0,0 +1,683 @@
.aplayer {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);
border-radius: 2px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: normal;
position: relative
}
.aplayer * {
box-sizing: content-box
}
.aplayer svg {
width: 100%;
height: 100%
}
.aplayer svg circle, .aplayer svg path {
fill: #fff
}
.aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #e9e9e9
}
.aplayer.aplayer-withlist .aplayer-list {
display: block
}
.aplayer.aplayer-withlist .aplayer-icon-order, .aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
display: inline
}
.aplayer.aplayer-withlrc .aplayer-pic {
height: 90px;
width: 90px
}
.aplayer.aplayer-withlrc .aplayer-info {
margin-left: 90px;
height: 90px;
padding: 10px 7px 0
}
.aplayer.aplayer-withlrc .aplayer-lrc {
display: block
}
.aplayer.aplayer-narrow {
width: 66px
}
.aplayer.aplayer-narrow .aplayer-info, .aplayer.aplayer-narrow .aplayer-list {
display: none
}
.aplayer.aplayer-narrow .aplayer-body, .aplayer.aplayer-narrow .aplayer-pic {
height: 66px;
width: 66px
}
.aplayer.aplayer-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
overflow: visible;
max-width: 400px;
box-shadow: none
}
.aplayer.aplayer-fixed .aplayer-list {
margin-bottom: 65px;
border: 1px solid #eee;
border-bottom: none
}
.aplayer.aplayer-fixed .aplayer-body {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
background: #fff;
padding-right: 18px;
transition: all .3s ease;
max-width: 400px
}
.aplayer.aplayer-fixed .aplayer-lrc {
display: block;
position: fixed;
bottom: 10px;
left: 0;
right: 0;
margin: 0;
z-index: 98;
pointer-events: none;
text-shadow: -1px -1px 0 #fff
}
.aplayer.aplayer-fixed .aplayer-lrc:after, .aplayer.aplayer-fixed .aplayer-lrc:before {
display: none
}
.aplayer.aplayer-fixed .aplayer-info {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: all .3s ease;
border-bottom: none;
border-top: 1px solid #e9e9e9
}
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
width: calc(100% - 105px)
}
.aplayer.aplayer-fixed .aplayer-miniswitcher {
display: block
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
display: block;
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px!important
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-lrc, .aplayer.aplayer-fixed .aplayer-icon-play {
display: inline-block
}
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-menu, .aplayer.aplayer-fixed .aplayer-icon-play {
position: absolute;
bottom: 27px;
width: 20px;
height: 20px
}
.aplayer.aplayer-fixed .aplayer-icon-back {
right: 75px
}
.aplayer.aplayer-fixed .aplayer-icon-play {
right: 50px
}
.aplayer.aplayer-fixed .aplayer-icon-forward {
right: 25px
}
.aplayer.aplayer-fixed .aplayer-icon-menu {
right: 0
}
.aplayer.aplayer-arrow .aplayer-icon-loop, .aplayer.aplayer-arrow .aplayer-icon-order, .aplayer.aplayer-mobile .aplayer-icon-volume-down {
display: none
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: block
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
}
.aplayer .aplayer-body {
position: relative
}
.aplayer .aplayer-icon {
width: 15px;
height: 15px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
opacity: .8;
vertical-align: middle;
padding: 0;
font-size: 12px;
margin: 0;
display: inline-block
}
.aplayer .aplayer-icon path {
transition: all .2s ease-in-out
}
.aplayer .aplayer-icon-back, .aplayer .aplayer-icon-forward, .aplayer .aplayer-icon-lrc, .aplayer .aplayer-icon-order, .aplayer .aplayer-icon-play {
display: none
}
.aplayer .aplayer-icon-lrc-inactivity svg {
opacity: .4
}
.aplayer .aplayer-icon-forward {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.aplayer .aplayer-lrc-content {
display: none
}
.aplayer .aplayer-pic {
position: relative;
float: left;
height: 66px;
width: 66px;
background-size: cover;
background-position: 50%;
transition: all .3s ease;
cursor: pointer
}
.aplayer .aplayer-pic:hover .aplayer-button {
opacity: 1
}
.aplayer .aplayer-pic .aplayer-button {
position: absolute;
border-radius: 50%;
opacity: .8;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, .2);
transition: all .1s ease
}
.aplayer .aplayer-pic .aplayer-button path {
fill: #fff
}
.aplayer .aplayer-pic .aplayer-hide {
display: none
}
.aplayer .aplayer-pic .aplayer-play {
width: 26px;
height: 26px;
border: 2px solid #fff;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0
}
.aplayer .aplayer-pic .aplayer-play svg {
position: absolute;
top: 3px;
left: 4px;
height: 20px;
width: 20px
}
.aplayer .aplayer-pic .aplayer-pause {
width: 16px;
height: 16px;
border: 2px solid #fff;
bottom: 4px;
right: 4px
}
.aplayer .aplayer-pic .aplayer-pause svg {
position: absolute;
top: 2px;
left: 2px;
height: 12px;
width: 12px
}
.aplayer .aplayer-info {
margin-left: 66px;
padding: 14px 7px 0 10px;
height: 66px;
box-sizing: border-box
}
.aplayer .aplayer-info .aplayer-music {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0 13px 5px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: default;
padding-bottom: 2px;
height: 20px
}
.aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 14px
}
.aplayer .aplayer-info .aplayer-music .aplayer-author {
font-size: 12px;
color: #666
}
.aplayer .aplayer-info .aplayer-controller {
position: relative;
display: flex
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 0 0 5px;
padding: 4px 0;
cursor: pointer!important;
flex: 1
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #aaa;
height: 2px;
transition: all .5s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 2px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 10px;
width: 10px;
border-radius: 50%;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-transform: scale(0);
transform: scale(0)
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: relative;
right: 0;
bottom: 4px;
height: 17px;
color: #999;
font-size: 11px;
padding-left: 7px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
vertical-align: middle
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
cursor: pointer;
transition: all .2s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #666
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
margin-right: 2px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
fill: #000
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
display: none
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
position: relative;
display: inline-block;
margin-left: 3px;
cursor: pointer!important
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
height: 40px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
position: absolute;
bottom: 15px;
right: -3px;
width: 25px;
height: 0;
z-index: 99;
overflow: hidden;
transition: all .2s ease-in-out
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
height: 40px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
position: absolute;
bottom: 0;
right: 10px;
width: 5px;
height: 35px;
background: #aaa;
border-radius: 2.5px;
overflow: hidden
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
transition: all .1s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: none
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
position: absolute;
-webkit-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite
}
.aplayer .aplayer-lrc {
display: none;
position: relative;
height: 30px;
text-align: center;
overflow: hidden;
margin: -10px 0 7px
}
.aplayer .aplayer-lrc:before {
top: 0;
height: 10%;
background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0)
}
.aplayer .aplayer-lrc:after, .aplayer .aplayer-lrc:before {
position: absolute;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
content: " "
}
.aplayer .aplayer-lrc:after {
bottom: 0;
height: 33%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0)
}
.aplayer .aplayer-lrc p {
font-size: 12px;
color: #666;
line-height: 16px!important;
height: 16px!important;
padding: 0!important;
margin: 0!important;
transition: all .5s ease-out;
opacity: .4;
overflow: hidden
}
.aplayer .aplayer-lrc p.aplayer-lrc-current {
opacity: 1;
overflow: visible;
height: auto!important;
min-height: 16px
}
.aplayer .aplayer-lrc.aplayer-lrc-hide {
display: none
}
.aplayer .aplayer-lrc .aplayer-lrc-contents {
width: 100%;
transition: all .5s ease-out;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: default
}
.aplayer .aplayer-list {
overflow: auto;
transition: all .5s ease;
will-change: height;
display: none;
overflow: hidden
}
.aplayer .aplayer-list.aplayer-list-hide {
max-height: 0!important
}
.aplayer .aplayer-list ol {
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: auto
}
.aplayer .aplayer-list ol::-webkit-scrollbar {
width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #eee
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
background-color: #ccc
}
.aplayer .aplayer-list ol li {
position: relative;
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 12px;
border-top: 1px solid #e9e9e9;
cursor: pointer;
transition: all .2s ease;
overflow: hidden;
margin: 0
}
.aplayer .aplayer-list ol li:first-child {
border-top: none
}
.aplayer .aplayer-list ol li:hover {
background: #efefef
}
.aplayer .aplayer-list ol li.aplayer-list-light {
background: #e9e9e9
}
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
display: inline-block
}
.aplayer .aplayer-list ol li .aplayer-list-cur {
display: none;
width: 3px;
height: 22px;
position: absolute;
left: 0;
top: 5px;
cursor: pointer
}
.aplayer .aplayer-list ol li .aplayer-list-index {
color: #666;
margin-right: 12px;
cursor: pointer
}
.aplayer .aplayer-list ol li .aplayer-list-author {
color: #666;
float: right;
cursor: pointer
}
.aplayer .aplayer-notice {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 12px;
border-radius: 4px;
padding: 5px 10px;
transition: all .3s ease-in-out;
overflow: hidden;
color: #fff;
pointer-events: none;
background-color: #f4f4f5;
color: #909399
}
.aplayer .aplayer-miniswitcher {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #e6e6e6;
width: 18px;
border-radius: 0 2px 2px 0
}
.aplayer .aplayer-miniswitcher .aplayer-icon {
height: 100%;
width: 100%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all .3s ease
}
.aplayer .aplayer-miniswitcher .aplayer-icon path {
fill: #666
}
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
fill: #000
}
@-webkit-keyframes aplayer-roll {
0% {
left: 0
}
to {
left: -100%
}
}
@keyframes aplayer-roll {
0% {
left: 0
}
to {
left: -100%
}
}
/*# sourceMappingURL=APlayer.min.css.map*/

1
aplayer/dist/APlayer.min.css.map vendored Normal file

File diff suppressed because one or more lines are too long

2
aplayer/dist/APlayer.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
aplayer/dist/APlayer.min.js.map vendored Normal file

File diff suppressed because one or more lines are too long

580
aplayer/docs/README.html Normal file
View File

@@ -0,0 +1,580 @@
<hr>
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="APlayer"><a href="#APlayer" class="headerlink" title="APlayer"></a>APlayer</h1><p>🍭 Wow, such a beautiful HTML5 music player</p>
<h2 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h2><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
</a>
<a href="https://www.upyun.com/" target="_blank">
<img width="222px" src="https://imgur.com/apG1uKf.png">
</a>
<h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><p>Using npm:</p>
<pre><code>npm install aplayer --save
</code></pre>
<p>Using Yarn:</p>
<pre><code>yarn add aplayer
</code></pre>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><div class="aplayer-wrap">
<div id="aplayer2"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;
}]
});
</code></pre>
<p>Work with module bundler:</p>
<pre><code class="js">import &#39;aplayer/dist/APlayer.min.css&#39;;
import APlayer from &#39;aplayer&#39;;
const ap = new APlayer(options);
</code></pre>
<h2 id="Options"><a href="#Options" class="headerlink" title="Options"></a>Options</h2><table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>container</td>
<td>document.querySelector(.aplayer)</td>
<td>player container</td>
</tr>
<tr>
<td>fixed</td>
<td>false</td>
<td>enable fixed mode, <a href="https://aplayer.js.org/#/home?id=fixed-mode">see more details</a></td>
</tr>
<tr>
<td>mini</td>
<td>false</td>
<td>enable mini mode, <a href="https://aplayer.js.org/#/home?id=mini-mode">see more details</a></td>
</tr>
<tr>
<td>autoplay</td>
<td>false</td>
<td>audio autoplay</td>
</tr>
<tr>
<td>theme</td>
<td>#b7daff</td>
<td>main color</td>
</tr>
<tr>
<td>loop</td>
<td>all</td>
<td>player loop play, values: all, one, none</td>
</tr>
<tr>
<td>order</td>
<td>list</td>
<td>player play order, values: list, random</td>
</tr>
<tr>
<td>preload</td>
<td>auto</td>
<td>values: none, metadata, auto</td>
</tr>
<tr>
<td>volume</td>
<td>0.7</td>
<td>default volume, notice that player will remember user setting, default volume will not work after user set volume themselves</td>
</tr>
<tr>
<td>audio</td>
<td>-</td>
<td>audio info, should be an object or object array</td>
</tr>
<tr>
<td>audio.name</td>
<td>-</td>
<td>audio name</td>
</tr>
<tr>
<td>audio.artist</td>
<td>-</td>
<td>audio artist</td>
</tr>
<tr>
<td>audio.url</td>
<td>-</td>
<td>audio url</td>
</tr>
<tr>
<td>audio.cover</td>
<td>-</td>
<td>audio cover</td>
</tr>
<tr>
<td>audio.lrc</td>
<td>-</td>
<td><a href="https://aplayer.js.org/#/home?id=lrc">see more details</a></td>
</tr>
<tr>
<td>audio.theme</td>
<td>-</td>
<td>main color when switching to this audio, it has priority over the above theme</td>
</tr>
<tr>
<td>audio.type</td>
<td>auto</td>
<td>values: auto, hls, normal or other custom type, <a href="https://aplayer.js.org/#/home?id=mse-support">see more details</a></td>
</tr>
<tr>
<td>customAudioType</td>
<td>-</td>
<td><a href="https://aplayer.js.org/#/home?id=mse-support">see more details</a></td>
</tr>
<tr>
<td>mutex</td>
<td>true</td>
<td>prevent to play multiple player at the same time, pause other players when this player start play</td>
</tr>
<tr>
<td>lrcType</td>
<td>0</td>
<td><a href="https://aplayer.js.org/#/home?id=lrc">see more details</a></td>
</tr>
<tr>
<td>listFolded</td>
<td>false</td>
<td>indicate whether list should folded at first</td>
</tr>
<tr>
<td>listMaxHeight</td>
<td>-</td>
<td>list max height</td>
</tr>
<tr>
<td>storageName</td>
<td>aplayer-setting</td>
<td>localStorage key that store player setting</td>
</tr>
</tbody></table>
<p>For example:</p>
<div class="aplayer-wrap">
<div id="aplayer3"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
mini: false,
autoplay: false,
theme: &#39;#FADFA3&#39;,
loop: &#39;all&#39;,
order: &#39;random&#39;,
preload: &#39;auto&#39;,
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;,
lrc: &#39;lrc1.lrc&#39;,
theme: &#39;#ebd0c2&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;,
lrc: &#39;lrc2.lrc&#39;,
theme: &#39;#46718b&#39;
}
]
});
</code></pre>
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><ul>
<li><p><code>APlayer.version</code>: static property, return the version of APlayer</p>
</li>
<li><p><code>ap.play()</code>: play audio</p>
</li>
<li><p><code>ap.pause()</code>: pause audio</p>
</li>
<li><p><code>ap.seek(time: number)</code>: seek to specified time, the unit of time is second</p>
<pre><code class="js">ap.seek(100);
</code></pre>
</li>
<li><p><code>ap.toggle()</code>: toggle between play and pause</p>
</li>
<li><p><code>ap.on(event: string, handler: function)</code>: bind audio and player events, <a href="https://aplayer.js.org/#/home?id=event-binding">see more details</a></p>
</li>
<li><p><code>ap.volume(percentage: number, nostorage: boolean)</code>: set audio volume</p>
<pre><code class="js">ap.volume(0.1, true);
</code></pre>
</li>
<li><p><code>ap.theme(color: string, index: number)</code>: set player theme, the default of index is current audio index</p>
<pre><code class="js">ap.theme(&#39;#000&#39;, 0);
</code></pre>
</li>
<li><p><code>ap.setMode(mode: string)</code>: set player mode, the value of mode should be mini or normal</p>
</li>
<li><p><code>ap.mode</code>: return current player mode, mini or normal</p>
</li>
<li><p><code>ap.notice(text: string, time: number, opacity: number)</code>: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide.</p>
<pre><code class="js">ap.notice(&#39;Amazing player&#39;, 2000, 0.8);
</code></pre>
</li>
<li><p><code>ap.skipBack()</code>: skip to previous audio</p>
</li>
<li><p><code>ap.skipForward()</code>: skip to next audio</p>
</li>
<li><p><code>ap.destroy()</code>: destroy player</p>
</li>
<li><p><code>ap.lrc</code></p>
<ul>
<li><p><code>ap.lrc.show()</code>: show lrc</p>
</li>
<li><p><code>ap.lrc.hide()</code>: hide lrc</p>
</li>
<li><p><code>ap.lrc.toggle()</code>: toggle lrc between show and hide</p>
</li>
</ul>
</li>
<li><p><code>ap.list</code></p>
<ul>
<li><p><code>ap.list.show()</code>: show list</p>
</li>
<li><p><code>ap.list.hide()</code>: hide list</p>
</li>
<li><p><code>ap.list.toggle()</code>: toggle list between show and hide</p>
</li>
<li><p><code>ap.list.add(audios: array | object)</code>: add new audios to the list</p>
</li>
</ul>
<pre><code class="js">ap.list.add([{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
lrc: &#39;lrc.lrc&#39;,
theme: &#39;#ebd0c2&#39;
}]);
</code></pre>
<ul>
<li><code>ap.list.remove(index: number)</code>: remove an audio from the list</li>
</ul>
<pre><code class="js">ap.list.remove(1);
</code></pre>
<ul>
<li><code>ap.list.switch()</code>: switch to an audio in the list</li>
</ul>
<pre><code class="js">ap.list.switch(1);
</code></pre>
<ul>
<li><code>ap.list.clear()</code>: remove all audios from the list</li>
</ul>
</li>
<li><p><code>ap.audio</code>: native audio</p>
</li>
<li><p><code>ap.audio.currentTime</code>: returns the current playback position</p>
</li>
<li><p><code>ap.audio.duration</code>: returns audio total time</p>
</li>
<li><p><code>ap.audio.paused</code>: returns whether the audio paused</p>
</li>
<li><p>most <a href="http://www.w3schools.com/tags/ref_av_dom.asp">native api</a> are supported</p>
</li>
</ul>
<h2 id="Event-binding"><a href="#Event-binding" class="headerlink" title="Event binding"></a>Event binding</h2><p><code>ap.on(event, handler)</code></p>
<pre><code class="js">ap.on(&#39;ended&#39;, function () {
console.log(&#39;player ended&#39;);
});
</code></pre>
<p>Audio events</p>
<ul>
<li>abort</li>
<li>canplay</li>
<li>canplaythrough</li>
<li>durationchange</li>
<li>emptied</li>
<li>ended</li>
<li>error</li>
<li>loadeddata</li>
<li>loadedmetadata</li>
<li>loadstart</li>
<li>mozaudioavailable</li>
<li>pause</li>
<li>play</li>
<li>playing</li>
<li>progress</li>
<li>ratechange</li>
<li>seeked</li>
<li>seeking</li>
<li>stalled</li>
<li>suspend</li>
<li>timeupdate</li>
<li>volumechange</li>
<li>waiting</li>
</ul>
<p>Player events</p>
<ul>
<li>listshow</li>
<li>listhide</li>
<li>listadd</li>
<li>listremove</li>
<li>listswitch</li>
<li>listclear</li>
<li>noticeshow</li>
<li>noticehide</li>
<li>destroy</li>
<li>lrcshow</li>
<li>lrchide</li>
</ul>
<h2 id="LRC"><a href="#LRC" class="headerlink" title="LRC"></a>LRC</h2><p>We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option <code>lrcType</code>, then put lrc to option <code>audio.lrc</code> or HTML.</p>
<div class="aplayer-wrap">
<div id="aplayer4"><button class="docute-button load">Click to load player</div>
</div>
<h3 id="LRC-file"><a href="#LRC-file" class="headerlink" title="LRC file"></a>LRC file</h3><p>The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.</p>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 3,
audio: {
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;demo.mp3&#39;,
cover: &#39;demo.jpg&#39;,
lrc: &#39;lrc.lrc&#39;
}
});
</code></pre>
<h3 id="LRC-string-in-JS"><a href="#LRC-string-in-JS" class="headerlink" title="LRC string in JS"></a>LRC string in JS</h3><p>The second way, put LRC to a JS string.</p>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 1,
audio: {
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;demo.mp3&#39;,
cover: &#39;demo.jpg&#39;,
lrc: &#39;[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing&#39;
}
});
</code></pre>
<h3 id="LRC-in-HTML"><a href="#LRC-in-HTML" class="headerlink" title="LRC in HTML"></a>LRC in HTML</h3><p>The third way, put LRC to HTML.</p>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;player&quot;&gt;
&lt;pre class=&quot;aplayer-lrc-content&quot;&gt;
[00:00.00]APlayer audio1
[00:04.01]is
[00:08.02]amazing
&lt;!-- ... --&gt;
&lt;/pre&gt;
&lt;pre class=&quot;aplayer-lrc-content&quot;&gt;
[00:00.00]APlayer audio2
[00:04.01]is
[00:08.02]amazing
&lt;!-- ... --&gt;
&lt;/pre&gt;
&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 2,
audio: [[
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;
}
]]
});
</code></pre>
<h3 id="LRC-format"><a href="#LRC-format" class="headerlink" title="LRC format"></a>LRC format</h3><p>The following LRC format are supported:</p>
<p><code>[mm:ss]APlayer</code></p>
<p><code>[mm:ss.xx]is</code></p>
<p><code>[mm:ss.xxx]amazing</code></p>
<p><code>[mm:ss.xx][mm:ss.xx]APlayer</code></p>
<p><code>[mm:ss.xx]&lt;mm:ss.xx&gt;is</code></p>
<p><code>[mm:ss.xx]amazing[mm:ss.xx]APlayer</code></p>
<h2 id="Playlist"><a href="#Playlist" class="headerlink" title="Playlist"></a>Playlist</h2><p>APlayer will show a playlist when it has more than one audio, option <code>listFolded</code> indicates whether list should folded at first, and option <code>listMaxHeight</code> indicates list max height.</p>
<div class="aplayer-wrap">
<div id="aplayer5"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;,
lrc: &#39;lrc1.lrc&#39;,
theme: &#39;#ebd0c2&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;,
lrc: &#39;lrc2.lrc&#39;,
theme: &#39;#46718b&#39;
}
]
});
</code></pre>
<h2 id="Fixed-mode"><a href="#Fixed-mode" class="headerlink" title="Fixed mode"></a>Fixed mode</h2><p>APlayer can be fixed to page bottom via fixed mode, fixed mode is a very different mode, enjoy it!</p>
<div class="aplayer-wrap">
<div id="aplayer9"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
fixed: true,
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
}]
});
</code></pre>
<h2 id="Mini-mode"><a href="#Mini-mode" class="headerlink" title="Mini mode"></a>Mini mode</h2><p>If you dont have enough space for normal player, mini mode might be your choice.</p>
<p>Please note that mini mode is conflicted with fixed mode.</p>
<div class="aplayer-wrap">
<div id="aplayer6"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
mini: true,
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
}]
});
</code></pre>
<h2 id="MSE-support"><a href="#MSE-support" class="headerlink" title="MSE support"></a>MSE support</h2><h3 id="HLS"><a href="#HLS" class="headerlink" title="HLS"></a>HLS</h3><p>It requires the library <a href="https://github.com/video-dev/hls.js">hls.js</a> and it should be loaded before <code>APlayer.min.js</code>.</p>
<div class="aplayer-wrap">
<div id="aplayer7"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;hls.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;HLS&#39;,
artist: &#39;artist&#39;,
url: &#39;url.m3u8&#39;,
cover: &#39;cover.jpg&#39;,
type: &#39;hls&#39;
}]
});
</code></pre>
<pre><code class="js">// another way, use customType
const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;HLS&#39;,
artist: &#39;artist&#39;,
url: &#39;url.m3u8&#39;,
cover: &#39;cover.jpg&#39;,
type: &#39;customHls&#39;
}],
customAudioType: {
&#39;customHls&#39;: function (audioElement, audio, player) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audio.url);
hls.attachMedia(audioElement);
}
else if (audioElement.canPlayType(&#39;application/x-mpegURL&#39;) || audioElement.canPlayType(&#39;application/vnd.apple.mpegURL&#39;)) {
audioElement.src = audio.url;
}
else {
player.notice(&#39;Error: HLS is not supported.&#39;);
}
}
}
});
</code></pre>
<h2 id="Self-adapting-theme-according-to-cover"><a href="#Self-adapting-theme-according-to-cover" class="headerlink" title="Self-adapting theme according to cover"></a>Self-adapting theme according to cover</h2><p>It requires the library <a href="https://github.com/lokesh/color-thief/blob/master/src/color-thief.js">color-thief</a>.</p>
<div class="aplayer-wrap">
<div id="aplayer8"><button class="docute-button load">Click to load player</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;color-thief.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
theme: &#39;#e9e9e9&#39;,
audio: [{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;
}, {
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;
}]
});
const colorThief = new ColorThief();
const image = new Image();
const xhr = new XMLHttpRequest();
const setTheme = (index) =&gt; {
if (!ap.list.audios[index].theme) {
xhr.onload = function(){
let coverUrl = URL.createObjectURL(this.response);
image.onload = function(){
let color = colorThief.getColor(image);
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
URL.revokeObjectURL(coverUrl)
};
image.src = coverUrl;
}
xhr.open(&#39;GET&#39;, ap.list.audios[index].cover, true);
xhr.responseType = &#39;blob&#39;;
xhr.send();
}
};
setTheme(ap.list.index);
ap.on(&#39;listswitch&#39;, (index) =&gt; {
setTheme(index);
});
</code></pre>
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><ul>
<li><a href="https://www.jsdelivr.com/package/npm/aplayer">jsDelivr</a></li>
<li><a href="https://cdnjs.com/libraries/aplayer">cdnjs</a></li>
<li><a href="https://unpkg.com/aplayer/">unpkg</a></li>
</ul>
<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><h3 id="Why-cant-player-autoplay-in-some-mobile-browsers"><a href="#Why-cant-player-autoplay-in-some-mobile-browsers" class="headerlink" title="Why cant player autoplay in some mobile browsers?"></a>Why cant player autoplay in some mobile browsers?</h3><p>Most mobile browsers forbid audio autoplay, you wont be able to achieve it without hacks.</p>

343
aplayer/docs/config.js Normal file
View File

@@ -0,0 +1,343 @@
const langs = [
{ title: 'English', path: '/home', matchPath: /^\/(home|ecosystem|support)/ },
{ title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
];
docute.init({
landing: 'landing.html',
title: 'APlayer',
repo: 'DIYgod/APlayer',
twitter: 'DIYgod',
'edit-link': 'https://github.com/MoePlayer/APlayer/tree/master/docs',
nav: {
default: [
{
title: 'Home', path: '/home'
},
{
title: 'Ecosystem', path: '/ecosystem'
},
{
title: 'Support APlayer', path: '/support'
},
{
title: 'Languages', type: 'dropdown', items: langs
}
],
'zh-Hans': [
{
title: '首页', path: '/zh-Hans/'
},
{
title: '生态', path: '/zh-Hans/ecosystem'
},
{
title: '支持 APlayer', path: '/zh-Hans/support'
},
{
title: '选择语言', type: 'dropdown', items: langs
}
],
},
plugins: [
docsearch({
apiKey: '',
indexName: 'aplayer',
tags: ['english', 'zh-Hans'],
url: 'https://aplayer.js.org'
}),
evanyou(),
player()
]
});
function player () {
return function (context) {
context.event.on('landing:updated', function () {
console.log('landing:updated');
clearPlayer();
aplayer0();
aplayer1();
});
context.event.on('content:updated', function () {
console.log('content:updated');
clearPlayer();
for (let i = 0; i < document.querySelectorAll('.load').length; i++) {
document.querySelectorAll('.load')[i].addEventListener('click', function () {
window[this.parentElement.id] && window[this.parentElement.id]();
});
}
});
};
}
function clearPlayer () {
for (let i = 0; i < 10; i++) {
if (window['ap' + i]) {
window['ap' + i].destroy();
}
}
}
function aplayer1 () {
window.ap1 = new APlayer({
container: document.getElementById('aplayer1'),
theme: '#F57F17',
lrcType: 3,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}]
});
}
function aplayer0 () {
window.ap0 = new APlayer({
container: document.getElementById('aplayer0'),
fixed: true,
lrcType: 3,
audio: [{
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}]
});
}
function aplayer2 () {
window.ap2 = new APlayer({
container: document.getElementById('aplayer2'),
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2'
}]
});
}
function aplayer3 () {
window.ap3 = new APlayer({
container: document.getElementById('aplayer3'),
mini: false,
autoplay: false,
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}]
});
}
function aplayer4 () {
window.ap4 = new APlayer({
container: document.getElementById('aplayer4'),
lrcType: 3,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}]
});
}
function aplayer5 () {
window.ap5 = new APlayer({
container: document.getElementById('aplayer5'),
lrcType: 3,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}]
});
}
function aplayer6 () {
window.ap6 = new APlayer({
container: document.getElementById('aplayer6'),
mini: true,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2'
}]
});
}
function aplayer7 () {
window.ap7 = new APlayer({
container: document.getElementById('aplayer7'),
audio: [{
name: '光るなら(HLS)',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hls/hikarunara.m3u8',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2',
type: 'hls'
}, {
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
theme: '#505d6b'
}]
});
}
function aplayer8 () {
window.ap8 = new APlayer({
container: document.getElementById('aplayer8'),
theme: '#e9e9e9',
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
}]
});
const colorThief = new ColorThief();
window.ap8.on('switchaudio', function (index) {
if (!window.ap8.options.audio[index].theme) {
colorThief.getColorAsync(window.ap8.options.audio[index].cover, function (color) {
window.ap8.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
});
}
function aplayer9 () {
window.ap9 = new APlayer({
container: document.getElementById('aplayer9'),
fixed: true,
lrcType: 3,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}]
});
}

View File

@@ -0,0 +1,38 @@
<hr>
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="Ecosystem"><a href="#Ecosystem" class="headerlink" title="Ecosystem"></a>Ecosystem</h1><p>Lets make APlayer better, feel free to submit yours in <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></p>
<h2 id="Help"><a href="#Help" class="headerlink" title="Help"></a>Help</h2><h3 id="Joining-the-Discussion"><a href="#Joining-the-Discussion" class="headerlink" title="Joining the Discussion"></a>Joining the Discussion</h3><ul>
<li><a href="https://t.me/adplayer">Telegram Group</a></li>
<li><a href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ Group</a>: 415835947</li>
</ul>
<h3 id="Creating-issue"><a href="#Creating-issue" class="headerlink" title="Creating issue"></a>Creating issue</h3><ul>
<li><a href="https://github.com/MoePlayer/APlayer/issues">MoePlayer&#x2F;APlayer&#x2F;issues</a></li>
</ul>
<h2 id="Related-Projects"><a href="#Related-Projects" class="headerlink" title="Related Projects"></a>Related Projects</h2><h3 id="Plugins"><a href="#Plugins" class="headerlink" title="Plugins"></a>Plugins</h3><ul>
<li><a href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
<li><a href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
<li><a href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
<li><a href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
<li><a href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
<li><a href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
<li><a href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
<li><a href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
<li><a href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
</ul>
<h3 id="Tooling"><a href="#Tooling" class="headerlink" title="Tooling"></a>Tooling</h3><ul>
<li><a href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
<li><a href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
</ul>
<h2 id="Who-use-APlayer"><a href="#Who-use-APlayer" class="headerlink" title="Who use APlayer?"></a>Who use APlayer?</h2><ul>
<li><a href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
<li><a href="https://hacpai.com/">黑客派</a>: 程序员和设计师的聚集地,一个活跃的小众社区</li>
<li><a href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学CC98论坛</a>: 浙江大学校网内规模最大的论坛中国各大学中较活跃的BBS之一</li>
<li><a href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
<li><a href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
<li><a href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
<li><a href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
<li><a href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的LRC歌词网站</li>
<li><a href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
<li><a href="https://github.com/MoeFE/Lyric">LRC歌词编辑器</a>: 一款非常实用的在线LRC歌词编辑器</li>
<li><a href="https://aerostatica.ru/">Аэростатика</a></li>
<li><a href="https://healthdig.co/">HealthDig</a>: 每天只需两分钟的重点新闻资讯</li>
</ul>

49
aplayer/docs/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>APlayer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/theme-github.css" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-48084758-8');
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<style>
body {
text-rendering: auto;
}
#evanyou-canvas {
z-index: -1 !important;
}
.aplayer-wrap {
max-width: 700px;
margin: 20px 0;
}
.sidebar-toggle {
z-index: 90;
}
</style>
</head>
<body>
<!-- don't remove this part start -->
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/plugins/docsearch.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.js"></script>
<script src="./config.js"></script>
<!-- livereload script placeholder -->
<!-- don't remove this part end -->
</body>
</html>

84
aplayer/docs/landing.html Normal file
View File

@@ -0,0 +1,84 @@
<h1>APlayer</h1>
<h3>🍭 Wow, such a beautiful HTML5 music player.</h3>
<div class="aplayer-wrap">
<div id="aplayer1"></div>
</div>
<div id="aplayer0"></div>
<div class="landing-buttons">
<a class="landing-button" target="_blank" href="https://github.com/MoePlayer/APlayer">
GitHub
</a>
<a class="landing-button" router-link="/home">
Docs
</a>
</div>
<style>
h1 {
margin: 0;
margin-top: -50px;
font-weight: normal;
font-size: 40px;
letter-spacing: 1px;
}
h3 {
margin-top: 20px;
color: #999;
font-weight: normal;
letter-spacing: 1px;
}
.landing {
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-user-select: none;
user-select: none;
}
.features {
margin-top: 20px;
margin-bottom: 10px;
font-size: 16px;
line-height: 1.7;
}
.landing-button {
border: 1px solid #ccc;
border-radius: 33px;
padding: 10px 30px;
background-color: white;
display: inline-block;
margin-right: 20px;
color: #333;
}
.landing-button:hover {
border-color: #42b983;
color: #42b983;
text-decoration: none;
}
.aplayer-wrap {
width: 600px;
max-width: 100%;
margin: 20px 0 40px;
}
</style>

27
aplayer/docs/support.html Normal file
View File

@@ -0,0 +1,27 @@
<hr>
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="Sponsor-APlayer-Development"><a href="#Sponsor-APlayer-Development" class="headerlink" title="Sponsor APlayer Development"></a>Sponsor APlayer Development</h1><p>APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.</p>
<p>If you run a business and are using APlayer in a revenue-generating product, it makes business sense to sponsor APlayer development: it ensures the project that your product relies on stays healthy and actively maintained.</p>
<p>If you are an individual user and have enjoyed the productivity of using APlayer, consider donating as a sign of appreciation - like buying me coffee once in a while :)</p>
<p>You can support APlayer development via the following methods:</p>
<h2 id="One-time-Donations"><a href="#One-time-Donations" class="headerlink" title="One-time Donations"></a>One-time Donations</h2><p>We accept donations through these channels:</p>
<ul>
<li><a href="https://www.paypal.me/DIYgod">Paypal</a></li>
<li><a href="https://i.imgur.com/aq6PtWa.png">WeChat Pay</a></li>
<li><a href="https://i.imgur.com/wv1Pj2k.png">Alipay</a></li>
<li>Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
</ul>
<h2 id="Recurring-Pledges"><a href="#Recurring-Pledges" class="headerlink" title="Recurring Pledges"></a>Recurring Pledges</h2><p>Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.</p>
<ul>
<li>Become a backer or sponsor via <a href="https://opencollective.com/aplayer">OpenCollective</a></li>
<li>E-mail us: i#html.love</li>
</ul>
<h2 id="Current-Premium-Sponsors"><a href="#Current-Premium-Sponsors" class="headerlink" title="Current Premium Sponsors"></a>Current Premium Sponsors</h2><h3 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h3><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
</a>
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
<img width="222px" src="https://imgur.com/apG1uKf.png">
</a>
<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890"></p>
<h2 id="APlayer-contributors"><a href="#APlayer-contributors" class="headerlink" title="APlayer contributors"></a>APlayer contributors</h2><p>This project exists thanks to all the people who contribute.</p>
<p><a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a></p>

View File

@@ -0,0 +1,582 @@
<hr>
<p>nav: zh-Hans<br>search: zh-Hans</p>
<hr>
<h1 id="APlayer"><a href="#APlayer" class="headerlink" title="APlayer"></a>APlayer</h1><p>🍭 Wow, such a beautiful HTML5 music player</p>
<h2 id="特别赞助商"><a href="#特别赞助商" class="headerlink" title="特别赞助商"></a>特别赞助商</h2><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
</a>
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
<img width="222px" src="https://imgur.com/apG1uKf.png">
</a>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>使用 npm:</p>
<pre><code>npm install aplayer --save
</code></pre>
<p>使用 Yarn:</p>
<pre><code>yarn add aplayer
</code></pre>
<h2 id="入门"><a href="#入门" class="headerlink" title="入门"></a>入门</h2><div class="aplayer-wrap">
<div id="aplayer2"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;
}]
});
</code></pre>
<p>使用模块管理器:</p>
<pre><code class="js">import &#39;APlayer/dist/APlayer.min.css&#39;;
import APlayer from &#39;APlayer&#39;;
const ap = new APlayer(options);
</code></pre>
<h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><table>
<thead>
<tr>
<th>名称</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>container</td>
<td>document.querySelector(.aplayer)</td>
<td>播放器容器元素</td>
</tr>
<tr>
<td>fixed</td>
<td>false</td>
<td>开启吸底模式, <a href="https://aplayer.js.org/#/home?id=fixed-mode">详情</a></td>
</tr>
<tr>
<td>mini</td>
<td>false</td>
<td>开启迷你模式, <a href="https://aplayer.js.org/#/home?id=mini-mode">详情</a></td>
</tr>
<tr>
<td>autoplay</td>
<td>false</td>
<td>音频自动播放</td>
</tr>
<tr>
<td>theme</td>
<td>#b7daff</td>
<td>主题色</td>
</tr>
<tr>
<td>loop</td>
<td>all</td>
<td>音频循环播放, 可选值: all, one, none</td>
</tr>
<tr>
<td>order</td>
<td>list</td>
<td>音频循环顺序, 可选值: list, random</td>
</tr>
<tr>
<td>preload</td>
<td>auto</td>
<td>预加载,可选值: none, metadata, auto</td>
</tr>
<tr>
<td>volume</td>
<td>0.7</td>
<td>默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效</td>
</tr>
<tr>
<td>audio</td>
<td>-</td>
<td>音频信息, 应该是一个对象或对象数组</td>
</tr>
<tr>
<td>audio.name</td>
<td>-</td>
<td>音频名称</td>
</tr>
<tr>
<td>audio.artist</td>
<td>-</td>
<td>音频艺术家</td>
</tr>
<tr>
<td>audio.url</td>
<td>-</td>
<td>音频链接</td>
</tr>
<tr>
<td>audio.cover</td>
<td>-</td>
<td>音频封面</td>
</tr>
<tr>
<td>audio.lrc</td>
<td>-</td>
<td><a href="https://aplayer.js.org/#/home?id=lrc">详情</a></td>
</tr>
<tr>
<td>audio.theme</td>
<td>-</td>
<td>切换到此音频时的主题色,比上面的 theme 优先级高</td>
</tr>
<tr>
<td>audio.type</td>
<td>auto</td>
<td>可选值: auto, hls, normal 或其他自定义类型, <a href="https://aplayer.js.org/#/home?id=mse-support">详情</a></td>
</tr>
<tr>
<td>customAudioType</td>
<td>-</td>
<td>自定义类型,<a href="https://aplayer.js.org/#/home?id=mse-support">详情</a></td>
</tr>
<tr>
<td>mutex</td>
<td>true</td>
<td>互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器</td>
</tr>
<tr>
<td>lrcType</td>
<td>0</td>
<td><a href="https://aplayer.js.org/#/home?id=lrc">详情</a></td>
</tr>
<tr>
<td>listFolded</td>
<td>false</td>
<td>列表默认折叠</td>
</tr>
<tr>
<td>listMaxHeight</td>
<td>-</td>
<td>列表最大高度</td>
</tr>
<tr>
<td>storageName</td>
<td>aplayer-setting</td>
<td>存储播放器设置的 localStorage key</td>
</tr>
</tbody></table>
<p>例如:</p>
<div class="aplayer-wrap">
<div id="aplayer3"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
mini: false,
autoplay: false,
theme: &#39;#FADFA3&#39;,
loop: &#39;all&#39;,
order: &#39;random&#39;,
preload: &#39;auto&#39;,
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;,
lrc: &#39;lrc1.lrc&#39;,
theme: &#39;#ebd0c2&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;,
lrc: &#39;lrc2.lrc&#39;,
theme: &#39;#46718b&#39;
}
]
});
</code></pre>
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><ul>
<li><p><code>APlayer.version</code>: 静态属性, 返回 APlayer 的版本号</p>
</li>
<li><p><code>ap.play()</code>: 播放音频</p>
</li>
<li><p><code>ap.pause()</code>: 暂停音频</p>
</li>
<li><p><code>ap.seek(time: number)</code>: 跳转到特定时间,时间的单位为秒</p>
<pre><code class="js">ap.seek(100);
</code></pre>
</li>
<li><p><code>ap.toggle()</code>: 切换播放和暂停</p>
</li>
<li><p><code>ap.on(event: string, handler: function)</code>: 绑定音频和播放器事件,<a href="https://aplayer.js.org/#/home?id=event-binding">详情</a></p>
</li>
<li><p><code>ap.volume(percentage: number, nostorage: boolean)</code>: 设置音频音量</p>
<pre><code class="js">ap.volume(0.1, true);
</code></pre>
</li>
<li><p><code>ap.theme(color: string, index: number)</code>: 设置播放器主题色, index 默认为当前音频的 index</p>
<pre><code class="js">ap.theme(&#39;#000&#39;, 0);
</code></pre>
</li>
<li><p><code>ap.setMode(mode: string)</code>: 设置播放器模式mode 取值应为 mininormal</p>
</li>
<li><p><code>ap.mode</code>: 返回播放器当前模式mininormal</p>
</li>
<li><p><code>ap.notice(text: string, time: number, opacity: number)</code>: 显示通知,时间的单位为毫秒,默认时间 2000 毫秒,默认透明度 0.8,设置时间为 0 可以取消通知自动隐藏</p>
<pre><code class="js">ap.notice(&#39;Amazing player&#39;, 2000, 0.8);
</code></pre>
</li>
<li><p><code>ap.skipBack()</code>: 切换到上一首音频</p>
</li>
<li><p><code>ap.skipForward()</code>: 切换到下一首音频</p>
</li>
<li><p><code>ap.destroy()</code>: 销毁播放器</p>
</li>
<li><p><code>ap.lrc</code></p>
<ul>
<li><p><code>ap.lrc.show()</code>: 显示歌词</p>
</li>
<li><p><code>ap.lrc.hide()</code>: 隐藏歌词</p>
</li>
<li><p><code>ap.lrc.toggle()</code>: 显示&#x2F;隐藏歌词</p>
</li>
</ul>
</li>
<li><p><code>ap.list</code></p>
<ul>
<li><p><code>ap.list.show()</code>: 显示播放列表</p>
</li>
<li><p><code>ap.list.hide()</code>: 隐藏播放列表</p>
</li>
<li><p><code>ap.list.toggle()</code>: 显示&#x2F;隐藏播放列表</p>
</li>
<li><p><code>ap.list.add(audios: array | object)</code>: 添加一个或几个新音频到播放列表</p>
</li>
</ul>
<pre><code class="js">ap.list.add([{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
lrc: &#39;lrc.lrc&#39;,
theme: &#39;#ebd0c2&#39;
}]);
</code></pre>
<ul>
<li><code>ap.list.remove(index: number)</code>: 移除播放列表中的一个音频</li>
</ul>
<pre><code class="js">ap.list.remove(1);
</code></pre>
<ul>
<li><code>ap.list.switch()</code>: 切换到播放列表里的其他音频</li>
</ul>
<pre><code class="js">ap.list.switch(1);
</code></pre>
<ul>
<li><code>ap.list.clear()</code>: 清空播放列表</li>
</ul>
</li>
<li><p><code>ap.audio</code>: 原生 audio</p>
</li>
<li><p><code>ap.audio.currentTime</code>: 返回音频当前播放时间</p>
</li>
<li><p><code>ap.audio.duration</code>: 返回音频总时间</p>
</li>
<li><p><code>ap.audio.paused</code>: 返回音频是否暂停</p>
</li>
<li><p>支持大多数<a href="http://www.w3schools.com/tags/ref_av_dom.asp">原生audio接口</a></p>
</li>
</ul>
<h2 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h2><p><code>ap.on(event, handler)</code></p>
<pre><code class="js">ap.on(&#39;ended&#39;, function () {
console.log(&#39;player ended&#39;);
});
</code></pre>
<p>音频事件</p>
<ul>
<li>abort</li>
<li>canplay</li>
<li>canplaythrough</li>
<li>durationchange</li>
<li>emptied</li>
<li>ended</li>
<li>error</li>
<li>loadeddata</li>
<li>loadedmetadata</li>
<li>loadstart</li>
<li>mozaudioavailable</li>
<li>pause</li>
<li>play</li>
<li>playing</li>
<li>progress</li>
<li>ratechange</li>
<li>seeked</li>
<li>seeking</li>
<li>stalled</li>
<li>suspend</li>
<li>timeupdate</li>
<li>volumechange</li>
<li>waiting</li>
</ul>
<p>播放器事件</p>
<ul>
<li>listshow</li>
<li>listhide</li>
<li>listadd</li>
<li>listremove</li>
<li>listswitch</li>
<li>listclear</li>
<li>noticeshow</li>
<li>noticehide</li>
<li>destroy</li>
<li>lrcshow</li>
<li>lrchide</li>
</ul>
<h2 id="歌词"><a href="#歌词" class="headerlink" title="歌词"></a>歌词</h2><p>我们有三种方式来给 APlayer 传递歌词,使用 <code>lrcType</code> 参数指明使用哪种方式,然后把歌词放到 <code>audio.lrc</code> 参数或者 HTML 里。</p>
<div class="aplayer-wrap">
<div id="aplayer4"><button class="docute-button load">点击加载播放器</div>
</div>
<h3 id="LRC-文件方式"><a href="#LRC-文件方式" class="headerlink" title="LRC 文件方式"></a>LRC 文件方式</h3><p>第一种方式,把歌词放到 LRC 文件里,音频播放时会加载对应的 LRC 文件。</p>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 3,
audio: {
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;demo.mp3&#39;,
cover: &#39;demo.jpg&#39;,
lrc: &#39;lrc.lrc&#39;
}
});
</code></pre>
<h3 id="JS-字符串方式"><a href="#JS-字符串方式" class="headerlink" title="JS 字符串方式"></a>JS 字符串方式</h3><p>第二种方式,把歌词放到 JS 字符串里面。</p>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 1,
audio: {
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;demo.mp3&#39;,
cover: &#39;demo.jpg&#39;,
lrc: &#39;[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing&#39;
}
});
</code></pre>
<h3 id="HTML-方式"><a href="#HTML-方式" class="headerlink" title="HTML 方式"></a>HTML 方式</h3><p>第三种方式,把歌词放到 HTML 里面。</p>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;player&quot;&gt;
&lt;pre class=&quot;aplayer-lrc-content&quot;&gt;
[00:00.00]APlayer audio1
[00:04.01]is
[00:08.02]amazing
&lt;!-- ... --&gt;
&lt;/pre&gt;
&lt;pre class=&quot;aplayer-lrc-content&quot;&gt;
[00:00.00]APlayer audio2
[00:04.01]is
[00:08.02]amazing
&lt;!-- ... --&gt;
&lt;/pre&gt;
&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
lrcType: 2,
audio: [[
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;
}
]]
});
</code></pre>
<h3 id="歌词格式"><a href="#歌词格式" class="headerlink" title="歌词格式"></a>歌词格式</h3><p>支持下面格式的歌词:</p>
<p><code>[mm:ss]APlayer</code></p>
<p><code>[mm:ss.xx]is</code></p>
<p><code>[mm:ss.xxx]amazing</code></p>
<p><code>[mm:ss.xx][mm:ss.xx]APlayer</code></p>
<p><code>[mm:ss.xx]&lt;mm:ss.xx&gt;is</code></p>
<p><code>[mm:ss.xx]amazing[mm:ss.xx]APlayer</code></p>
<h2 id="播放列表"><a href="#播放列表" class="headerlink" title="播放列表"></a>播放列表</h2><p>当有多个音频时会 APlayer 会展示一个播放列表,<code>listFolded</code> 参数指明列表是否默认折叠,<code>listMaxHeight</code> 参数指明列表最大高度。</p>
<div class="aplayer-wrap">
<div id="aplayer5"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;,
lrc: &#39;lrc1.lrc&#39;,
theme: &#39;#ebd0c2&#39;
},
{
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;,
lrc: &#39;lrc2.lrc&#39;,
theme: &#39;#46718b&#39;
}
]
});
</code></pre>
<h2 id="吸底模式"><a href="#吸底模式" class="headerlink" title="吸底模式"></a>吸底模式</h2><p>APlayer 可以通过吸底模式固定在页面底部,这种模式跟普通模式有很大不同。</p>
<div class="aplayer-wrap">
<div id="aplayer9"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
fixed: true,
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
}]
});
</code></pre>
<h2 id="迷你模式"><a href="#迷你模式" class="headerlink" title="迷你模式"></a>迷你模式</h2><p>如果你没有足够空间来放置正常模式的播放器,那么你可以考虑使用迷你模式。</p>
<p>请注意迷你模式与吸底模式冲突。</p>
<div class="aplayer-wrap">
<div id="aplayer6"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;player&#39;),
mini: true,
audio: [{
name: &#39;name&#39;,
artist: &#39;artist&#39;,
url: &#39;url.mp3&#39;,
cover: &#39;cover.jpg&#39;,
}]
});
</code></pre>
<h2 id="MSE-支持"><a href="#MSE-支持" class="headerlink" title="MSE 支持"></a>MSE 支持</h2><h3 id="HLS"><a href="#HLS" class="headerlink" title="HLS"></a>HLS</h3><p>需要在 <code>APlayer.min.js</code> 前面加载 <a href="https://github.com/video-dev/hls.js">hls.js</a></p>
<div class="aplayer-wrap">
<div id="aplayer7"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;hls.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;HLS&#39;,
artist: &#39;artist&#39;,
url: &#39;url.m3u8&#39;,
cover: &#39;cover.jpg&#39;,
type: &#39;hls&#39;
}]
});
</code></pre>
<pre><code class="js">// 另一种方式,使用 customAudioType
const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
audio: [{
name: &#39;HLS&#39;,
artist: &#39;artist&#39;,
url: &#39;url.m3u8&#39;,
cover: &#39;cover.jpg&#39;,
type: &#39;customHls&#39;
}],
customAudioType: {
&#39;customHls&#39;: function (audioElement, audio, player) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audio.url);
hls.attachMedia(audioElement);
}
else if (audioElement.canPlayType(&#39;application/x-mpegURL&#39;) || audioElement.canPlayType(&#39;application/vnd.apple.mpegURL&#39;)) {
audioElement.src = audio.url;
}
else {
player.notice(&#39;Error: HLS is not supported.&#39;);
}
}
}
});
</code></pre>
<h2 id="根据封面自适应主题色"><a href="#根据封面自适应主题色" class="headerlink" title="根据封面自适应主题色"></a>根据封面自适应主题色</h2><p>需要额外加载 <a href="https://github.com/lokesh/color-thief/blob/master/src/color-thief.js">color-thief.js</a></p>
<div class="aplayer-wrap">
<div id="aplayer8"><button class="docute-button load">点击加载播放器</div>
</div>
<pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;
&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;color-thief.js&quot;&gt;&lt;/script&gt;
</code></pre>
<pre><code class="js">const ap = new APlayer({
container: document.getElementById(&#39;aplayer&#39;),
theme: &#39;#e9e9e9&#39;,
audio: [{
name: &#39;name1&#39;,
artist: &#39;artist1&#39;,
url: &#39;url1.mp3&#39;,
cover: &#39;cover1.jpg&#39;
}, {
name: &#39;name2&#39;,
artist: &#39;artist2&#39;,
url: &#39;url2.mp3&#39;,
cover: &#39;cover2.jpg&#39;
}]
});
const colorThief = new ColorThief();
const image = new Image();
const xhr = new XMLHttpRequest();
const setTheme = (index) =&gt; {
if (!ap.list.audios[index].theme) {
xhr.onload = function(){
let coverUrl = URL.createObjectURL(this.response);
image.onload = function(){
let color = colorThief.getColor(image);
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
URL.revokeObjectURL(coverUrl)
};
image.src = coverUrl;
}
xhr.open(&#39;GET&#39;, ap.list.audios[index].cover, true);
xhr.responseType = &#39;blob&#39;;
xhr.send();
}
};
setTheme(ap.list.index);
ap.on(&#39;listswitch&#39;, (index) =&gt; {
setTheme(index);
});
</code></pre>
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><ul>
<li><a href="https://www.jsdelivr.com/package/npm/aplayer">jsDelivr</a></li>
<li><a href="https://cdnjs.com/libraries/aplayer">cdnjs</a></li>
<li><a href="https://unpkg.com/aplayer/">unpkg</a></li>
</ul>
<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><h3 id="为什么播放器不能在手机上自动播放?"><a href="#为什么播放器不能在手机上自动播放?" class="headerlink" title="为什么播放器不能在手机上自动播放?"></a>为什么播放器不能在手机上自动播放?</h3><p>大多数移动端浏览器禁止了音频自动播放。</p>

View File

@@ -0,0 +1,39 @@
<hr>
<p>nav: zh-Hans<br>search: zh-Hans</p>
<hr>
<h1 id="生态"><a href="#生态" class="headerlink" title="生态"></a>生态</h1><p>让 APlayer 变得更好,请随意在 <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a> 提交你的项目和产品</p>
<h2 id="帮助"><a href="#帮助" class="headerlink" title="帮助"></a>帮助</h2><h3 id="参与讨论"><a href="#参与讨论" class="headerlink" title="参与讨论"></a>参与讨论</h3><ul>
<li><a href="https://t.me/adplayer">Telegram 群</a></li>
<li><a href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ 群</a>: 415835947</li>
</ul>
<h3 id="提交-issue"><a href="#提交-issue" class="headerlink" title="提交 issue"></a>提交 issue</h3><ul>
<li><a href="https://github.com/MoePlayer/APlayer/issues">MoePlayer&#x2F;APlayer&#x2F;issues</a></li>
</ul>
<h2 id="相关项目"><a href="#相关项目" class="headerlink" title="相关项目"></a>相关项目</h2><h3 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h3><ul>
<li><a href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
<li><a href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
<li><a href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
<li><a href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
<li><a href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
<li><a href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
<li><a href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
<li><a href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
<li><a href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
</ul>
<h3 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h3><ul>
<li><a href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
<li><a href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
</ul>
<h2 id="谁在用-APlayer"><a href="#谁在用-APlayer" class="headerlink" title="谁在用 APlayer?"></a>谁在用 APlayer?</h2><ul>
<li><a href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
<li><a href="https://hacpai.com/">黑客派</a>: 程序员和设计师的聚集地,一个活跃的小众社区</li>
<li><a href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学CC98论坛</a>: 浙江大学校网内规模最大的论坛中国各大学中较活跃的BBS之一</li>
<li><a href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
<li><a href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
<li><a href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
<li><a href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
<li><a href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的LRC歌词网站</li>
<li><a href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
<li><a href="https://github.com/MoeFE/Lyric">LRC歌词编辑器</a>: 一款非常实用的在线LRC歌词编辑器</li>
<li><a href="https://aerostatica.ru/">Аэростатика</a></li>
</ul>

View File

@@ -0,0 +1,29 @@
<hr>
<p>nav: zh-Hans<br>search: zh-Hans</p>
<hr>
<h1 id="赞助-APlayer-的研发"><a href="#赞助-APlayer-的研发" class="headerlink" title="赞助 APlayer 的研发"></a>赞助 APlayer 的研发</h1><p>APlayer 是采用 MIT 许可的开源项目,使用完全免费。 但是随着项目规模的增长,也需要有相应的资金支持才能持续项目的维护的开发。</p>
<p>如果你是企业经营者并且将 APlayer 用在商业产品中,那么赞助 APlayer 有商业上的益处:可以让你的产品所依赖的框架保持健康并得到积极的维护。</p>
<p>如果你是个人开发者并且享受 APlayer 带来的高开发效率,可以用捐助来表示你的谢意 —— 比如偶尔给我买杯咖啡 :)</p>
<p>你可以通过下列的方法来赞助 APlayer 的开发。</p>
<h2 id="一次性赞助"><a href="#一次性赞助" class="headerlink" title="一次性赞助"></a>一次性赞助</h2><p>我们通过以下方式接受赞助:</p>
<ul>
<li><a href="https://i.imgur.com/aq6PtWa.png">微信支付</a></li>
<li><a href="https://i.imgur.com/wv1Pj2k.png">支付宝</a></li>
<li><a href="https://www.paypal.me/DIYgod">Paypal</a></li>
<li>比特币: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
</ul>
<h2 id="周期性赞助"><a href="#周期性赞助" class="headerlink" title="周期性赞助"></a>周期性赞助</h2><p>周期性赞助可以获得额外的回报,比如你的名字或你的公司 logo 会出现在 APlayer 的 GitHub 仓库和现在我们的官网中。</p>
<ul>
<li>通过 <a href="https://opencollective.com/aplayer">OpenCollective</a> 赞助成为 backer 或 sponsor </li>
<li>给我们发邮件联系赞助事宜: i#html.love</li>
</ul>
<h2 id="当前的顶级赞助商"><a href="#当前的顶级赞助商" class="headerlink" title="当前的顶级赞助商"></a>当前的顶级赞助商</h2><h3 id="特别赞助商"><a href="#特别赞助商" class="headerlink" title="特别赞助商"></a>特别赞助商</h3><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
</a>
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
<img width="222px" src="https://imgur.com/apG1uKf.png">
</a>
<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890"></p>
<h2 id="APlayer-贡献者"><a href="#APlayer-贡献者" class="headerlink" title="APlayer 贡献者"></a>APlayer 贡献者</h2><p>感谢所有贡献者。</p>
<p><a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a></p>

1
aplayer/package.json Normal file
View File

@@ -0,0 +1 @@
{"name":"aplayer","version":"1.10.1","description":"Wow, such a beautiful html5 music player","main":"dist/APlayer.min.js","style":"dist/APlayer.min.css","scripts":{"start":"npm run dev","build":"cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors","dev":"cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors","test":"eslint src webpack","format":"eslint \"**/*.js\" --fix && prettier \"**/*.{js,json,md}\" --write","format:staged":"eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,json,md}\"","format:check":"eslint \"**/*.js\" && prettier-check \"**/*.{js,json,md}\""},"files":["dist"],"repository":{"url":"git+https://github.com/DIYgod/APlayer.git","type":"git"},"keywords":["player","music","html5"],"gitHooks":{"pre-commit":"npm run format:staged"},"author":"DIYgod","license":"MIT","bugs":{"url":"https://github.com/DIYgod/APlayer/issues"},"homepage":"https://github.com/DIYgod/APlayer#readme","devDependencies":{"@babel/core":"^7.6.0","@babel/preset-env":"^7.4.5","@vuepress/plugin-back-to-top":"1.7.1","@vuepress/plugin-google-analytics":"1.7.1","@vuepress/plugin-pwa":"1.7.1","art-template":"4.13.2","art-template-loader":"1.4.3","autoprefixer":"^9.6.1","babel-loader":"^8.0.6","cross-env":"^7.0.0","css-loader":"^5.0.0","cssnano":"^4.1.10","eslint":"^7.0.0","eslint-config-prettier":"^6.3.0","eslint-loader":"^4.0.0","eslint-plugin-prettier":"^3.1.1","exports-loader":"^1.0.0","file-loader":"^6.0.0","git-revision-webpack-plugin":"^3.0.3","mini-css-extract-plugin":"1.3.0","node-sass":"^5.0.0","postcss-loader":"^3.0.0","prettier":"^2.0.1","prettier-check":"^2.0.0","pretty-quick":"^3.0.0","sass-loader":"^10.0.0","strip-loader":"^0.1.2","style-loader":"^2.0.0","svg-inline-loader":"0.8.2","template-string-optimize-loader":"^3.0.0","url-loader":"^4.0.0","vuepress":"1.7.1","webpack":"^4.40.2","webpack-cli":"3.3.12","webpack-dev-server":"^3.8.1","yorkie":"^2.0.0"},"dependencies":{"balloon-css":"^1.0.3","promise-polyfill":"8.2.0","smoothscroll":"0.4.0"}}

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M4 16c0-6.6 5.4-12 12-12s12 5.4 12 12c0 1.2-0.8 2-2 2s-2-0.8-2-2c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.2 0 2 0.8 2 2s-0.8 2-2 2c-6.6 0-12-5.4-12-12z"></path>
</svg>

After

Width:  |  Height:  |  Size: 253 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
<path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z"></path>
</svg>

After

Width:  |  Height:  |  Size: 244 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
<path d="M2.667 7.027l1.707-1.693 22.293 22.293-1.693 1.707-4-4h-11.64v4l-5.333-5.333 5.333-5.333v4h8.973l-8.973-8.973v0.973h-2.667v-3.64l-4-4zM22.667 17.333h2.667v5.573l-2.667-2.667v-2.907zM22.667 6.667v-4l5.333 5.333-5.333 5.333v-4h-10.907l-2.667-2.667h13.573z"></path>
</svg>

After

Width:  |  Height:  |  Size: 357 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33 32">
<path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333zM17.333 20v-8h-1.333l-2.667 1.333v1.333h2v5.333h2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 294 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z"></path>
</svg>

After

Width:  |  Height:  |  Size: 590 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 32">
<path d="M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 472 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M0.622 18.334h19.54v7.55l11.052-9.412-11.052-9.413v7.549h-19.54v3.725z"></path>
</svg>

After

Width:  |  Height:  |  Size: 174 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M22.667 4l7 6-7 6 7 6-7 6v-4h-3.653l-3.76-3.76 2.827-2.827 2.587 2.587h2v-8h-2l-12 12h-6v-4h4.347l12-12h3.653v-4zM2.667 8h6l3.76 3.76-2.827 2.827-2.587-2.587h-4.347v-4z"></path>
</svg>

After

Width:  |  Height:  |  Size: 272 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17 32">
<path d="M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z"></path>
</svg>

After

Width:  |  Height:  |  Size: 288 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 31">
<path d="M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z"></path>
</svg>

After

Width:  |  Height:  |  Size: 251 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z"></path>
</svg>

After

Width:  |  Height:  |  Size: 184 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M25.468 6.947c-0.326-0.172-0.724-0.151-1.030 0.057l-6.438 4.38v-3.553c0-0.371-0.205-0.71-0.532-0.884-0.326-0.172-0.724-0.151-1.030 0.057l-12 8.164c-0.274 0.186-0.438 0.496-0.438 0.827s0.164 0.641 0.438 0.827l12 8.168c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-3.556l6.438 4.382c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-16.333c0-0.371-0.205-0.71-0.532-0.884z"></path>
</svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 28 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z"></path>
</svg>

After

Width:  |  Height:  |  Size: 604 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 28 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z"></path>
</svg>

After

Width:  |  Height:  |  Size: 301 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 28 32">
<path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

706
aplayer/src/css/index.scss Normal file
View File

@@ -0,0 +1,706 @@
$aplayer-height: 66px;
$lrc-height: 30px;
$aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
user-select: none;
line-height: initial;
position: relative;
* {
box-sizing: content-box;
}
svg {
width: 100%;
height: 100%;
path,
circle {
fill: #fff;
}
}
&.aplayer-withlist {
.aplayer-info {
border-bottom: 1px solid #e9e9e9;
}
.aplayer-list {
display: block;
}
.aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
display: inline;
}
.aplayer-icon-order {
display: inline;
}
}
&.aplayer-withlrc {
.aplayer-pic {
height: $aplayer-height-lrc;
width: $aplayer-height-lrc;
}
.aplayer-info {
margin-left: $aplayer-height-lrc;
height: $aplayer-height-lrc;
padding: 10px 7px 0 7px;
}
.aplayer-lrc {
display: block;
}
}
&.aplayer-narrow {
width: $aplayer-height;
.aplayer-info {
display: none;
}
.aplayer-list {
display: none;
}
.aplayer-pic,
.aplayer-body {
height: $aplayer-height;
width: $aplayer-height;
}
}
&.aplayer-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
overflow: visible;
max-width: 400px;
box-shadow: none;
.aplayer-list {
margin-bottom: 65px;
border: 1px solid #eee;
border-bottom: none;
}
.aplayer-body {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
background: #fff;
padding-right: 18px;
transition: all 0.3s ease;
max-width: 400px;
}
.aplayer-lrc {
display: block;
position: fixed;
bottom: 10px;
left: 0;
right: 0;
margin: 0;
z-index: 98;
pointer-events: none;
text-shadow: -1px -1px 0 #fff;
&:before,
&:after {
display: none;
}
}
.aplayer-info {
transform: scaleX(1);
transform-origin: 0 0;
transition: all 0.3s ease;
border-bottom: none;
border-top: 1px solid #e9e9e9;
.aplayer-music {
width: calc(100% - 105px);
}
}
.aplayer-miniswitcher {
display: block;
}
&.aplayer-narrow {
.aplayer-info {
display: block;
transform: scaleX(0);
}
.aplayer-body {
width: $aplayer-height !important;
}
.aplayer-miniswitcher .aplayer-icon {
transform: rotateY(0);
}
}
.aplayer-icon-back,
.aplayer-icon-play,
.aplayer-icon-forward,
.aplayer-icon-lrc {
display: inline-block;
}
.aplayer-icon-back,
.aplayer-icon-play,
.aplayer-icon-forward,
.aplayer-icon-menu {
position: absolute;
bottom: 27px;
width: 20px;
height: 20px;
}
.aplayer-icon-back {
right: 75px;
}
.aplayer-icon-play {
right: 50px;
}
.aplayer-icon-forward {
right: 25px;
}
.aplayer-icon-menu {
right: 0;
}
}
&.aplayer-mobile {
.aplayer-icon-volume-down {
display: none;
}
}
&.aplayer-arrow {
.aplayer-icon-order,
.aplayer-icon-loop {
display: none;
}
}
&.aplayer-loading {
.aplayer-info .aplayer-controller .aplayer-loading-icon {
display: block;
}
.aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
transform: scale(1);
}
}
.aplayer-body {
position: relative;
}
.aplayer-icon {
width: 15px;
height: 15px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
opacity: .8;
vertical-align: middle;
padding: 0;
font-size: 12px;
margin: 0;
display: inline-block;
path {
transition: all .2s ease-in-out;
}
}
.aplayer-icon-order,
.aplayer-icon-back,
.aplayer-icon-play,
.aplayer-icon-forward,
.aplayer-icon-lrc {
display: none;
}
.aplayer-icon-lrc-inactivity {
svg {
opacity: 0.4;
}
}
.aplayer-icon-forward {
transform: rotate(180deg);
}
.aplayer-lrc-content {
display: none;
}
.aplayer-pic {
position: relative;
float: left;
height: $aplayer-height;
width: $aplayer-height;
background-size: cover;
background-position: center;
transition: all 0.3s ease;
cursor: pointer;
&:hover .aplayer-button {
opacity: 1;
}
.aplayer-button {
position: absolute;
border-radius: 50%;
opacity: 0.8;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
transition: all 0.1s ease;
path {
fill: #fff;
}
}
.aplayer-hide {
display: none;
}
.aplayer-play {
width: 26px;
height: 26px;
border: 2px solid #fff;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0;
svg {
position: absolute;
top: 3px;
left: 4px;
height: 20px;
width: 20px;
}
}
.aplayer-pause {
width: 16px;
height: 16px;
border: 2px solid #fff;
bottom: 4px;
right: 4px;
svg {
position: absolute;
top: 2px;
left: 2px;
height: 12px;
width: 12px;
}
}
}
.aplayer-info {
margin-left: $aplayer-height;
padding: 14px 7px 0 10px;
height: $aplayer-height;
box-sizing: border-box;
.aplayer-music {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0 13px 5px;
user-select: text;
cursor: default;
padding-bottom: 2px;
height: 20px;
.aplayer-title {
font-size: 14px;
}
.aplayer-author {
font-size: 12px;
color: #666;
}
}
.aplayer-controller {
position: relative;
display: flex;
.aplayer-bar-wrap {
margin: 0 0 0 5px;
padding: 4px 0;
cursor: pointer !important;
flex: 1;
&:hover {
.aplayer-bar .aplayer-played .aplayer-thumb {
transform: scale(1);
}
}
.aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd;
.aplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #aaa;
height: 2px;
transition: all 0.5s ease;
}
.aplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 2px;
.aplayer-thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 10px;
width: 10px;
border-radius: 50%;
cursor: pointer;
transition: all .3s ease-in-out;
transform: scale(0);
}
}
}
}
.aplayer-time {
position: relative;
right: 0;
bottom: 4px;
height: 17px;
color: #999;
font-size: 11px;
padding-left: 7px;
.aplayer-time-inner {
vertical-align: middle;
}
.aplayer-icon {
cursor: pointer;
transition: all 0.2s ease;
path {
fill: #666;
}
&.aplayer-icon-loop {
margin-right: 2px;
}
&:hover {
path {
fill: #000;
}
}
&.aplayer-icon-menu {
display: none;
}
}
&.aplayer-time-narrow {
.aplayer-icon-mode {
display: none;
}
.aplayer-icon-menu {
display: none;
}
}
}
.aplayer-volume-wrap {
position: relative;
display: inline-block;
margin-left: 3px;
cursor: pointer !important;
&:hover .aplayer-volume-bar-wrap {
height: 40px;
}
.aplayer-volume-bar-wrap {
position: absolute;
bottom: 15px;
right: -3px;
width: 25px;
height: 0;
z-index: 99;
overflow: hidden;
transition: all .2s ease-in-out;
&.aplayer-volume-bar-wrap-active {
height: 40px;
}
.aplayer-volume-bar {
position: absolute;
bottom: 0;
right: 10px;
width: 5px;
height: 35px;
background: #aaa;
border-radius: 2.5px;
overflow: hidden;
.aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
transition: all 0.1s ease;
}
}
}
}
.aplayer-loading-icon {
display: none;
svg {
position: absolute;
animation: rotate 1s linear infinite;
}
}
}
}
.aplayer-lrc {
display: none;
position: relative;
height: $lrc-height;
text-align: center;
overflow: hidden;
margin: -10px 0 7px;
&:before {
position: absolute;
top: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 10%;
content: ' ';
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
&:after {
position: absolute;
bottom: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 33%;
content: ' ';
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 );
}
p {
font-size: 12px;
color: #666;
line-height: 16px !important;
height: 16px !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.5s ease-out;
opacity: 0.4;
overflow: hidden;
&.aplayer-lrc-current {
opacity: 1;
overflow: visible;
height: initial !important;
min-height: 16px;
}
}
&.aplayer-lrc-hide {
display: none;
}
.aplayer-lrc-contents {
width: 100%;
transition: all 0.5s ease-out;
user-select: text;
cursor: default;
}
}
.aplayer-list {
overflow: auto;
transition: all 0.5s ease;
will-change: height;
display: none;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #eee;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #ccc;
}
li {
position: relative;
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 12px;
border-top: 1px solid #e9e9e9;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
margin: 0;
&:first-child {
border-top: none;
}
&:hover {
background: #efefef;
}
&.aplayer-list-light {
background: #e9e9e9;
.aplayer-list-cur {
display: inline-block;
}
}
.aplayer-list-cur {
display: none;
width: 3px;
height: 22px;
position: absolute;
left: 0;
top: 5px;
cursor: pointer;
}
.aplayer-list-index {
color: #666;
margin-right: 12px;
cursor: pointer;
}
.aplayer-list-author {
color: #666;
float: right;
cursor: pointer;
}
}
}
.aplayer-notice {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
border-radius: 4px;
padding: 5px 10px;
transition: all .3s ease-in-out;
overflow: hidden;
color: #fff;
pointer-events: none;
background-color: #f4f4f5;
color: #909399;
}
.aplayer-miniswitcher {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #e6e6e6;
width: 18px;
border-radius: 0 2px 2px 0;
.aplayer-icon {
height: 100%;
width: 100%;
transform: rotateY(180deg);
transition: all 0.3s ease;
path {
fill: #666;
}
&:hover {
path {
fill: #000;
}
}
}
}
}
@keyframes aplayer-roll {
0%{left:0}
100%{left: -100%}
}
@keyframes rotate {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}

27
aplayer/src/js/bar.js Normal file
View File

@@ -0,0 +1,27 @@
class Bar {
constructor(template) {
this.elements = {};
this.elements.volume = template.volume;
this.elements.played = template.played;
this.elements.loaded = template.loaded;
}
/**
* Update progress
*
* @param {String} type - Point out which bar it is
* @param {Number} percentage
* @param {String} direction - Point out the direction of this bar, Should be height or width
*/
set(type, percentage, direction) {
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.elements[type].style[direction] = percentage * 100 + '%';
}
get(type, direction) {
return parseFloat(this.elements[type].style[direction]) / 100;
}
}
export default Bar;

View File

@@ -0,0 +1,164 @@
import utils from './utils';
import Icons from './icons';
class Controller {
constructor(player) {
this.player = player;
this.initPlayButton();
this.initPlayBar();
this.initOrderButton();
this.initLoopButton();
this.initMenuButton();
if (!utils.isMobile) {
this.initVolumeButton();
}
this.initMiniSwitcher();
this.initSkipButton();
this.initLrcButton();
}
initPlayButton() {
this.player.template.pic.addEventListener('click', () => {
this.player.toggle();
});
}
initPlayBar() {
const thumbMove = (e) => {
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
this.player.lrc && this.player.lrc.update(percentage * this.player.duration);
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.duration);
};
const thumbUp = (e) => {
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
this.player.seek(percentage * this.player.duration);
this.player.disableTimeupdate = false;
};
this.player.template.barWrap.addEventListener(utils.nameMap.dragStart, () => {
this.player.disableTimeupdate = true;
document.addEventListener(utils.nameMap.dragMove, thumbMove);
document.addEventListener(utils.nameMap.dragEnd, thumbUp);
});
}
initVolumeButton() {
this.player.template.volumeButton.addEventListener('click', () => {
if (this.player.audio.muted) {
this.player.volume(this.player.audio.volume, true);
} else {
this.player.audio.muted = true;
this.player.switchVolumeIcon();
this.player.bar.set('volume', 0, 'height');
}
});
const thumbMove = (e) => {
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.volume(percentage);
};
const thumbUp = (e) => {
this.player.template.volumeBarWrap.classList.remove('aplayer-volume-bar-wrap-active');
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.volume(percentage);
};
this.player.template.volumeBarWrap.addEventListener(utils.nameMap.dragStart, () => {
this.player.template.volumeBarWrap.classList.add('aplayer-volume-bar-wrap-active');
document.addEventListener(utils.nameMap.dragMove, thumbMove);
document.addEventListener(utils.nameMap.dragEnd, thumbUp);
});
}
initOrderButton() {
this.player.template.order.addEventListener('click', () => {
if (this.player.options.order === 'list') {
this.player.options.order = 'random';
this.player.template.order.innerHTML = Icons.orderRandom;
} else if (this.player.options.order === 'random') {
this.player.options.order = 'list';
this.player.template.order.innerHTML = Icons.orderList;
}
});
}
initLoopButton() {
this.player.template.loop.addEventListener('click', () => {
if (this.player.list.audios.length > 1) {
if (this.player.options.loop === 'one') {
this.player.options.loop = 'none';
this.player.template.loop.innerHTML = Icons.loopNone;
} else if (this.player.options.loop === 'none') {
this.player.options.loop = 'all';
this.player.template.loop.innerHTML = Icons.loopAll;
} else if (this.player.options.loop === 'all') {
this.player.options.loop = 'one';
this.player.template.loop.innerHTML = Icons.loopOne;
}
} else {
if (this.player.options.loop === 'one' || this.player.options.loop === 'all') {
this.player.options.loop = 'none';
this.player.template.loop.innerHTML = Icons.loopNone;
} else if (this.player.options.loop === 'none') {
this.player.options.loop = 'all';
this.player.template.loop.innerHTML = Icons.loopAll;
}
}
});
}
initMenuButton() {
this.player.template.menu.addEventListener('click', () => {
this.player.list.toggle();
});
}
initMiniSwitcher() {
this.player.template.miniSwitcher.addEventListener('click', () => {
this.player.setMode(this.player.mode === 'mini' ? 'normal' : 'mini');
});
}
initSkipButton() {
this.player.template.skipBackButton.addEventListener('click', () => {
this.player.skipBack();
});
this.player.template.skipForwardButton.addEventListener('click', () => {
this.player.skipForward();
});
this.player.template.skipPlayButton.addEventListener('click', () => {
this.player.toggle();
});
}
initLrcButton() {
this.player.template.lrcButton.addEventListener('click', () => {
if (this.player.template.lrcButton.classList.contains('aplayer-icon-lrc-inactivity')) {
this.player.template.lrcButton.classList.remove('aplayer-icon-lrc-inactivity');
this.player.lrc && this.player.lrc.show();
} else {
this.player.template.lrcButton.classList.add('aplayer-icon-lrc-inactivity');
this.player.lrc && this.player.lrc.hide();
}
});
}
}
export default Controller;

62
aplayer/src/js/events.js Normal file
View File

@@ -0,0 +1,62 @@
class Events {
constructor() {
this.events = {};
this.audioEvents = [
'abort',
'canplay',
'canplaythrough',
'durationchange',
'emptied',
'ended',
'error',
'loadeddata',
'loadedmetadata',
'loadstart',
'mozaudioavailable',
'pause',
'play',
'playing',
'progress',
'ratechange',
'seeked',
'seeking',
'stalled',
'suspend',
'timeupdate',
'volumechange',
'waiting',
];
this.playerEvents = ['destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide', 'lrcshow', 'lrchide'];
}
on(name, callback) {
if (this.type(name) && typeof callback === 'function') {
if (!this.events[name]) {
this.events[name] = [];
}
this.events[name].push(callback);
}
}
trigger(name, data) {
if (this.events[name] && this.events[name].length) {
for (let i = 0; i < this.events[name].length; i++) {
this.events[name][i](data);
}
}
}
type(name) {
if (this.playerEvents.indexOf(name) !== -1) {
return 'player';
} else if (this.audioEvents.indexOf(name) !== -1) {
return 'audio';
}
console.error(`Unknown event name: ${name}`);
return null;
}
}
export default Events;

35
aplayer/src/js/icons.js Normal file
View File

@@ -0,0 +1,35 @@
import play from '../assets/play.svg';
import pause from '../assets/pause.svg';
import volumeUp from '../assets/volume-up.svg';
import volumeDown from '../assets/volume-down.svg';
import volumeOff from '../assets/volume-off.svg';
import orderRandom from '../assets/order-random.svg';
import orderList from '../assets/order-list.svg';
import menu from '../assets/menu.svg';
import loopAll from '../assets/loop-all.svg';
import loopOne from '../assets/loop-one.svg';
import loopNone from '../assets/loop-none.svg';
import loading from '../assets/loading.svg';
import right from '../assets/right.svg';
import skip from '../assets/skip.svg';
import lrc from '../assets/lrc.svg';
const Icons = {
play: play,
pause: pause,
volumeUp: volumeUp,
volumeDown: volumeDown,
volumeOff: volumeOff,
orderRandom: orderRandom,
orderList: orderList,
menu: menu,
loopAll: loopAll,
loopOne: loopOne,
loopNone: loopNone,
loading: loading,
right: right,
skip: skip,
lrc: lrc,
};
export default Icons;

7
aplayer/src/js/index.js Normal file
View File

@@ -0,0 +1,7 @@
import '../css/index.scss';
import APlayer from './player';
/* global APLAYER_VERSION GIT_HASH */
console.log(`${'\n'} %c APlayer v${APLAYER_VERSION} ${GIT_HASH} %c http://aplayer.js.org ${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
export default APlayer;

195
aplayer/src/js/list.js Normal file
View File

@@ -0,0 +1,195 @@
import tplListItem from '../template/list-item.art';
import utils from './utils';
import smoothScroll from 'smoothscroll';
class List {
constructor(player) {
this.player = player;
this.index = 0;
this.audios = this.player.options.audio;
this.showing = true;
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
this.bindEvents();
}
bindEvents() {
this.player.template.list.addEventListener('click', (e) => {
let target;
if (e.target.tagName.toUpperCase() === 'LI') {
target = e.target;
} else {
target = e.target.parentElement;
}
const audioIndex = parseInt(target.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
if (audioIndex !== this.index) {
this.switch(audioIndex);
this.player.play();
} else {
this.player.toggle();
}
});
}
show() {
this.showing = true;
this.player.template.list.scrollTop = this.index * 33;
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
this.player.events.trigger('listshow');
}
hide() {
this.showing = false;
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
setTimeout(() => {
this.player.template.list.style.height = '0px';
this.player.events.trigger('listhide');
}, 0);
}
toggle() {
if (this.showing) {
this.hide();
} else {
this.show();
}
}
add(audios) {
this.player.events.trigger('listadd', {
audios: audios,
});
if (Object.prototype.toString.call(audios) !== '[object Array]') {
audios = [audios];
}
audios.map((item) => {
item.name = item.name || item.title || 'Audio name';
item.artist = item.artist || item.author || 'Audio artist';
item.cover = item.cover || item.pic;
item.type = item.type || 'normal';
return item;
});
const wasSingle = !(this.audios.length > 1);
const wasEmpty = this.audios.length === 0;
this.player.template.list.innerHTML += tplListItem({
theme: this.player.options.theme,
audio: audios,
index: this.audios.length + 1,
});
this.audios = this.audios.concat(audios);
if (wasSingle && this.audios.length > 1) {
this.player.container.classList.add('aplayer-withlist');
}
this.player.randomOrder = utils.randomOrder(this.audios.length);
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
this.player.template.listCurs[this.audios.length - 1].style.backgroundColor = audios.theme || this.player.options.theme;
if (wasEmpty) {
if (this.player.options.order === 'random') {
this.switch(this.player.randomOrder[0]);
} else {
this.switch(0);
}
}
}
remove(index) {
this.player.events.trigger('listremove', {
index: index,
});
if (this.audios[index]) {
if (this.audios.length > 1) {
const list = this.player.container.querySelectorAll('.aplayer-list li');
list[index].remove();
this.audios.splice(index, 1);
this.player.lrc && this.player.lrc.remove(index);
if (index === this.index) {
if (this.audios[index]) {
this.switch(index);
} else {
this.switch(index - 1);
}
}
if (this.index > index) {
this.index--;
}
for (let i = index; i < list.length; i++) {
list[i].getElementsByClassName('aplayer-list-index')[0].textContent = i;
}
if (this.audios.length === 1) {
this.player.container.classList.remove('aplayer-withlist');
}
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
} else {
this.clear();
}
}
}
switch(index) {
this.player.events.trigger('listswitch', {
index: index,
});
if (typeof index !== 'undefined' && this.audios[index]) {
this.index = index;
const audio = this.audios[this.index];
// set html
this.player.template.pic.style.backgroundImage = audio.cover ? `url('${audio.cover}')` : '';
this.player.theme(this.audios[this.index].theme || this.player.options.theme, this.index, false);
this.player.template.title.innerHTML = audio.name;
this.player.template.author.innerHTML = audio.artist ? ' - ' + audio.artist : '';
const light = this.player.container.getElementsByClassName('aplayer-list-light')[0];
if (light) {
light.classList.remove('aplayer-list-light');
}
this.player.container.querySelectorAll('.aplayer-list li')[this.index].classList.add('aplayer-list-light');
smoothScroll(this.index * 33, 500, null, this.player.template.list);
this.player.setAudio(audio);
this.player.lrc && this.player.lrc.switch(this.index);
this.player.lrc && this.player.lrc.update(0);
// set duration time
if (this.player.duration !== 1) {
// compatibility: Android browsers will output 1 at first
this.player.template.dtime.innerHTML = utils.secondToTime(this.player.duration);
}
}
}
clear() {
this.player.events.trigger('listclear');
this.index = 0;
this.player.container.classList.remove('aplayer-withlist');
this.player.pause();
this.audios = [];
this.player.lrc && this.player.lrc.clear();
this.player.audio.src = '';
this.player.template.list.innerHTML = '';
this.player.template.pic.style.backgroundImage = '';
this.player.theme(this.player.options.theme, this.index, false);
this.player.template.title.innerHTML = 'No audio';
this.player.template.author.innerHTML = '';
this.player.bar.set('loaded', 0, 'width');
this.player.template.dtime.innerHTML = utils.secondToTime(0);
}
}
export default List;

143
aplayer/src/js/lrc.js Normal file
View File

@@ -0,0 +1,143 @@
import tplLrc from '../template/lrc.art';
class Lrc {
constructor(options) {
this.container = options.container;
this.async = options.async;
this.player = options.player;
this.parsed = [];
this.index = 0;
this.current = [];
}
show() {
this.player.events.trigger('lrcshow');
this.player.template.lrcWrap.classList.remove('aplayer-lrc-hide');
}
hide() {
this.player.events.trigger('lrchide');
this.player.template.lrcWrap.classList.add('aplayer-lrc-hide');
}
toggle() {
if (this.player.template.lrcWrap.classList.contains('aplayer-lrc-hide')) {
this.show();
} else {
this.hide();
}
}
update(currentTime = this.player.audio.currentTime) {
if (this.index > this.current.length - 1 || currentTime < this.current[this.index][0] || (!this.current[this.index + 1] || currentTime >= this.current[this.index + 1][0])) {
for (let i = 0; i < this.current.length; i++) {
if (currentTime >= this.current[i][0] && (!this.current[i + 1] || currentTime < this.current[i + 1][0])) {
this.index = i;
this.container.style.transform = `translateY(${-this.index * 16}px)`;
this.container.style.webkitTransform = `translateY(${-this.index * 16}px)`;
this.container.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
this.container.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
}
}
}
}
switch(index) {
if (!this.parsed[index]) {
if (!this.async) {
if (this.player.list.audios[index].lrc) {
this.parsed[index] = this.parse(this.player.list.audios[index].lrc);
} else {
this.parsed[index] = [['00:00', 'Not available']];
}
} else {
this.parsed[index] = [['00:00', 'Loading']];
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (index === this.player.list.index && xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
this.parsed[index] = this.parse(xhr.responseText);
} else {
this.player.notice(`LRC file request fails: status ${xhr.status}`);
this.parsed[index] = [['00:00', 'Not available']];
}
this.container.innerHTML = tplLrc({
lyrics: this.parsed[index],
});
this.update(0);
this.current = this.parsed[index];
}
};
const apiurl = this.player.list.audios[index].lrc;
xhr.open('get', apiurl, true);
xhr.send(null);
}
}
this.container.innerHTML = tplLrc({
lyrics: this.parsed[index],
});
this.current = this.parsed[index];
this.update(0);
}
/**
* Parse lrc, suppose multiple time tag
*
* @param {String} lrc_s - Format:
* [mm:ss]lyric
* [mm:ss.xx]lyric
* [mm:ss.xxx]lyric
* [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
* [mm:ss.xx]<mm:ss.xx>lyric
*
* @return {String} [[time, text], [time, text], [time, text], ...]
*/
parse(lrc_s) {
if (lrc_s) {
lrc_s = lrc_s.replace(/([^\]^\n])\[/g, (match, p1) => p1 + '\n[');
const lyric = lrc_s.split('\n');
let lrc = [];
const lyricLen = lyric.length;
for (let i = 0; i < lyricLen; i++) {
// match lrc time
const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g);
// match lrc text
const lrcText = lyric[i]
.replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '')
.replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '')
.replace(/^\s+|\s+$/g, '');
if (lrcTimes) {
// handle multiple time tag
const timeLen = lrcTimes.length;
for (let j = 0; j < timeLen; j++) {
const oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j]);
const min2sec = oneTime[1] * 60;
const sec2sec = parseInt(oneTime[2]);
const msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0;
const lrcTime = min2sec + sec2sec + msec2sec;
lrc.push([lrcTime, lrcText]);
}
}
}
// sort by time
lrc = lrc.filter((item) => item[1]);
lrc.sort((a, b) => a[0] - b[0]);
return lrc;
} else {
return [];
}
}
remove(index) {
this.parsed.splice(index, 1);
}
clear() {
this.parsed = [];
this.container.innerHTML = '';
}
}
export default Lrc;

45
aplayer/src/js/options.js Normal file
View File

@@ -0,0 +1,45 @@
export default (options) => {
// default options
const defaultOption = {
container: options.element || document.getElementsByClassName('aplayer')[0],
mini: options.narrow || options.fixed || false,
fixed: false,
autoplay: false,
mutex: true,
lrcType: options.showlrc || options.lrc || 0,
preload: 'metadata',
theme: '#b7daff',
loop: 'all',
order: 'list',
volume: 0.7,
listFolded: options.fixed,
listMaxHeight: options.listmaxheight || 250,
audio: options.music || [],
storageName: 'aplayer-setting',
};
for (const defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !options.hasOwnProperty(defaultKey)) {
options[defaultKey] = defaultOption[defaultKey];
}
}
options.listMaxHeight = parseFloat(options.listMaxHeight);
if (Object.prototype.toString.call(options.audio) !== '[object Array]') {
options.audio = [options.audio];
}
options.audio.map((item) => {
item.name = item.name || item.title || 'Audio name';
item.artist = item.artist || item.author || 'Audio artist';
item.cover = item.cover || item.pic;
item.type = item.type || 'normal';
return item;
});
if (options.audio.length <= 1 && options.loop === 'one') {
options.loop = 'all';
}
return options;
};

491
aplayer/src/js/player.js Normal file
View File

@@ -0,0 +1,491 @@
import Promise from 'promise-polyfill';
import utils from './utils';
import Icons from './icons';
import handleOption from './options';
import Template from './template';
import Bar from './bar';
import Storage from './storage';
import Lrc from './lrc';
import Controller from './controller';
import Timer from './timer';
import Events from './events';
import List from './list';
const instances = [];
class APlayer {
/**
* APlayer constructor function
*
* @param {Object} options - See README
* @constructor
*/
constructor(options) {
this.options = handleOption(options);
this.container = this.options.container;
this.paused = true;
this.playedPromise = Promise.resolve();
this.mode = 'normal';
this.randomOrder = utils.randomOrder(this.options.audio.length);
this.container.classList.add('aplayer');
if (this.options.lrcType && !this.options.fixed) {
this.container.classList.add('aplayer-withlrc');
}
if (this.options.audio.length > 1) {
this.container.classList.add('aplayer-withlist');
}
if (utils.isMobile) {
this.container.classList.add('aplayer-mobile');
}
this.arrow = this.container.offsetWidth <= 300;
if (this.arrow) {
this.container.classList.add('aplayer-arrow');
}
// save lrc
if (this.options.lrcType === 2 || this.options.lrcType === true) {
const lrcEle = this.container.getElementsByClassName('aplayer-lrc-content');
for (let i = 0; i < lrcEle.length; i++) {
if (this.options.audio[i]) {
this.options.audio[i].lrc = lrcEle[i].innerHTML;
}
}
}
this.template = new Template({
container: this.container,
options: this.options,
randomOrder: this.randomOrder,
});
if (this.options.fixed) {
this.container.classList.add('aplayer-fixed');
this.template.body.style.width = this.template.body.offsetWidth - 18 + 'px';
}
if (this.options.mini) {
this.setMode('mini');
this.template.info.style.display = 'block';
}
if (this.template.info.offsetWidth < 200) {
this.template.time.classList.add('aplayer-time-narrow');
}
if (this.options.lrcType) {
this.lrc = new Lrc({
container: this.template.lrc,
async: this.options.lrcType === 3,
player: this,
});
}
this.events = new Events();
this.storage = new Storage(this);
this.bar = new Bar(this.template);
this.controller = new Controller(this);
this.timer = new Timer(this);
this.list = new List(this);
this.initAudio();
this.bindEvents();
if (this.options.order === 'random') {
this.list.switch(this.randomOrder[0]);
} else {
this.list.switch(0);
}
// autoplay
if (this.options.autoplay) {
this.play();
}
instances.push(this);
}
initAudio() {
this.audio = document.createElement('audio');
this.audio.preload = this.options.preload;
for (let i = 0; i < this.events.audioEvents.length; i++) {
this.audio.addEventListener(this.events.audioEvents[i], (e) => {
this.events.trigger(this.events.audioEvents[i], e);
});
}
this.volume(this.storage.get('volume'), true);
}
bindEvents() {
this.on('play', () => {
if (this.paused) {
this.setUIPlaying();
}
});
this.on('pause', () => {
if (!this.paused) {
this.setUIPaused();
}
});
this.on('timeupdate', () => {
if (!this.disableTimeupdate) {
this.bar.set('played', this.audio.currentTime / this.duration, 'width');
this.lrc && this.lrc.update();
const currentTime = utils.secondToTime(this.audio.currentTime);
if (this.template.ptime.innerHTML !== currentTime) {
this.template.ptime.innerHTML = currentTime;
}
}
});
// show audio time: the metadata has loaded or changed
this.on('durationchange', () => {
if (this.duration !== 1) {
// compatibility: Android browsers will output 1 at first
this.template.dtime.innerHTML = utils.secondToTime(this.duration);
}
});
// Can seek now
this.on('loadedmetadata', () => {
this.seek(0);
if (!this.paused) {
this.audio.play();
}
});
// show audio loaded bar: to inform interested parties of progress downloading the media
this.on('canplay', () => {
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration : 0;
this.bar.set('loaded', percentage, 'width');
});
this.on('progress', () => {
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration : 0;
this.bar.set('loaded', percentage, 'width');
});
// audio download error: an error occurs
let skipTime;
this.on('error', () => {
if (this.list.audios.length > 1) {
this.notice('An audio error has occurred, player will skip forward in 2 seconds.');
skipTime = setTimeout(() => {
this.skipForward();
if (!this.paused) {
this.play();
}
}, 2000);
} else if (this.list.audios.length === 1) {
this.notice('An audio error has occurred.');
}
});
this.events.on('listswitch', () => {
skipTime && clearTimeout(skipTime);
});
// multiple audio play
this.on('ended', () => {
if (this.options.loop === 'none') {
if (this.options.order === 'list') {
if (this.list.index < this.list.audios.length - 1) {
this.list.switch((this.list.index + 1) % this.list.audios.length);
this.play();
} else {
this.list.switch((this.list.index + 1) % this.list.audios.length);
this.pause();
}
} else if (this.options.order === 'random') {
if (this.randomOrder.indexOf(this.list.index) < this.randomOrder.length - 1) {
this.list.switch(this.nextIndex());
this.play();
} else {
this.list.switch(this.nextIndex());
this.pause();
}
}
} else if (this.options.loop === 'one') {
this.list.switch(this.list.index);
this.play();
} else if (this.options.loop === 'all') {
this.skipForward();
this.play();
}
});
}
setAudio(audio) {
if (this.hls) {
this.hls.destroy();
this.hls = null;
}
let type = audio.type;
if (this.options.customAudioType && this.options.customAudioType[type]) {
if (Object.prototype.toString.call(this.options.customAudioType[type]) === '[object Function]') {
this.options.customAudioType[type](this.audio, audio, this);
} else {
console.error(`Illegal customType: ${type}`);
}
} else {
if (!type || type === 'auto') {
if (/m3u8(#|\?|$)/i.exec(audio.url)) {
type = 'hls';
} else {
type = 'normal';
}
}
if (type === 'hls') {
if (window.Hls.isSupported()) {
this.hls = new window.Hls();
this.hls.loadSource(audio.url);
this.hls.attachMedia(this.audio);
} else if (this.audio.canPlayType('application/x-mpegURL') || this.audio.canPlayType('application/vnd.apple.mpegURL')) {
this.audio.src = audio.url;
} else {
this.notice('Error: HLS is not supported.');
}
} else if (type === 'normal') {
this.audio.src = audio.url;
}
}
}
theme(color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index, isReset = true) {
if (isReset) {
this.list.audios[index] && (this.list.audios[index].theme = color);
}
this.template.listCurs[index] && (this.template.listCurs[index].style.backgroundColor = color);
if (index === this.list.index) {
this.template.pic.style.backgroundColor = color;
this.template.played.style.background = color;
this.template.thumb.style.background = color;
this.template.volume.style.background = color;
}
}
seek(time) {
time = Math.max(time, 0);
time = Math.min(time, this.duration);
this.audio.currentTime = time;
this.bar.set('played', time / this.duration, 'width');
this.template.ptime.innerHTML = utils.secondToTime(time);
}
get duration() {
return isNaN(this.audio.duration) ? 0 : this.audio.duration;
}
setUIPlaying() {
if (this.paused) {
this.paused = false;
this.template.button.classList.remove('aplayer-play');
this.template.button.classList.add('aplayer-pause');
this.template.button.innerHTML = '';
setTimeout(() => {
this.template.button.innerHTML = Icons.pause;
}, 100);
this.template.skipPlayButton.innerHTML = Icons.pause;
}
this.timer.enable('loading');
if (this.options.mutex) {
for (let i = 0; i < instances.length; i++) {
if (this !== instances[i]) {
instances[i].pause();
}
}
}
}
play() {
this.setUIPlaying();
const playPromise = this.audio.play();
if (playPromise) {
playPromise.catch((e) => {
console.warn(e);
if (e.name === 'NotAllowedError') {
this.setUIPaused();
}
});
}
}
setUIPaused() {
if (!this.paused) {
this.paused = true;
this.template.button.classList.remove('aplayer-pause');
this.template.button.classList.add('aplayer-play');
this.template.button.innerHTML = '';
setTimeout(() => {
this.template.button.innerHTML = Icons.play;
}, 100);
this.template.skipPlayButton.innerHTML = Icons.play;
}
this.container.classList.remove('aplayer-loading');
this.timer.disable('loading');
}
pause() {
this.setUIPaused();
this.audio.pause();
}
switchVolumeIcon() {
if (this.volume() >= 0.95) {
this.template.volumeButton.innerHTML = Icons.volumeUp;
} else if (this.volume() > 0) {
this.template.volumeButton.innerHTML = Icons.volumeDown;
} else {
this.template.volumeButton.innerHTML = Icons.volumeOff;
}
}
/**
* Set volume
*/
volume(percentage, nostorage) {
percentage = parseFloat(percentage);
if (!isNaN(percentage)) {
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.bar.set('volume', percentage, 'height');
if (!nostorage) {
this.storage.set('volume', percentage);
}
this.audio.volume = percentage;
if (this.audio.muted) {
this.audio.muted = false;
}
this.switchVolumeIcon();
}
return this.audio.muted ? 0 : this.audio.volume;
}
/**
* bind events
*/
on(name, callback) {
this.events.on(name, callback);
}
/**
* toggle between play and pause
*/
toggle() {
if (this.template.button.classList.contains('aplayer-play')) {
this.play();
} else if (this.template.button.classList.contains('aplayer-pause')) {
this.pause();
}
}
// abandoned
switchAudio(index) {
this.list.switch(index);
}
// abandoned
addAudio(audios) {
this.list.add(audios);
}
// abandoned
removeAudio(index) {
this.list.remove(index);
}
/**
* destroy this player
*/
destroy() {
instances.splice(instances.indexOf(this), 1);
this.pause();
this.container.innerHTML = '';
this.audio.src = '';
this.timer.destroy();
this.events.trigger('destroy');
}
setMode(mode = 'normal') {
this.mode = mode;
if (mode === 'mini') {
this.container.classList.add('aplayer-narrow');
} else if (mode === 'normal') {
this.container.classList.remove('aplayer-narrow');
}
}
notice(text, time = 2000, opacity = 0.8) {
this.template.notice.innerHTML = text;
this.template.notice.style.opacity = opacity;
if (this.noticeTime) {
clearTimeout(this.noticeTime);
}
this.events.trigger('noticeshow', {
text: text,
});
if (time) {
this.noticeTime = setTimeout(() => {
this.template.notice.style.opacity = 0;
this.events.trigger('noticehide');
}, time);
}
}
prevIndex() {
if (this.list.audios.length > 1) {
if (this.options.order === 'list') {
return this.list.index - 1 < 0 ? this.list.audios.length - 1 : this.list.index - 1;
} else if (this.options.order === 'random') {
const index = this.randomOrder.indexOf(this.list.index);
if (index === 0) {
return this.randomOrder[this.randomOrder.length - 1];
} else {
return this.randomOrder[index - 1];
}
}
} else {
return 0;
}
}
nextIndex() {
if (this.list.audios.length > 1) {
if (this.options.order === 'list') {
return (this.list.index + 1) % this.list.audios.length;
} else if (this.options.order === 'random') {
const index = this.randomOrder.indexOf(this.list.index);
if (index === this.randomOrder.length - 1) {
return this.randomOrder[0];
} else {
return this.randomOrder[index + 1];
}
}
} else {
return 0;
}
}
skipBack() {
this.list.switch(this.prevIndex());
}
skipForward() {
this.list.switch(this.nextIndex());
}
static get version() {
/* global APLAYER_VERSION */
return APLAYER_VERSION;
}
}
export default APlayer;

24
aplayer/src/js/storage.js Normal file
View File

@@ -0,0 +1,24 @@
import utils from './utils';
class Storage {
constructor(player) {
this.storageName = player.options.storageName;
this.data = JSON.parse(utils.storage.get(this.storageName));
if (!this.data) {
this.data = {};
}
this.data.volume = this.data.volume || player.options.volume;
}
get(key) {
return this.data[key];
}
set(key, value) {
this.data[key] = value;
utils.storage.set(this.storageName, JSON.stringify(this.data));
}
}
export default Storage;

View File

@@ -0,0 +1,62 @@
import Icons from './icons';
import tplPlayer from '../template/player.art';
class Template {
constructor(options) {
this.container = options.container;
this.options = options.options;
this.randomOrder = options.randomOrder;
this.init();
}
init() {
let cover = '';
if (this.options.audio.length) {
if (this.options.order === 'random') {
cover = this.options.audio[this.randomOrder[0]].cover;
} else {
cover = this.options.audio[0].cover;
}
}
this.container.innerHTML = tplPlayer({
options: this.options,
icons: Icons,
cover: cover,
getObject: (obj) => obj,
});
this.lrc = this.container.querySelector('.aplayer-lrc-contents');
this.lrcWrap = this.container.querySelector('.aplayer-lrc');
this.ptime = this.container.querySelector('.aplayer-ptime');
this.info = this.container.querySelector('.aplayer-info');
this.time = this.container.querySelector('.aplayer-time');
this.barWrap = this.container.querySelector('.aplayer-bar-wrap');
this.button = this.container.querySelector('.aplayer-button');
this.body = this.container.querySelector('.aplayer-body');
this.list = this.container.querySelector('.aplayer-list');
this.listCurs = this.container.querySelectorAll('.aplayer-list-cur');
this.played = this.container.querySelector('.aplayer-played');
this.loaded = this.container.querySelector('.aplayer-loaded');
this.thumb = this.container.querySelector('.aplayer-thumb');
this.volume = this.container.querySelector('.aplayer-volume');
this.volumeBar = this.container.querySelector('.aplayer-volume-bar');
this.volumeButton = this.container.querySelector('.aplayer-time button');
this.volumeBarWrap = this.container.querySelector('.aplayer-volume-bar-wrap');
this.loop = this.container.querySelector('.aplayer-icon-loop');
this.order = this.container.querySelector('.aplayer-icon-order');
this.menu = this.container.querySelector('.aplayer-icon-menu');
this.pic = this.container.querySelector('.aplayer-pic');
this.title = this.container.querySelector('.aplayer-title');
this.author = this.container.querySelector('.aplayer-author');
this.dtime = this.container.querySelector('.aplayer-dtime');
this.notice = this.container.querySelector('.aplayer-notice');
this.miniSwitcher = this.container.querySelector('.aplayer-miniswitcher');
this.skipBackButton = this.container.querySelector('.aplayer-icon-back');
this.skipForwardButton = this.container.querySelector('.aplayer-icon-forward');
this.skipPlayButton = this.container.querySelector('.aplayer-icon-play');
this.lrcButton = this.container.querySelector('.aplayer-icon-lrc');
}
}
export default Template;

67
aplayer/src/js/timer.js Normal file
View File

@@ -0,0 +1,67 @@
class Timer {
constructor(player) {
this.player = player;
window.requestAnimationFrame = (() =>
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
})();
this.types = ['loading'];
this.init();
}
init() {
this.types.forEach((item) => {
this[`init${item}Checker`]();
});
}
initloadingChecker() {
let lastPlayPos = 0;
let currentPlayPos = 0;
let bufferingDetected = false;
this.loadingChecker = setInterval(() => {
if (this.enableloadingChecker) {
// whether the audio is buffering
currentPlayPos = this.player.audio.currentTime;
if (!bufferingDetected && currentPlayPos === lastPlayPos && !this.player.audio.paused) {
this.player.container.classList.add('aplayer-loading');
bufferingDetected = true;
}
if (bufferingDetected && currentPlayPos > lastPlayPos && !this.player.audio.paused) {
this.player.container.classList.remove('aplayer-loading');
bufferingDetected = false;
}
lastPlayPos = currentPlayPos;
}
}, 100);
}
enable(type) {
this[`enable${type}Checker`] = true;
if (type === 'fps') {
this.initfpsChecker();
}
}
disable(type) {
this[`enable${type}Checker`] = false;
}
destroy() {
this.types.forEach((item) => {
this[`enable${item}Checker`] = false;
this[`${item}Checker`] && clearInterval(this[`${item}Checker`]);
});
}
}
export default Timer;

55
aplayer/src/js/utils.js Normal file
View File

@@ -0,0 +1,55 @@
const isMobile = /mobile/i.test(window.navigator.userAgent);
const utils = {
/**
* Parse second to time string
*
* @param {Number} second
* @return {String} 00:00 or 00:00:00
*/
secondToTime: (second) => {
const add0 = (num) => (num < 10 ? '0' + num : '' + num);
const hour = Math.floor(second / 3600);
const min = Math.floor((second - hour * 3600) / 60);
const sec = Math.floor(second - hour * 3600 - min * 60);
return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
},
isMobile: isMobile,
storage: {
set: (key, value) => {
localStorage.setItem(key, value);
},
get: (key) => localStorage.getItem(key),
},
nameMap: {
dragStart: isMobile ? 'touchstart' : 'mousedown',
dragMove: isMobile ? 'touchmove' : 'mousemove',
dragEnd: isMobile ? 'touchend' : 'mouseup',
},
/**
* get random order, using FisherYates shuffle
*/
randomOrder: (length) => {
function shuffle(arr) {
for (let i = arr.length - 1; i >= 0; i--) {
const randomIndex = Math.floor(Math.random() * (i + 1));
const itemAtIndex = arr[randomIndex];
arr[randomIndex] = arr[i];
arr[i] = itemAtIndex;
}
return arr;
}
return shuffle(
[...Array(length)].map(function(item, i) {
return i;
})
);
},
};
export default utils;

View File

@@ -0,0 +1,8 @@
{{each audio}}
<li>
<span class="aplayer-list-cur" style="background-color: {{ $value.theme || theme }};"></span>
<span class="aplayer-list-index">{{ $index + index }}</span>
<span class="aplayer-list-title">{{ $value.name }}</span>
<span class="aplayer-list-author">{{ $value.artist }}</span>
</li>
{{/each}}

View File

@@ -0,0 +1,3 @@
{{each lyrics}}
<p{{ if $index === 0 }} class="aplayer-lrc-current"{{ /if }}>{{$value[1]}}</p>
{{/each}}

View File

@@ -0,0 +1,145 @@
{{ if !options.fixed }}
<div class="aplayer-body">
<div class="aplayer-pic" style="{{ if cover }}background-image: url(&quot;{{ cover }}&quot;);{{ /if }}background-color: {{ options.theme }};">
<div class="aplayer-button aplayer-play">{{@ icons.play }}</div>
</div>
<div class="aplayer-info">
<div class="aplayer-music">
<span class="aplayer-title">No audio</span>
<span class="aplayer-author"></span>
</div>
<div class="aplayer-lrc">
<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>
</div>
<div class="aplayer-controller">
<div class="aplayer-bar-wrap">
<div class="aplayer-bar">
<div class="aplayer-loaded" style="width: 0"></div>
<div class="aplayer-played" style="width: 0; background: {{ options.theme }};">
<span class="aplayer-thumb" style="background: {{ options.theme }};">
<span class="aplayer-loading-icon">{{@ icons.loading }}</span>
</span>
</div>
</div>
</div>
<div class="aplayer-time">
<span class="aplayer-time-inner">
<span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
</span>
<span class="aplayer-icon aplayer-icon-back">
{{@ icons.skip }}
</span>
<span class="aplayer-icon aplayer-icon-play">
{{@ icons.play }}
</span>
<span class="aplayer-icon aplayer-icon-forward">
{{@ icons.skip }}
</span>
<div class="aplayer-volume-wrap">
<button type="button" class="aplayer-icon aplayer-icon-volume-down">
{{@ icons.volumeDown }}
</button>
<div class="aplayer-volume-bar-wrap">
<div class="aplayer-volume-bar">
<div class="aplayer-volume" style="height: 80%; background: {{ options.theme }};"></div>
</div>
</div>
</div>
<button type="button" class="aplayer-icon aplayer-icon-order">
{{ if options.order === 'list' }}{{@ icons.orderList }}{{ else if options.order === 'random' }}{{@ icons.orderRandom }}{{ /if }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-loop">
{{ if options.loop === 'one' }}{{@ icons.loopOne }}{{ else if options.loop === 'all' }}{{@ icons.loopAll }}{{ else if options.loop === 'none' }}{{@ icons.loopNone }}{{ /if }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-menu">
{{@ icons.menu }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-lrc">
{{@ icons.lrc }}
</button>
</div>
</div>
</div>
<div class="aplayer-notice"></div>
<div class="aplayer-miniswitcher"><button class="aplayer-icon">{{@ icons.right }}</button></div>
</div>
<ol class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}">
{{ include './list-item.art' getObject({
theme: options.theme,
audio: options.audio,
index: 1
}) }}
</ol>
{{ else }}
<ol class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}">
{{ include './list-item.art' getObject({
theme: options.theme,
audio: options.audio,
index: 1
}) }}
</ol>
<div class="aplayer-body">
<div class="aplayer-pic" style="{{ if cover }}background-image: url(&quot;{{ cover }}&quot;);{{ /if }}background-color: {{ options.theme }};">
<div class="aplayer-button aplayer-play">{{@ icons.play }}</div>
</div>
<div class="aplayer-info" style="display: none;">
<div class="aplayer-music">
<span class="aplayer-title">No audio</span>
<span class="aplayer-author"></span>
</div>
<div class="aplayer-controller">
<div class="aplayer-bar-wrap">
<div class="aplayer-bar">
<div class="aplayer-loaded" style="width: 0"></div>
<div class="aplayer-played" style="width: 0; background: {{ options.theme }};">
<span class="aplayer-thumb" style="background: {{ options.theme }};">
<span class="aplayer-loading-icon">{{@ icons.loading }}</span>
</span>
</div>
</div>
</div>
<div class="aplayer-time">
<span class="aplayer-time-inner">
<span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
</span>
<span class="aplayer-icon aplayer-icon-back">
{{@ icons.skip }}
</span>
<span class="aplayer-icon aplayer-icon-play">
{{@ icons.play }}
</span>
<span class="aplayer-icon aplayer-icon-forward">
{{@ icons.skip }}
</span>
<div class="aplayer-volume-wrap">
<button type="button" class="aplayer-icon aplayer-icon-volume-down">
{{@ icons.volumeDown }}
</button>
<div class="aplayer-volume-bar-wrap">
<div class="aplayer-volume-bar">
<div class="aplayer-volume" style="height: 80%; background: {{ options.theme }};"></div>
</div>
</div>
</div>
<button type="button" class="aplayer-icon aplayer-icon-order">
{{ if options.order === 'list' }}{{@ icons.orderList }}{{ else if options.order === 'random' }}{{@ icons.orderRandom }}{{ /if }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-loop">
{{ if options.loop === 'one' }}{{@ icons.loopOne }}{{ else if options.loop === 'all' }}{{@ icons.loopAll }}{{ else if options.loop === 'none' }}{{@ icons.loopNone }}{{ /if }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-menu">
{{@ icons.menu }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-lrc">
{{@ icons.lrc }}
</button>
</div>
</div>
</div>
<div class="aplayer-notice"></div>
<div class="aplayer-miniswitcher"><button class="aplayer-icon">{{@ icons.right }}</button></div>
</div>
<div class="aplayer-lrc">
<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>
</div>
{{/if}}

View File

@@ -0,0 +1,115 @@
const path = require('path');
const webpack = require('webpack');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: {
APlayer: './src/js/index.js',
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].js',
library: '[name]',
libraryTarget: 'umd',
libraryExport: 'default',
umdNamedDefine: true,
publicPath: '/',
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.scss'],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env'],
},
},
],
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer, cssnano],
},
},
'sass-loader',
],
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 40000,
},
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
{
test: /\.art$/,
loader: 'art-template-loader',
},
],
},
devServer: {
compress: true,
contentBase: path.resolve(__dirname, '..', 'demo'),
clientLogLevel: 'none',
quiet: false,
open: true,
historyApiFallback: {
disableDotRule: true,
},
watchOptions: {
ignored: /node_modules/,
},
},
plugins: [
new webpack.DefinePlugin({
APLAYER_VERSION: `"${require('../package.json').version}"`,
GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
performance: {
hints: false,
},
};

View File

@@ -0,0 +1,100 @@
const path = require('path');
const webpack = require('webpack');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
mode: 'production',
bail: true,
devtool: 'source-map',
entry: {
APlayer: './src/js/index.js',
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].min.js',
library: '[name]',
libraryTarget: 'umd',
libraryExport: 'default',
umdNamedDefine: true,
publicPath: '/',
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.scss'],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.js$/,
use: [
'template-string-optimize-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env'],
},
},
],
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer, cssnano],
},
},
'sass-loader',
],
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 40000,
},
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
{
test: /\.art$/,
loader: 'art-template-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
APLAYER_VERSION: `"${require('../package.json').version}"`,
GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};

9868
aplayer/yarn.lock Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2022/03/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2022/03/17/The-Righteous-Mind/">
<div class="page_title" style="background-image: url(/images/books/therighteousmind-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> The Righteous Mind </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2022-03-17</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2022</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2022-03-17</div>
<div class="archive-timeline-post-content">
<a
href="/2022/03/17/The-Righteous-Mind/"
class="archive-timeline-post-item">
The Righteous Mind
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2022/10/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2022/10/15/Live-Not-By-Lies/">
<div class="page_title" style="background-image: url(/images/books/livenotbylies-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Live Not By Lies </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2022-10-15</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Faith/">Faith</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2022</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2022-10-15</div>
<div class="archive-timeline-post-content">
<a
href="/2022/10/15/Live-Not-By-Lies/"
class="archive-timeline-post-item">
Live Not By Lies
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2023/10/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2023/10/10/The-Cost-of-Discipleship/">
<div class="page_title" style="background-image: url(/images/books/costofdiscipleship-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> The Cost of Discipleship </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2023-10-10</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Faith/">Faith</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2023</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2023-10-10</div>
<div class="archive-timeline-post-content">
<a
href="/2023/10/10/The-Cost-of-Discipleship/"
class="archive-timeline-post-item">
The Cost of Discipleship
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2023/11/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2023/11/05/Copper-Sun/">
<div class="page_title" style="background-image: url(/images/books/coppersun-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Copper Sun </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2023-11-05</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2023</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2023-11-05</div>
<div class="archive-timeline-post-content">
<a
href="/2023/11/05/Copper-Sun/"
class="archive-timeline-post-item">
Copper Sun
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2023/12/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/">
<div class="page_title" style="background-image: url(/images/books/uscatechismforadults-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> US Catholic Catechism for Adults </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2023-12-23</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Faith/">Faith</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2023</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2023-12-23</div>
<div class="archive-timeline-post-content">
<a
href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"
class="archive-timeline-post-item">
US Catholic Catechism for Adults
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2024/01/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/">
<div class="page_title" style="background-image: url(/images/books/startwithwhy-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Start with Why </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2024-01-29</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2024</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2024-01-29</div>
<div class="archive-timeline-post-content">
<a
href="/2024/01/29/Simon-Sinek-Start-with-Why/"
class="archive-timeline-post-item">
Start with Why
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2024/02/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2024/02/09/expectations/">
<div class="page_title" style="background-image: url(/images/dilbert-expectations-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Setting Expectations </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2024-02-09</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2024</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2024-02-09</div>
<div class="archive-timeline-post-content">
<a
href="/2024/02/09/expectations/"
class="archive-timeline-post-item">
Setting Expectations
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

View File

@@ -1,261 +1,751 @@
<!DOCTYPE HTML>
<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>Archive</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Archive">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/archives/2024/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2024/02/09/expectations/">
<div class="page_title" style="background-image: url(/images/dilbert-expectations-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Setting Expectations </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2024-02-09</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/">
<div class="page_title" style="background-image: url(/images/books/startwithwhy-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> Start with Why </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2024-01-29</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
<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">
</div>
</section>
<a href="/categories/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<h1 class="widget-title">Archive</h1>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2024</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2024-02-09</div>
<div class="archive-timeline-post-content">
<a
href="/2024/02/09/expectations/"
class="archive-timeline-post-item">
Setting Expectations
</a>
</div>
</div>
</div>
</div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2024-01-29</div>
<div class="archive-timeline-post-content">
<a
href="/2024/01/29/Simon-Sinek-Start-with-Why/"
class="archive-timeline-post-item">
Start with Why
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

BIN
avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
blog_demo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

File diff suppressed because it is too large Load Diff

View File

@@ -1,265 +1,768 @@
<!DOCTYPE HTML>
<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>Categories</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Categories">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/categories/Books/page/2/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2022/05/02/The-Hero-Code/">
<div class="page_title" style="background-image: url(/images/books/theherocode-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> The Hero Code </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2022-05-02</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2022/03/17/The-Righteous-Mind/">
<div class="page_title" style="background-image: url(/images/books/therighteousmind-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> The Righteous Mind </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2022-03-17</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Leadership/">Leadership</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
<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">
</div>
</section>
<a href="/categories/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<div class="pagination" >
<a class="extend prev" rel="prev" href="/categories/Books/">pre</a><a class="page-number" href="/categories/Books/">1</a><span class="page-number current">2</span>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content category-page-card">
<div class="categories-page-title">Categories&nbsp-&nbspBooks</div>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2022</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2022-05-02</div>
<div class="archive-timeline-post-content">
<a
href="/2022/05/02/The-Hero-Code/"
class="archive-timeline-post-item">
The Hero Code
</a>
</div>
</div>
</div>
</div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2022-03-17</div>
<div class="archive-timeline-post-content">
<a
href="/2022/03/17/The-Righteous-Mind/"
class="archive-timeline-post-item">
The Righteous Mind
</a>
</div>
</div>
</div>
</div>
</div>
<div class="nav">
<div class="nav-item-prev">
<a
href="/categories/Books/"
class="nav-link">
<i class="iconfont icon-left nav-prev-icon"></i>
<div>
<div class="nav-label">Prev</div>
</div>
</a>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,233 +1,735 @@
<!DOCTYPE HTML>
<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>Categories</title>
<head>
<link rel="bookmark" type="image/x-icon" href="/img/logo_moogle.png"/>
<link rel="shortcut icon" href="/img/logo_moogle.png">
<title>
AKLabs
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/mic_main.css" />
<link rel="stylesheet" href="/css/dropdownMenu.css" />
<meta name="keywords" content="aklabs andrew kesterson andrewkesterson andrew.kesterson andrewk akesterson" />
<meta
property="og:title"
content="Categories">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css" />
</noscript>
<style type="text/css">
body:before {
content: ' ';
position: fixed;
top: 0;
background: url('/img/bg_charlie.jpg') center 0 no-repeat;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
</style>
<meta
property="og:url"
content="https://www.aklabs.net/categories/Outdoors/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
<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">
<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>
// 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;
} 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;
} 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();
}
};
setDarkmode();
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></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">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>
<body class="is-loading">
<!-- Wrapper 外包 s-->
<div id="wrapper" class="fade-in overlay">
<!-- Intro 头部显示 s -->
<div id="intro">
<h1>AKLabs </h1>
<p> Home of the outlier
</p>
<ul class="actions">
<li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<body>
<div class="wrapper">
<!-- Intro 头部显示 e -->
<!-- Header 头部logo start -->
<header id="header">
<a href="/" class="logo">AKLabs</a>
</header>
<!-- Header 头部logo end -->
<!-- Nav 导航条 start -->
<nav id="nav" class="special" >
<ul class="menu links" >
<!-- Homepage 主页 -->
<li >
<a href="/" rel="nofollow">Home</a>
</li>
<!-- categories_name 分类 -->
<nav class="navbar">
<div class="navbar-logo">
<a class="navbar-logo-main" href="/">
<li class="active">
<a href="#s1">categories</a>
<ul class="submenu">
<li>
<a class="category-link" href="/categories/Books/">Books</a></li><li><a class="category-link" href="/categories/Faith/">Faith</a></li><li><a class="category-link" href="/categories/Leadership/">Leadership</a></li><li><a class="category-link" href="/categories/Outdoors/">Outdoors</a>
</ul>
</li>
<span class="navbar-logo-dsc">AKLabs</span>
</a>
</div>
<div class="navbar-menu">
<!-- archives 归档 -->
<a
href="/"
class="navbar-menu-item">
<li class="active">
<a href="#s1">articles</a>
<ul class="submenu">
<li>
<a class="archive-link" href="/archives/2024/02/">February 2024</a></li><li><a class="archive-link" href="/archives/2024/01/">January 2024</a></li><li><a class="archive-link" href="/archives/2023/12/">December 2023</a></li><li><a class="archive-link" href="/archives/2023/11/">November 2023</a></li><li><a class="archive-link" href="/archives/2023/10/">October 2023</a></li><li><a class="archive-link" href="/archives/2023/09/">September 2023</a></li><li><a class="archive-link" href="/archives/2022/10/">October 2022</a></li><li><a class="archive-link" href="/archives/2022/05/">May 2022</a></li><li><a class="archive-link" href="/archives/2022/03/">March 2022</a>
</ul>
</li>
Home
</a>
<!-- Pages 自定义 -->
<a
href="/archives"
class="navbar-menu-item">
<li>
<a href="/family/" title="family man">
family man
</a>
</li>
Archive
<li>
<a href="/tech/" title="tech leader">
tech leader
</a>
</li>
</a>
<li>
<a href="/servant/" title="civil servant">
civil servant
</a>
</li>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
</ul>
<!-- icons 图标 -->
<ul class="icons">
<a
href="/categories"
class="navbar-menu-item">
<li>
<a title="github" href="https://github.com/akesterson" target="_blank" rel="noopener">
<i class="icon fa fa-github"></i>
</a>
</li>
Categories
<li>
<a title="linkedin" href="https://www.linkedin.com/in/andrewkesterson/" target="_blank" rel="noopener">
<i class="icon fa fa-linkedin"></i>
</a>
</li>
</a>
<li>
<a title="facebook" href="https://www.facebook.com/andrew.kesterson.16/" target="_blank" rel="noopener">
<i class="icon fa fa-facebook"></i>
</a>
</li>
<a
href="/about"
class="navbar-menu-item">
<li>
<a title="itch-io" href="https://akesterson.itch.io/" target="_blank" rel="noopener">
<i class="icon fa fa-itch-io"></i>
</a>
</li>
About
</ul>
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>
<!-- Nav 导航条 end -->
<!-- Main 主要部分 start -->
<!-- 文章列表 s -->
<div id="main" style="background-color: transparent; padding:0;">
<section class="link_container" style="margin-top: 0; background-color: transparent; ">
<div class="link_row">
<!-- 文章sample s-->
<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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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">
<div class="6u 12u(narrower)">
<section class="link_box special">
<a href="/2023/09/28/Bill-Heavey-Jerkey-What-Did-I-Just-Eat/">
<div class="page_title" style="background-image: url(/images/books/billheaveywhatdidijusteat-thumb.jpg);background-position: center; background-repeat:no-repeat; background-size:contain;-moz-background-size:contain;">
<!--标题-->
<h2 class="page_title_text"> If You Didn&#39;t Bring Jerky, What Did I Just Eat? </h2>
<!--段落-->
</div>
</a>
<div class="home-post-info">
<!-- Author Avatar -->
<div class="home-post-info-author-avatar">
<h6><span class="home-post-info-data">2023-09-28</span></h6>
<div class="home-post-info-Category">
<!-- Category -->
<span>
<h6>
<a class="post_category-link" target="_blank" rel="noopener" href="http://localhost:4000/categories/Algorithm/">
<a class="post_category-link" href="/categories/Books/">Books</a>, <a class="post_category-link" href="/categories/Outdoors/">Outdoors</a></a>
</h6>
</span>
</div>
</div>
</div>
</section>
</div>
<!-- 文章sample e-->
</div>
</section>
<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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
<!-- 文章列表 end -->
<!-- Main 主要部分 end -->
<!-- footer 页码 start-->
<footer style="text-align: center; padding-top: 2em;">
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content category-page-card">
<div class="categories-page-title">Categories&nbsp-&nbspOutdoors</div>
</div>
<div class="archive-timeline">
<div class="archive-timeline-tag"><span>2023</span></div>
<div class="archive-timeline-item">
<div class="archive-timeline-post">
<div class="card card-content">
<div class="archive-timeline-post-date">2023-09-28</div>
<div class="archive-timeline-post-content">
<a
href="/2023/09/28/Bill-Heavey-Jerkey-What-Did-I-Just-Eat/"
class="archive-timeline-post-item">
If You Didn&#39;t Bring Jerky, What Did I Just Eat?
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Kaze
</a>
</div>
</footer>
<!-- footer 页码 end-->
<!-- Copyright 版权 start -->
<div id="copyright">
<ul>
<li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
<li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
</ul>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
<a
role="button"
id="scrollbutton"
class="basebutton"
aria-label="回到顶部">
<i class="iconfont icon-arrowleft button-icon"></i>
</a>
</div>
<!-- Copyright 版权 end -->
</div>
<!-- Wrapper 外包 e-->
<!-- Scripts -->
</body>
<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 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>
</body>
</html>

765
categories/index.html Normal file
View File

@@ -0,0 +1,765 @@
<!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>Categories</title>
<meta
property="og:title"
content="Categories">
<meta
property="og:url"
content="https://www.aklabs.net/categories/index.html">
<meta
property="og:img"
content="/images/akesterson.webp">
<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">
<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>
// 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;
} 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;
} 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();
}
};
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"></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="/"
class="navbar-menu-item">
Home
</a>
<a
href="/archives"
class="navbar-menu-item">
Archive
</a>
<a
href="/tags"
class="navbar-menu-item">
Tags
</a>
<a
href="/categories"
class="navbar-menu-item">
Categories
</a>
<a
href="/about"
class="navbar-menu-item">
About
</a>
<a
href="/links"
class="navbar-menu-item">
Friends
</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>Leadership || DevOps || GameDev <br/>Emergency Response <br/> <br/> <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> </center></p>
<div class="author-message">
<a
class="author-posts-count"
href="/archives">
<span>13</span>
<span>Posts</span>
</a>
<a
class="author-categories-count"
href="/categories">
<span>4</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="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/Leadership/">
<div class="categories-list-item">
Leadership
<span class="categories-list-item-badge">4</span>
</div>
</a>
<a href="/categories/Books/">
<div class="categories-list-item">
Books
<span class="categories-list-item-badge">12</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>
</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>
<article class="card card-content widescreen-archive archive-widget">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
<main class="main-column">
<div class="card card-content">
<div
class="categories-page-title"
style="margin-bottom: 0.6rem;">
Categories
</div>
<div>
Total&nbsp;13&nbsp;posts
</div>
</div>
<div class="card card-content categories-page-card">
<a
href="/categories/Leadership/"
class="categories-page-list-item"
style="margin-top: 0;">
<span>Leadership</span>
<span
class="categories-page-list-item-total">
Total&nbsp;4&nbsp;posts
</span>
</a>
<a
href="/categories/Books/"
class="categories-page-list-item"
style="margin-top: 0;">
<span>Books</span>
<span
class="categories-page-list-item-total">
Total&nbsp;12&nbsp;posts
</span>
</a>
<a
href="/categories/Faith/"
class="categories-page-list-item"
style="margin-top: 0;">
<span>Faith</span>
<span
class="categories-page-list-item-total">
Total&nbsp;6&nbsp;posts
</span>
</a>
<a
href="/categories/Outdoors/"
class="categories-page-list-item"
style="margin-top: 0;">
<span>Outdoors</span>
<span
class="categories-page-list-item-total">
Total&nbsp;1&nbsp;posts
</span>
</a>
</div>
</main>
<aside class="right-column">
<div class="sticky-widescreen">
<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">2024-02-09</div>
<a href="/2024/02/09/expectations/"><div class="recent-posts-item-content">Setting Expectations</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2024-01-29</div>
<a href="/2024/01/29/Simon-Sinek-Start-with-Why/"><div class="recent-posts-item-content">Start with Why</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-12-23</div>
<a href="/2023/12/23/United-States-Catholic-Catechism-for-Adults/"><div class="recent-posts-item-content">US Catholic Catechism for Adults</div></a>
</div>
<div class="recent-posts-item">
<div class="recent-posts-item-title">2023-11-05</div>
<a href="/2023/11/05/Copper-Sun/"><div class="recent-posts-item-content">Copper Sun</div></a>
</div>
</div>
</div>
</article>
<article class="card card-content">
<div class="archive-card">
<div class="archive-card-header">
<i
class="iconfont icon-wodebaobiao"
style="padding-right: 2px;">
</i>Archive
</div>
<div class="archive-card-list">
<a
href="/archives/2024"
class="archive-card-list-item">
2024
<span class="archive-card-list-item-badge">2</span>
</a>
<a
href="/archives/2023"
class="archive-card-list-item">
2023
<span class="archive-card-list-item-badge">6</span>
</a>
<a
href="/archives/2022"
class="archive-card-list-item">
2022
<span class="archive-card-list-item-badge">5</span>
</a>
</div>
</div>
</article>
</div>
</aside>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div>
<div class="footer-dsc">
<span>
Copyright ©
2024
</span>
&nbsp;
<a
href="/"
class="footer-link">
AKLabs
</a>
</div>
</div>
<div class="footer-dsc">
Powered by
<a
href="https://hexo.io/"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;Hexo
</a>
<span>&nbsp;|&nbsp;</span>
Theme -
<a
href="https://github.com/theme-kaze"
class="footer-link"
target="_blank"
rel="nofollow noopener noreferrer">
&nbsp;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 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>
</body>
</html>

81
css/archive.css Normal file
View File

@@ -0,0 +1,81 @@
.archive {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (min-width: 10px) and (max-width: 500px) {
.archive {
margin: 10%;
}
.avatar {
width: 40%;
border-radius: 50%;
}
.nav-bar {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 20px;
}
.nav-bar-item-title {
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
.article-preview {
padding-top: 20px;
}
.article-preview-top-title {
font-size: 25px;
font-weight: bold;
}
.article-preview-top-date {
font-size: 15px;
font-style: italic;
}
.tag-cloud {
margin-top: 20%;
display: grid;
grid-template-columns: repeat(8, auto);
gap: 10%;
}
}
@media (min-width: 501px) and (max-width: 1920px) {
.archive {
margin: 5%;
}
.avatar {
width: 170px;
border-radius: 50%;
}
.nav-bar {
margin-top: 20px;
display: flex;
place-items: center;
gap: 25px;
}
.nav-bar-item-title {
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
.tag-cloud {
margin-top: 10%;
display: grid;
grid-template-columns: repeat(8, auto);
gap: 10%;
}
}

6
css/ball-atom.min.css vendored Normal file
View File

@@ -0,0 +1,6 @@
/*!
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
* Licensed under MIT
*/
.la-ball-atom,.la-ball-atom>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-atom{display:block;font-size:0;color:#fff}.la-ball-atom.la-dark{color:#333}.la-ball-atom>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-atom{width:32px;height:32px}.la-ball-atom>div:nth-child(1){position:absolute;top:50%;left:50%;z-index:1;width:60%;height:60%;background:#aaa;border-radius:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-animation:ball-atom-shrink 4.5s infinite linear;-moz-animation:ball-atom-shrink 4.5s infinite linear;-o-animation:ball-atom-shrink 4.5s infinite linear;animation:ball-atom-shrink 4.5s infinite linear}.la-ball-atom>div:not(:nth-child(1)){position:absolute;left:0;z-index:0;width:100%;height:100%;background:none;-webkit-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);-moz-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);-o-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);animation:ball-atom-zindex 1.5s 0s infinite steps(2, end)}.la-ball-atom>div:not(:nth-child(1)):before{position:absolute;top:0;left:0;width:10px;height:10px;margin-top:-5px;margin-left:-5px;content:"";background:currentColor;border-radius:50%;opacity:.75;-webkit-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;-moz-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;-o-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease}.la-ball-atom>div:nth-child(2){-webkit-animation-delay:.75s;-moz-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}.la-ball-atom>div:nth-child(2):before{-webkit-animation-delay:0s,-1.125s;-moz-animation-delay:0s,-1.125s;-o-animation-delay:0s,-1.125s;animation-delay:0s,-1.125s}.la-ball-atom>div:nth-child(3){-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-ms-transform:rotate(120deg);-o-transform:rotate(120deg);transform:rotate(120deg);-webkit-animation-delay:-.25s;-moz-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.25s}.la-ball-atom>div:nth-child(3):before{-webkit-animation-delay:-1s,-0.75s;-moz-animation-delay:-1s,-0.75s;-o-animation-delay:-1s,-0.75s;animation-delay:-1s,-0.75s}.la-ball-atom>div:nth-child(4){-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg);-ms-transform:rotate(240deg);-o-transform:rotate(240deg);transform:rotate(240deg);-webkit-animation-delay:.25s;-moz-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}.la-ball-atom>div:nth-child(4):before{-webkit-animation-delay:-0.5s,-0.125s;-moz-animation-delay:-0.5s,-0.125s;-o-animation-delay:-0.5s,-0.125s;animation-delay:-0.5s,-0.125s}.la-ball-atom.la-sm{width:16px;height:16px}.la-ball-atom.la-sm>div:not(:nth-child(1)):before{width:4px;height:4px;margin-top:-2px;margin-left:-2px}.la-ball-atom.la-2x{width:64px;height:64px}.la-ball-atom.la-2x>div:not(:nth-child(1)):before{width:20px;height:20px;margin-top:-10px;margin-left:-10px}.la-ball-atom.la-3x{width:96px;height:96px}.la-ball-atom.la-3x>div:not(:nth-child(1)):before{width:30px;height:30px;margin-top:-15px;margin-left:-15px}@-webkit-keyframes ball-atom-position{50%{top:100%;left:100%}}@-moz-keyframes ball-atom-position{50%{top:100%;left:100%}}@-o-keyframes ball-atom-position{50%{top:100%;left:100%}}@keyframes ball-atom-position{50%{top:100%;left:100%}}@-webkit-keyframes ball-atom-size{50%{-webkit-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-moz-keyframes ball-atom-size{50%{-moz-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-o-keyframes ball-atom-size{50%{-o-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@keyframes ball-atom-size{50%{-webkit-transform:scale(0.5, 0.5);-moz-transform:scale(0.5, 0.5);-o-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-webkit-keyframes ball-atom-zindex{50%{z-index:10}}@-moz-keyframes ball-atom-zindex{50%{z-index:10}}@-o-keyframes ball-atom-zindex{50%{z-index:10}}@keyframes ball-atom-zindex{50%{z-index:10}}@-webkit-keyframes ball-atom-shrink{50%{-webkit-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@-moz-keyframes ball-atom-shrink{50%{-moz-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@-o-keyframes ball-atom-shrink{50%{-o-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@keyframes ball-atom-shrink{50%{-webkit-transform:translate(-50%, -50%) scale(0.8, 0.8);-moz-transform:translate(-50%, -50%) scale(0.8, 0.8);-o-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}

64
css/codemirror.css Normal file
View File

@@ -0,0 +1,64 @@
pre code .language-mark {
position: absolute;
top: 15px;
left: 15px;
font-weight: 900;
color: var(--secondary);
z-index: 5;
text-transform: uppercase;
font-family: Rubik, Lato, lucida grande, lucida sans unicode, Tahoma, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
font-size: 0.6rem;
background: rgba(16,14,23,0.36);
border-radius: 8px;
padding: 0 0.8em;
}
pre code .language-mark b {
position: relative;
top: 2px;
left: 0;
}
.language-mark[ref="css"] {
color: #ff8a00;
}
.language-mark[ref="scss"] {
color: #ff8a00;
}
.language-mark[ref="html"] {
color: #4caf50;
}
.language-mark[ref=JSX] {
color: #03a9f4;
}
.language-mark[ref=JavaScript] {
color: #03a9f4;
color: #ff79c6;
}
.language-mark[ref=jQuery] {
color: #03a9f4;
color: #ff79c6;
}
.language-mark[ref=php] {
color: #ff79c6;
}
/* CodeMirror Dracula theme */
.CodeMirror {
height: auto !important;
overflow: hidden;
border-radius: 8px;
}
.CodeMirror .CodeMirror-gutters,
.CodeMirror .CodeMirror-linenumber {
background: #201c29 !important;
padding: 0 3px 0 15px;
}
.CodeMirror .CodeMirror-scroll {
padding: 55px 30px 60px 10px !important;
}
.CodeMirror.cm-s-dracula {
height: 100%;
width: 100%;
}
.CodeMirror .CodeMirror-lines {
font-size: 0.8rem;
font-family: Rubik, Lato, lucida grande, lucida sans unicode, Tahoma, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}

57
css/common.css Normal file
View File

@@ -0,0 +1,57 @@
body {
font-family: 'JetBrains Mono', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
html {
height: 100%;
}
p {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
@media (prefers-color-scheme: dark) {
html, img, .hljs {
filter: invert(1) hue-rotate(180deg);
}
}
a:link {
text-decoration: underline;
color: black;
}
a:visited {
color: black;
text-decoration:none;
}
a:hover {
color: black;
text-decoration: underline;
}
a:active {
color: black;
text-decoration:underline;
}
@media only screen and (max-width: 500px) {
.footer {
width: 70%;
position: static;
bottom: 0;
margin-bottom: 15px;
}
}
@media screen and (max-width: 1920px) {
.footer {
position: static;
bottom: 0;
margin-bottom: 15px;
}
}

125
css/const.css Normal file
View File

@@ -0,0 +1,125 @@
.bg-color0 {
background: #495057;
}
.bg-color1 {
background: #f03e3e;
}
.bg-color2 {
background: #ae3ec9;
}
.bg-color3 {
background: #7048e8;
}
.bg-color4 {
background: #4263eb;
}
.bg-color5 {
background: #1098ad;
}
.bg-color6 {
background: #0ca678;
}
.bg-color7 {
background: #37b24d;
}
.bg-color8 {
background: #f59f00;
}
.bg-color9 {
background: #f76707;
}
.bg-color10 {
background: #6f42c1;
}
@-moz-keyframes rotate3ding {
0% {
left: 0;
bottom: -12px;
transform: scale(1);
}
20% {
transform: scale(4);
}
50% {
left: 100%;
bottom: 40px;
transform: scale(1);
}
70% {
transform: scale(0.3);
}
100% {
left: 0;
bottom: -12px;
transform: scale(1);
}
}
@-webkit-keyframes rotate3ding {
0% {
left: 0;
bottom: -12px;
transform: scale(1);
}
20% {
transform: scale(4);
}
50% {
left: 100%;
bottom: 40px;
transform: scale(1);
}
70% {
transform: scale(0.3);
}
100% {
left: 0;
bottom: -12px;
transform: scale(1);
}
}
@-o-keyframes rotate3ding {
0% {
left: 0;
bottom: -12px;
transform: scale(1);
}
20% {
transform: scale(4);
}
50% {
left: 100%;
bottom: 40px;
transform: scale(1);
}
70% {
transform: scale(0.3);
}
100% {
left: 0;
bottom: -12px;
transform: scale(1);
}
}
@keyframes rotate3ding {
0% {
left: 0;
bottom: -12px;
transform: scale(1);
}
20% {
transform: scale(4);
}
50% {
left: 100%;
bottom: 40px;
transform: scale(1);
}
70% {
transform: scale(0.3);
}
100% {
left: 0;
bottom: -12px;
transform: scale(1);
}
}

10299
css/fan.css Normal file

File diff suppressed because it is too large Load Diff

90
css/highlight-dark.css Normal file
View File

@@ -0,0 +1,90 @@
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px
}
.hljs {
display: block;
overflow-x: auto;
padding: .5em;
color: #DFDFE0;
background: rgb(51, 51, 51);
border-radius: 5px;
}
.hljs-comment,
.hljs-quote {
color: #A5B0BD; /* comment - gray */
font-style: italic
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #EF81B0; /* keyword - pink */
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #DFDFE0; /* other - white */
}
.hljs-literal {
color: #EF81B0; /* keyword - pink */
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #F08875; /* string - peach */
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #DFDFE0; /* other - white */
}
.hljs-number {
color: #D5CA86; /* number - yellow */
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BBF0E4; /* objectA - light cyan */
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #DFDFE0; /* other - white */
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}
.hljs-link {
text-decoration: underline
}

104
css/highlight-light.css Normal file
View File

@@ -0,0 +1,104 @@
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px
}
.hljs {
background: rgb(245, 245, 245);
color: #000;
border-radius: 5px;
}
.xml .hljs-meta {
color: silver
}
.hljs-comment,
.hljs-quote {
color: #007400
}
.hljs-attribute,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-selector-tag,
.hljs-tag {
color: #aa0d91
}
.hljs-template-variable,
.hljs-variable {
color: #3f6e74
}
.hljs-code,
.hljs-meta .hljs-string,
.hljs-string {
color: #c41a16
}
.hljs-link,
.hljs-regexp {
color: #0e0eff
}
.hljs-bullet,
.hljs-number,
.hljs-symbol,
.hljs-title {
color: #1c00cf
}
.hljs-meta,
.hljs-section {
color: #643820
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-params,
.hljs-title.class_,
.hljs-type {
color: #5c2699
}
.hljs-attr {
color: #836c28
}
.hljs-subst {
color: #000
}
.hljs-formula {
background-color: #eee;
font-style: italic
}
.hljs-addition {
background-color: #baeeba
}
.hljs-deletion {
background-color: #ffc8bd
}
.hljs-selector-class,
.hljs-selector-id {
color: #9b703f
}
.hljs-doctag,
.hljs-strong {
font-weight: 700
}
.hljs-emphasis {
font-style: italic
}

0
css/highlight/diff.css Normal file
View File

509
css/highlight/highlight.css Normal file
View File

@@ -0,0 +1,509 @@
#post figure.highlight.js table::before {
content: "js";
}
#post figure.highlight.javascript table::before {
content: "javascript";
}
#post figure.highlight.python table::before {
content: "python";
}
#post figure.highlight.ipython table::before {
content: "ipython";
}
#post figure.highlight.ruby table::before {
content: "ruby";
}
#post figure.highlight.xml table::before {
content: "xml";
}
#post figure.highlight.html table::before {
content: "html";
}
#post figure.highlight.css table::before {
content: "css";
}
#post figure.highlight.perl table::before {
content: "perl";
}
#post figure.highlight.sql table::before {
content: "sql";
}
#post figure.highlight.coffeescript table::before {
content: "coffeescript";
}
#post figure.highlight.java table::before {
content: "java";
}
#post figure.highlight.scala table::before {
content: "scala";
}
#post figure.highlight.kotlin table::before {
content: "kotlin";
}
#post figure.highlight.c table::before {
content: "c";
}
#post figure.highlight.c\+\+ table::before {
content: "c\+\+";
}
#post figure.highlight.cpp table::before {
content: "cpp";
}
#post figure.highlight.go table::before {
content: "go";
}
#post figure.highlight.less table::before {
content: "less";
}
#post figure.highlight.sass table::before {
content: "sass";
}
#post figure.highlight.scss table::before {
content: "scss";
}
#post figure.highlight.stylus table::before {
content: "stylus";
}
#post figure.highlight.styl table::before {
content: "styl";
}
#post figure.highlight.typescript table::before {
content: "typescript";
}
#post figure.highlight.ts table::before {
content: "ts";
}
#post figure.highlight.bash table::before {
content: "bash";
}
#post figure.highlight.nginx table::before {
content: "nginx";
}
#post figure.highlight.lua table::before {
content: "lua";
}
#post figure.highlight.markdown table::before {
content: "markdown";
}
#post pre,
.post-content pre,
#post .highlight,
.post-content .highlight {
overflow: auto;
margin: 12px 0;
padding: 0;
padding-top: 32px;
background: #292d3e;
color: #a6accd;
font-size: 14px;
line-height: 20px;
}
figure.highlight {
position: relative;
}
figure.highlight table th,
figure.highlight table td {
padding: 0 !important;
border: 0 !important;
}
blockquote {
margin: 0;
padding: 0 8px;
border-left: 2px solid $color-sub-theme;
color: #6a737d;
}
#post pre,
.post-content pre,
#post code,
.post-content code {
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number !important;
}
#post code,
.post-content code {
margin: 0 2px;
padding: 1px 4px;
background: $rgba-color;
color: $color-font;
word-wrap: break-word;
font-size: 14px;
vertical-align: bottom;
}
#post pre code,
.post-content pre code {
padding: 0;
background: none;
color: #a6accd;
text-shadow: none;
}
#post .highlight,
.post-content .highlight {
position: relative;
border-radius: 4px;
}
#post .highlight::after,
.post-content .highlight::after {
position: absolute;
top: 0;
z-index: 0;
min-width: 100%;
height: 32px;
background: #1f222f;
content: "";
}
#post .highlight pre,
.post-content .highlight pre {
margin: 0;
padding: 8px 0;
border: none;
}
#post .highlight .line::selection,
.post-content .highlight .line::selection {
background: #717cb4;
color: #a6accd;
}
#post .highlight table,
.post-content .highlight table {
position: relative;
margin: 0;
width: auto;
border: none;
}
#post .highlight table::before,
.post-content .highlight table::before {
position: absolute;
z-index: 1;
display: inline-block;
margin-top: -40px;
padding: 0 8px;
width: 50px;
color: #a6accd;
content: "Code";
font-weight: bold;
font-size: 8px;
line-height: 32px;
}
#post .highlight table::after,
.post-content .highlight table::after {
position: absolute;
top: -40px;
z-index: 0;
width: 100%;
height: 32px;
background: #1f222f;
content: "";
}
#post .highlight td,
.post-content .highlight td {
padding: 0;
border: none;
}
#post .highlight figcaption,
.post-content .highlight figcaption {
margin-bottom: 12px;
color: #a6accd;
font-size: 12px;
line-height: 12px;
}
#post .highlight figcaption a,
.post-content .highlight figcaption a {
float: right;
color: #a6accd;
}
#post .highlight figcaption a:hover,
.post-content .highlight figcaption a:hover {
border-bottom-color: #a6accd;
}
#post .highlight .gutter pre,
.post-content .highlight .gutter pre {
padding-right: 8px;
padding-left: 8px;
background-color: #292d3e;
color: #3a3f58;
text-align: right;
}
#post .highlight .code pre,
.post-content .highlight .code pre {
padding-right: 8px;
padding-left: 8px;
width: 100%;
background-color: #292d3e;
}
#post .highlight .line,
.post-content .highlight .line {
height: 12px;
}
#post .highlight .fa-clipboard,
.post-content .highlight .fa-clipboard {
position: absolute;
top: 8px;
right: 10px;
z-index: 1;
color: $color-font;
cursor: pointer;
transition: $transition-delay;
}
#post .highlight .fa-clipboard:hover,
.post-content .highlight .fa-clipboard:hover {
color: $color-theme;
}
#post .highlight .copy-notice,
.post-content .highlight .copy-notice {
position: absolute;
top: 6px;
right: 0;
z-index: 1;
color: $color-theme;
opacity: 0;
}
#post .gutter,
.post-content .gutter {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#post .gist table,
.post-content .gist table {
width: auto;
}
#post .gist table td,
.post-content .gist table td {
border: none;
}
#post pre .deletion,
.post-content pre .deletion {
background: #008000;
}
#post pre .addition,
.post-content pre .addition {
background: #800000;
}
#post pre .meta,
.post-content pre .meta {
color: #c792ea;
}
#post pre .comment,
.post-content pre .comment {
color: #676e95;
}
#post pre .comment::selection,
.post-content pre .comment::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .variable,
.post-content pre .variable,
#post pre .attribute,
.post-content pre .attribute,
#post pre .regexp,
.post-content pre .regexp,
#post pre .ruby .constant,
.post-content pre .ruby .constant,
#post pre .xml .tag .title,
.post-content pre .xml .tag .title,
#post pre .xml .pi,
.post-content pre .xml .pi,
#post pre .xml .doctype,
.post-content pre .xml .doctype,
#post pre .html .doctype,
.post-content pre .html .doctype,
#post pre .css .id,
.post-content pre .css .id,
#post pre .tag .name,
.post-content pre .tag .name,
#post pre .css .class,
.post-content pre .css .class,
#post pre .css .pseudo,
.post-content pre .css .pseudo {
color: #ff5370;
}
#post pre .variable::selection,
.post-content pre .variable::selection,
#post pre .attribute::selection,
.post-content pre .attribute::selection,
#post pre .regexp::selection,
.post-content pre .regexp::selection,
#post pre .ruby .constant::selection,
.post-content pre .ruby .constant::selection,
#post pre .xml .tag .title::selection,
.post-content pre .xml .tag .title::selection,
#post pre .xml .pi::selection,
.post-content pre .xml .pi::selection,
#post pre .xml .doctype::selection,
.post-content pre .xml .doctype::selection,
#post pre .html .doctype::selection,
.post-content pre .html .doctype::selection,
#post pre .css .id::selection,
.post-content pre .css .id::selection,
#post pre .tag .name::selection,
.post-content pre .tag .name::selection,
#post pre .css .class::selection,
.post-content pre .css .class::selection,
#post pre .css .pseudo::selection,
.post-content pre .css .pseudo::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .tag,
.post-content pre .tag {
color: #89ddff;
}
#post pre .tag::selection,
.post-content pre .tag::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .number,
.post-content pre .number,
#post pre .preprocessor,
.post-content pre .preprocessor,
#post pre .literal,
.post-content pre .literal,
#post pre .params,
.post-content pre .params,
#post pre .constant,
.post-content pre .constant,
#post pre .command,
.post-content pre .command {
color: #f78c6c;
}
#post pre .number::selection,
.post-content pre .number::selection,
#post pre .preprocessor::selection,
.post-content pre .preprocessor::selection,
#post pre .literal::selection,
.post-content pre .literal::selection,
#post pre .params::selection,
.post-content pre .params::selection,
#post pre .constant::selection,
.post-content pre .constant::selection,
#post pre .command::selection,
.post-content pre .command::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .built_in,
.post-content pre .built_in {
color: #ffcb6b;
}
#post pre .built_in::selection,
.post-content pre .built_in::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .ruby .class .title,
.post-content pre .ruby .class .title,
#post pre .css .rules .attribute,
.post-content pre .css .rules .attribute,
#post pre .string,
.post-content pre .string,
#post pre .value,
.post-content pre .value,
#post pre .inheritance,
.post-content pre .inheritance,
#post pre .header,
.post-content pre .header,
#post pre .ruby .symbol,
.post-content pre .ruby .symbol,
#post pre .xml .cdata,
.post-content pre .xml .cdata,
#post pre .special,
.post-content pre .special,
#post pre .number,
.post-content pre .number,
#post pre .formula,
.post-content pre .formula {
color: #c3e88d;
}
#post pre .ruby .class .title::selection,
.post-content pre .ruby .class .title::selection,
#post pre .css .rules .attribute::selection,
.post-content pre .css .rules .attribute::selection,
#post pre .string::selection,
.post-content pre .string::selection,
#post pre .value::selection,
.post-content pre .value::selection,
#post pre .inheritance::selection,
.post-content pre .inheritance::selection,
#post pre .header::selection,
.post-content pre .header::selection,
#post pre .ruby .symbol::selection,
.post-content pre .ruby .symbol::selection,
#post pre .xml .cdata::selection,
.post-content pre .xml .cdata::selection,
#post pre .special::selection,
.post-content pre .special::selection,
#post pre .number::selection,
.post-content pre .number::selection,
#post pre .formula::selection,
.post-content pre .formula::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .keyword,
.post-content pre .keyword,
#post pre .title,
.post-content pre .title,
#post pre .css .hexcolor,
.post-content pre .css .hexcolor {
color: #89ddff;
}
#post pre .keyword::selection,
.post-content pre .keyword::selection,
#post pre .title::selection,
.post-content pre .title::selection,
#post pre .css .hexcolor::selection,
.post-content pre .css .hexcolor::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .function,
.post-content pre .function,
#post pre .python .decorator,
.post-content pre .python .decorator,
#post pre .python .title,
.post-content pre .python .title,
#post pre .ruby .function .title,
.post-content pre .ruby .function .title,
#post pre .ruby .title .keyword,
.post-content pre .ruby .title .keyword,
#post pre .perl .sub,
.post-content pre .perl .sub,
#post pre .javascript .title,
.post-content pre .javascript .title,
#post pre .coffeescript .title,
.post-content pre .coffeescript .title {
color: #82aaff;
}
#post pre .function::selection,
.post-content pre .function::selection,
#post pre .python .decorator::selection,
.post-content pre .python .decorator::selection,
#post pre .python .title::selection,
.post-content pre .python .title::selection,
#post pre .ruby .function .title::selection,
.post-content pre .ruby .function .title::selection,
#post pre .ruby .title .keyword::selection,
.post-content pre .ruby .title .keyword::selection,
#post pre .perl .sub::selection,
.post-content pre .perl .sub::selection,
#post pre .javascript .title::selection,
.post-content pre .javascript .title::selection,
#post pre .coffeescript .title::selection,
.post-content pre .coffeescript .title::selection {
background: #717cb4;
color: #a6accd;
}
#post pre .tag .attr,
.post-content pre .tag .attr,
#post pre .javascript .function,
.post-content pre .javascript .function {
color: #c792ea;
}
#post pre .tag .attr::selection,
.post-content pre .tag .attr::selection,
#post pre .javascript .function::selection,
.post-content pre .javascript .function::selection {
background: #717cb4;
color: #a6accd;
}

Some files were not shown because too many files have changed in this diff Show More