229 lines
9.6 KiB
HTML
229 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>又又又双叒叕换主题啦</title>
|
|
<link rel="alternate" type="application/rss+xml" title="优世界" href="/rss.xml">
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel='stylesheet' href='/css/main.css'>
|
|
<link rel="stylesheet" href="/css/normalize.css">
|
|
<link rel="stylesheet" href="/css/remixicon.css">
|
|
<link rel="stylesheet" href="/css/uikit.min.css">
|
|
<link rel="stylesheet" href="/css/nprogress.min.css">
|
|
<link rel="stylesheet" href="/css/mywaline.css" />
|
|
<script src="/js/jquery.min.js"></script>
|
|
<script src="/js/barrage.min.js"></script>
|
|
<script src="/js/jquery.scrollUp.min.js"></script>
|
|
<script src="/js/instantpage.min.js" type="module" defer></script>
|
|
<script src="/js/pjax.js"></script>
|
|
|
|
<link rel="stylesheet" href="/css/mywaline.css" />
|
|
|
|
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
|
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
|
<meta name="template" content="Amigo" />
|
|
</head>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="main">
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="head_author_img load-memos-editor">
|
|
<img src="/image/avatar.jpg" class="blog-img" width="80" height="80" alt="优世界" />
|
|
</div>
|
|
<div class="site-description">
|
|
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
|
<nav class="nav social uk-visible@m">
|
|
<ul class="flat">
|
|
|
|
|
|
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
|
|
|
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
|
|
|
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
|
|
|
|
|
</ul>
|
|
<div class="yiyandes">风吹云散，云卷云舒</div>
|
|
</nav>
|
|
</div>
|
|
<nav class="nav">
|
|
<ul class="flat">
|
|
<li class="active"><a href="/">首页</a></li>
|
|
<li class="active"><a href="/about/">关于</a></li>
|
|
<li class="active"><a href="/ly/">留言</a></li>
|
|
<li class="active"><a href="/archives/">归档</a></li>
|
|
<li class="active"><a href="/links/">友链</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="pjax-container">
|
|
<article style="margin-bottom: 3.5em;">
|
|
<h1 class="post-title" itemprop="name headline">又又又双叒叕换主题啦</h1>
|
|
<div class="meta">
|
|
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: 785 分类:
|
|
|
|
<a href="%e7%94%9f%e6%b4%bb">生活</a>
|
|
|
|
</div>
|
|
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p; cls: uk-animation-fade; delay: 0">
|
|
<h2 id="前言">前言</h2>
|
|
<p>正如各位朋友所见，我又又又换主题了</p>
|
|
<p>经常来我博客的朋友可能见过这个主题</p>
|
|
<p>本主题原形是由<a href="https://blog.bug.dog">肖同学</a>设计的</p>
|
|
<p>
|
|
<img data-lazy-src="/pics/2023/01/70094325.png" alt="" class="lazyload"></p>
|
|
<p>当时翻GitHub一眼爱上，还记得，当时做博客的第一年，可能是卯足了新鲜劲</p>
|
|
<p>买到博客主题就狂怼css和花哨的js特效，当时<a href="http://qq.md">叶开</a>打趣的跟我讲到</p>
|
|
<p>你信不信到时候，你的博客主题风格依然会简约回来</p>
|
|
<p>三年后，叶开预言的果然成为了事实，对于主题风格，我反而越来越喜欢简约风格</p>
|
|
<p>当然如果有朋友喜欢这个主题，并且现在正在使用typecho博客程序</p>
|
|
<p>也可以去肖同学的GitHub获取该主题</p>
|
|
<p>传送门：</p>
|
|
<p><a href="https://github.com/Roseswithlove/Ying">https://github.com/Roseswithlove/Ying</a></p>
|
|
<h2 id="折腾">折腾</h2>
|
|
<p>可能是因为肖同学的工作忙的原因，主题至今还没有评论，需要依赖第三方评论系统</p>
|
|
<p>当初匆匆忙忙换上，只是简单的套了个waline（第三方评论系统）就上线了，但是时间久了</p>
|
|
<p>我渐渐发现了，这样并不方便管理，我需要备份两端的数据，这样很麻烦，于是又把主题换回原主题了</p>
|
|
<p>小年，补习班放假一天，心里想，要不花点时间，把这个主题的评论写完，秉承着说干就干的原则，就开机了</p>
|
|
<p>不得不说，typecho的评论整起来真的麻烦，而且还是第一次弄，官方文档给的参考示例，很简陋</p>
|
|
<p>导致走了很多弯路，大部分都是Google解决的</p>
|
|
<p>因为之前买过很多主题，可以参考大佬的写法，摸爬滚打，最后终于搞完，也许还有bug，但是后面发现了再说吧</p>
|
|
<h2 id="增加昼夜切换">增加昼夜切换</h2>
|
|
<p>因为这个主题是简约，基本上就白色和黑色两种色系，缺点就是晚上看很刺眼</p>
|
|
<p>于是想给主题写一个夜间模式，当然，百度有很多大佬也给出了思路</p>
|
|
<p>但是因为主题是简约风格，导致根本不知道把昼夜切换按钮放在那里</p>
|
|
<p>索性直接写个自动，省去了很多麻烦，也顺便偷个懒，哈哈</p>
|
|
<p>因为主题色系很简单，基本上就白色和黑色，只需要替换一下色系即可</p>
|
|
<p>想了个折中的办法，是否可以通过php，通过判断时间echo输出不同的css</p>
|
|
<p>达到效果，虽然这个方法很笨，但是终究还是整出来了</p>
|
|
<pre><code> <?php
|
|
date_default_timezone_set('PRC');
|
|
$hour = date('H');
|
|
$themeurl = $this->options->themeUrl;
|
|
if($hour > 6 && $hour <= 20){
|
|
echo "<link rel='stylesheet' href='$themeurl/css/dark.css'>\n";
|
|
}else{
|
|
echo "<link rel='stylesheet' href='$themeurl/css/dark.css'>\n";
|
|
}
|
|
?>
|
|
</code></pre>
|
|
<h2 id="简单预览">简单预览</h2>
|
|
<p>
|
|
<img data-lazy-src="/pics/2023/01/2899920906.png" alt="" class="lazyload"></p>
|
|
<p>
|
|
<img data-lazy-src="/pics/2023/01/1900538379.png" alt="" class="lazyload"></p>
|
|
<p>这样就大功告成了</p>
|
|
|
|
</div>
|
|
<div class="post-tags" style="margin-top: -30px;">
|
|
<nav class="nav tags">
|
|
<ul class="flat">
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
<hr class="uk-divider-icon">
|
|
<div id="comments" class="comments-area">
|
|
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="/css/mywaline.css"
|
|
/>
|
|
<div id="waline"></div>
|
|
<script src="/js/waline.js"></script>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function loadBarrager() {
|
|
|
|
var currentPath = "\/post\/1039\/";
|
|
|
|
|
|
if (currentPath.includes("post") || currentPath.includes("says")) {
|
|
|
|
fetchCommentsAndCreateBarrager(currentPath, {
|
|
looper_time: 3000,
|
|
defaultAvatar: 'static/default-avatar.png',
|
|
defaultInfo: 'No comment',
|
|
defaultLink: '#',
|
|
speed: 10,
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<script async src="/js/bsz.js"></script>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="footer">
|
|
<nav class="nav" style="clear: both;">
|
|
© 2019 - 2024
|
|
<br>
|
|
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
|
<br>
|
|
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
|
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
|
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
|
</a>提供CDN加速服务
|
|
<br>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/iconfont.js"></script>
|
|
<script src="/js/lightgallery.umd.min.js"></script>
|
|
<script src="/js/uikit.min.js"></script>
|
|
<script src="/js/EasyLazyload.min.js"></script>
|
|
<script src="/js/view-image.min.js"></script>
|
|
<script src="/js/main.js"></script>
|
|
<script src="/js/mypjax.js"></script>
|
|
<script src="/js/nprogress.js"></script>
|
|
<script src="/js/echarts.min.js"></script>
|
|
<script src="/js/waline.js"></script>
|
|
<script async src="/js/bsz.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if (document.querySelector("#waline")) {
|
|
Waline.init({
|
|
el: '#waline',
|
|
serverURL: 'https://waline.usj.cc',
|
|
lang: "zh-cn",
|
|
imageUploader: false,
|
|
search: false,
|
|
copyright: false,
|
|
requiredMeta:['nick', 'mail'],
|
|
login:'enable',
|
|
pageSize:10,
|
|
highlighter:true,
|
|
reaction: [
|
|
'/image/EhqxZ6DFIJojGNa.gif',
|
|
'/image/qmf5As3evWNXwGQ.gif',
|
|
'/image/ueWLPkmYw75x4cs.gif',
|
|
'/image/nsC1OGoBKfa8Hel.gif',
|
|
'/image/VKuBXqR91TPHnyc.gif',
|
|
'/image/2OmAWPeulq4ta8T.gif'
|
|
],
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|