rootlexme.github.io/index.html at master · rootlexme/rootlexme.github.io · GitHub

1
<!DOCTYPE html><html lang="zh-CN"><head><title>Rootlex Blog</title><noscript>开启Javascript是必要的</noscript><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="description" content="a blog 一个分享技术与生活的博客"><meta aria-keyshortcuts="Rootlex, blog, 技术, 博客"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link href="https://cdn.staticfile.org/remixicon/3.5.0/remixicon.min.css" rel="stylesheet"><link href="/css/var.css" rel="stylesheet"><link href="/css/main.css" rel="stylesheet"><link href="/css/content.css" rel="stylesheet"><script src="/js/lib/pace.min.js"></script><link href="/css/hightlight/theme.css" rel="stylesheet"><script>var GLOBALCONFIG={root:"/",lazyload:{enable:!0,error:"https://bu.dusays.com/2023/09/01/64f15cd6dd086.webp"},codelimit:300,lightbox:!0}</script><script id="site-config">var PAGECONFIG={is_home:!0,is_post:!1,is_page:!1,page:!1}</script><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Rootlex Blog" type="application/atom+xml"></head><body><main class="layouts_warp"><div class="layouts_content"><div class="sidebar_main w-1-3" id="sidebar"><div class="site_name"><img src="/img/site.png" alt="网页标题" class="nolazyload"></div><ul class="menu" id="menu"><li class="menu_list"><a href="/" class="menu_item"><i class="ri-home-6-line"></i> <span class="menu_item_span">主页</span></a></li><li class="menu_list"><a href="/posts/" class="menu_item"><i class="ri-article-line"></i> <span class="menu_item_span">文章</span></a></li><li class="menu_list"><a href="/bgm/" class="menu_item"><i class="ri-movie-2-line"></i> <span class="menu_item_span">追番</span></a></li><li class="menu_list"><a href="/link/" class="menu_item"><i class="ri-links-line"></i> <span class="menu_item_span">朋友们</span></a></li><li class="menu_list"><a href="/me/" class="menu_item"><i class="ri-heart-line"></i> <span class="menu_item_span">关于我</span></a></li></ul><hr><div class="tab_warp"><div class="tab_content"><div class="tab_content-tj"><div class="statistics_item"><span class="statistics_span">文章</span> <span class="statistics_num">9 篇</span></div><div class="statistics_item"><span class="statistics_span">分类</span> <span class="statistics_num">3</span></div><div class="statistics_item"><span class="statistics_span">字数</span> <span class="statistics_num">7.8k</span></div><div class="statistics_item"><span class="statistics_span">运行</span> <span class="statistics_num">556 天</span></div></div></div></div><div class="connect"><a target="_blank" rel="noopener" href="https://space.bilibili.com/494271806" style="color:#00b1ff" aria-label="bilibili"><i class="ri-bilibili-fill"></i></a><a target="_blank" rel="noopener" href="https://github.com/rootlexblog" style="color:#000" aria-label="github"><i class="ri-github-fill"></i></a><a target="_blank" rel="noopener" href="https://music.163.com/#/user/home?id=3416536539" style="color:#ff3030" aria-label="网易云"><i class="ri-netease-cloud-music-fill"></i></a><a href="mailto:a@nalex.top" style="color:#ffc952" aria-label="邮箱"><i class="ri-mail-send-line"></i></a></div><div class="sidebar_footer"><div class="link"><a href="/privacy">隐私协议</a> <a href="/cc">版权声明</a></div><div class="link"><i class="ri-copyright-line"></i> <span>2023</span> <a href="/">Rootlex</a></div></div></div><div class="layouts_page_content w-2-3"><div class="nav hide" id="nav"><div class="nav_item"><a onclick="jumpBack()" aria-label="主页" class="home"><i class="ri-arrow-go-back-line"></i></a><a class="rand_page" aria-label="随机页面" onclick="toRandomPost()"><i class="ri-shuffle-line"></i></a><div class="mobile_nav_item"><a class="menu_item" href="/" aria-label="主页"><i class="ri-home-6-line"></i></a><a class="menu_item" href="/posts/" aria-label="文章"><i class="ri-article-line"></i></a><a class="menu_item" href="/bgm/" aria-label="追番"><i class="ri-movie-2-line"></i></a><a class="menu_item" href="/link/" aria-label="朋友们"><i class="ri-links-line"></i></a><a class="menu_item" href="/me/" aria-label="关于我"><i class="ri-heart-line"></i></a></div></div><div class="nav_item"><a href="/atom.xml" aria-label="rss" target="_blank"><i class="ri-rss-fill"></i></a><a target="_blank" rel="noopener" href="https://www.travellings.cn/go.html" aria-label="开往"><i class="ri-subway-fill"></i></a></div></div><div class="content_top"><div class="top_img"><img src="https://bu.dusays.com/2023/08/30/64eecce284ccc.webp" alt="顶部头图" class="top_img_bg nolazyload"><div class="me"><span>Rootlex</span> <img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" alt="头像" class="avatar nolazyload"></div></div><div class="top_bar"><div class="cate_list" id="cate"><a class="cate_item" href="/">主页</a><div class="cate_list_item"><a class="cate_item" href="/categories/教程/">教程</a> <a class="cate_item" href="/categories/笔记/">笔记</a> <a class="cate_item" href="/categories/折腾/">折腾</a></div></div><div class="bar_dec"><span>寒蝉黎明之时，便是重生之日</span></div></div></div><div class="index_content"><div class="index_content_list_item"><div class="content_item"><div class="content_author"><img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" class="nolazyload" alt="头像"><div class="content_author_item"><span class="name">Rootlex</span><time class="date" datetime="Wed May 03 2023 10:29:30 GMT+0800"></time></div></div><div class="main_content"><div class="main_content_up_say"><div class="content_g"><html><head></head><body><p>博客更新日志 <code>v1.1.0</code></p><p><strong>UI优化</strong></p><ol><li>优化主页文章列表显示效果</li><li>优化主页文章信息显示方式</li><li>增加页面渐入动画</li><li>全新的说说ui</li></ol><p><strong>新增</strong></p><ol><li>说说支持markdown</li><li>图片懒加载</li><li>图片灯箱</li><li>音乐和图片墙的外挂标签</li></ol></body></html></div></div><div class="content_statistics"><div class="left"><div class="item"><i class="ri-map-pin-line"></i> <span>广东</span></div><div class="item say_date_time"><i class="ri-history-line"></i><time datetime="Thu May 04 2023 18:55:08 GMT+0800"></time></div></div><div class="right"><a class="item" href="/posts/30e05efc/"><i class="ri-more-fill"></i></a></div></div></div></div><div class="content_item"><div class="content_author"><img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" class="nolazyload" alt="头像"><div class="content_author_item"><span class="name">Rootlex</span><time class="date" datetime="Mon Jan 30 2023 10:42:40 GMT+0800"></time></div></div><div class="main_content"><a class="main_content_up" href="/posts/a61e63c2/"><div class="left"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://bu.dusays.com/2023/08/30/64eecce284ccc.webp"></div><div class="right"><div class="title">使用Artalk代替不蒜子统计PV</div><div class="description">ai: 这篇文章介绍了如何通过Artalk的OpenAPI使用ARTALK统计API，并提供了NUXT实现和原生JS实现的示例。对于NUXT实现，需要在组件完成挂载后请求，并传入origin；而对于原生JS实现，可以通过promise.all和fetch来实现。</div></div></a><div class="content_statistics"><div class="left"><div class="item"><i class="ri-map-pin-line"></i> <span>广东</span></div><div class="item post_date_time"><i class="ri-history-line"></i><time datetime="Mon Jan 30 2023 10:42:40 GMT+0800"></time></div></div><div class="right"><a class="item" href="/categories/教程/"><i class="ri-bookmark-line"></i> <span>教程</span></a></div></div></div></div><div class="content_item"><div class="content_author"><img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" class="nolazyload" alt="头像"><div class="content_author_item"><span class="name">Rootlex</span><time class="date" datetime="Sun Jan 29 2023 21:49:40 GMT+0800"></time></div></div><div class="main_content"><a class="main_content_up" href="/posts/b19848b6/"><div class="left"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://bu.dusays.com/2023/08/30/64eecce284ccc.webp"></div><div class="right"><div class="title">Artalk部署教程</div><div class="description">ai: 这篇文章介绍了如何通过Docker和CADDY来部署Artalk评论系统。首先介绍了Docker和CADDY的安装方法，然后详细说明了如何使用Docker来安装和启动Artalk，并开放端口进行访问。最后介绍了如何使用CADDY进行反代并访问。文章还解答了为什么不用宝塔、Nginx或Apache这些老牌站点管理器，以及为什么选择Artalk的原因。</div></div></a><div class="content_statistics"><div class="left"><div class="item"><i class="ri-map-pin-line"></i> <span>广东</span></div><div class="item post_date_time"><i class="ri-history-line"></i><time datetime="Sun Jan 29 2023 21:49:40 GMT+0800"></time></div></div><div class="right"><a class="item" href="/categories/教程/"><i class="ri-bookmark-line"></i> <span>教程</span></a></div></div></div></div><div class="content_item"><div class="content_author"><img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" class="nolazyload" alt="头像"><div class="content_author_item"><span class="name">Rootlex</span><time class="date" datetime="Tue Jan 24 2023 11:20:00 GMT+0800"></time></div></div><div class="main_content"><a class="main_content_up" href="/posts/7a70876f/"><div class="left"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://bu.dusays.com/2023/08/30/64eecce284ccc.webp"></div><div class="right"><div class="title">新的界面，新的开始</div><div class="description">ai: 这篇文章介绍了作者开发新博客时的技术选型、开发过程中踩到的“坑”，以及最终所用到的技术和库。作者选择使用Vue.js + Nuxt + Nuxt Content + Vite + Typescript等技术，以及Feed和Nuxt/sitemap等库，并接入了Artalk评论系统。在开发过程中遇到了NUXT SSR不支持一些客户端方法和Artalk评论接入问题，解决方案有两种。最后，作者将博客部署在Vercel上，CDN则采用Farcdn。</div></div></a><div class="content_statistics"><div class="left"><div class="item"><i class="ri-map-pin-line"></i> <span>广东</span></div><div class="item post_date_time"><i class="ri-history-line"></i><time datetime="Tue Jan 24 2023 11:20:00 GMT+0800"></time></div></div><div class="right"><a class="item" href="/categories/折腾/"><i class="ri-bookmark-line"></i> <span>折腾</span></a></div></div></div></div><div class="content_item"><div class="content_author"><img src="https://bu.dusays.com/2023/01/25/63d130a6ce9ea.jpg" class="nolazyload" alt="头像"><div class="content_author_item"><span class="name">Rootlex</span><time class="date" datetime="Sat Nov 19 2022 21:46:56 GMT+0800"></time></div></div><div class="main_content"><a class="main_content_up" href="/posts/c323bf04/"><div class="left"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://bu.dusays.com/2023/08/30/64eecce284ccc.webp"></div><div class="right"><div class="title">Waline实现动态说说</div><div class="description">ai: 这篇文章介绍了一种用评论系统实现静态说说的方法。作者发现市面上已有的几种静态说说方案都存在一些缺点，于是想到利用评论系统来解决这个问题。文章给出了具体步骤和参数解析，包括在custom.js引入JS代码、新建waterfall.js文件、引入CSS样式、在_config.butterfly.yml中添加代码等。最后还提供了示例代码和页面头部设计。</div></div></a><div class="content_statistics"><div class="left"><div class="item"><i class="ri-map-pin-line"></i> <span>广东</span></div><div class="item post_date_time"><i class="ri-history-line"></i><time datetime="Sat Nov 19 2022 21:46:56 GMT+0800"></time></div></div><div class="right"><a class="item" href="/categories/教程/"><i class="ri-bookmark-line"></i> <span>教程</span></a></div></div></div></div><div class="pagination"><span class="page-number current">1</span><a class="extend next" rel="next" href="/page/2/"><i class="ri-arrow-right-s-line"></i></a></div></div></div></div></div></main><div><link rel="stylesheet" href="https://npm.onmicrosoft.cn/@waline/client@2.15.7/dist/waline.css"><script src="https://npm.onmicrosoft.cn/@waline/client@2.15.7/dist/waline.js"></script><script>function Comments(){Waline.init({el:"#comments",serverURL:"https://comment.nalex.top",lang:"zh-CN",imageUploader:!1,search:!1,emoji:["https://jsd.onmicrosoft.cn/npm/sticker-heo@2022.7.5/Sticker-100/","https://jsd.onmicrosoft.cn/gh/Small-tailqwq/2stabApe-emoji-for-waline@1.1.1/%E5%8C%BF%E5%90%8D%E6%9D%BF/"],requiredMeta:["nick","mail","link"]})}</script><script src="/js/lib/pjax.min.js"></script><script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.min.js"></script><script src="/js/lib/view-image.min.js"></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js"></script><link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"><script src="https://cdn1.tianli0.top/npm/meting@2.0.1/dist/Meting.min.js"></script><script src="/js/main.js"></script><script>const pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:['meta[name="description"]',"title","#site-config",".index_content",".tab_warp"],cacheBust:!1,scrollRestoration:!1,analytics:!1});document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/")}))</script><script>const posts=["posts/a61e63c2/","posts/b19848b6/","posts/c323bf04/","posts/6177b8b5/","posts/ec7d7221/","posts/80cfaa0f/","posts/7a70876f/","posts/8f292cc0/","posts/30e05efc/"];function toRandomPost(){pjax.loadUrl("/"+posts[Math.floor(Math.random()*posts.length)])}</script></div></body></html>