curl https://get.acme.sh | sh -s email=邮箱
source ~/.bashrc
#查看版本
acme.sh -v

acme.sh默认安装在/root/.acme.sh，使用 ll -a查看

2.获取阿里云DNS api

其他云厂商 api 获取方式参考：https://github.com/acmesh-official/acme.sh/wiki/dnsapi#dns_ali

控制台搜索“访问控制”

创建用户组并添加权限：AliyunDNSFullAccess

创建用户并勾选 Open API 调用访问，添加到刚才创建的用户组中

用户——认证管理——创建 AccessKey

#声明环境变量
export Ali_Key="AccessKey ID"
export Ali_Secret="AccessKey"

在第一次申请证书后 Ali_Key 和 Ali_Secret 将会自动保存在 ~/.acme.sh/account.conf 并在以后需要时重新使用。

3.申请通配符证书

acme.sh --issue --dns dns_ali -d 域名 -d *.域名

acme会自动创建一个 cronjob, 在每天 0:00 点自动检测所有的证书, 如果快过期了, 需要更新, 则会自动更新证书。

crontab -l  #查看
crontab -e  #编辑

4.copy 证书

生成的证书都放在安装目录下: ~/.acme.sh/, 不要直接让 nginx/apache 的配置文件使用这下面的文件. 这里面的文件都是内部使用, 而且目录结构可能会变化。

两种方法：

1.将证书 copy 到自定义的目录下，在nginx/apache配置文件中引用此目录下的证书。

#nginx
acme.sh --install-cert -d 域名 --key-file       /blog/ssl/域名.key  --fullchain-file /blog/ssl/fullchain.cer --reloadcmd     "service nginx force-reload"

#apache
acme.sh --install-cert -d 域名 \
--cert-file      /path/to/certfile/in/apache/cert.pem  \
--key-file       /path/to/keyfile/in/apache/key.pem  \
--fullchain-file /path/to/fullchain/certfile/apache/fullchain.pem \
--reloadcmd     "service apache2 force-reload"

2.使用软连接(推荐)

ln -s /root/.acme.sh/kshar.cn_ecc/fullchain.cer fullchain.cer 
ln -s /root/.acme.sh/kshar.cn_ecc/kshar.cn.key kshar.cn.key

Nginx 的配置 ssl_certificate 使用 /etc/nginx/ssl/fullchain.cer ，而非 /etc/nginx/ssl/域名.cer

5.查看已安装证书的信息

acme.sh --info -d 域名

6.升级

#升级acme
acme.sh --upgrade
#开启自动升级
acme.sh --upgrade --auto-upgrade
#关闭自动升级
acme.sh --upgrade --auto-upgrade  0
#更新证书
acme.sh --renew -d 域名 --force

7.更改acme的 ca 服务器

acme.sh目前默认的ca服务器是zerossl，可能会出现出错：

Pending, The CA is processing your order, please just wait.

#更改acme的ca服务器为letsencrypt
acme.sh --set-default-ca --server letsencrypt

前言：使用 Redis 缓存与使用插件比如 Wp Super Cache、WP Fastest Cache 缓存有什么不同？

Redis缓存是一种内存数据结构存储，它可以作为数据库、缓存或消息队列使用。Redis允许你在内存中缓存和存储数据，当其他用户访问网站时，将从缓存中提供请求，而不是直接访问 MySQL 服务器。减少数据库查询，从而提高网站响应速度。

Wp Super Cache、WP Fastest Cache等缓存是用来生成静态界面的，它可以从动态的 WordPress 博客中生成静态页面文件。访问网站会直接使用静态文件来提供服务，而无需处理 PHP 脚本。

接入redis缓存

1.安装php-redis扩展

yum install php-redis -y

2.安装redis

yum install redis -y

3.为redis设置密码

vi /etc/redis/redis.conf
#随便找一行添加
requirepass 你的密码

#重启redis
systemctl restart redis

4.修改wp-config.php配置文件

vi /你的wordpress安装路径/wordpress/wp-config.php
## 在差不多106行添加以下代码
define('WP_REDIS_HOST', '127.0.0.1'); // Redis服务器地址  
define('WP_REDIS_PORT', '6379');      // Redis端口  
define('WP_REDIS_PASSWORD', '你的redis密码'); // Redis密码  
define('WP_REDIS_DATABASE', '0');     // Redis数据库索引（默认为0）  
define('WP_CACHE', true);             // 启用WordPress缓存

5.安装 Redis Object Cache 插件

如图显示 大功告成

6.如果报错

启用插件后报错崩溃或者提示无法访问redis ，首先把wp-config.php添加的内容注释掉，重启服务器后卸载插件，然后按照上面的顺序操作，启动插件一定要在最后，按照顺序一般不会有问题。

开启 PHP Opcache 扩展

在PHP 5.5.0及后续版本中，PHP已经将Opcache功能以拓展库形式内嵌在发布版本中了，无需安装。

1.编辑配置文件

根据自己服务器配置修改具体参数

vi /etc/php.ini
#在顶部添加如下内容
; 启用Opcache  
opcache.enable=1  
  
; 启用Opcache for CLI  
opcache.enable_cli=1  
  
; 对于2G内存的服务器，建议分配128MB到256MB  
opcache.memory_consumption=128  
  
; 每个PHP脚本可以缓存的字节码数量  
; 这个值依赖于你的应用大小，但默认通常足够  
opcache.interned_strings_buffer=8  
  
; 最大加速缓存的文件数  
; 默认值可能足够，但你可以根据网站大小进行调整  
opcache.max_accelerated_files=10000  
  
; 重新验证脚本的时间间隔（秒）  
; 设置为0表示始终验证脚本时间戳  
opcache.revalidate_freq=60  
  
; 是否在opcache的共享内存中启用快速关闭  
; 这有助于避免内存泄漏  
opcache.fast_shutdown=1  
  
; 启用Opcache黑名单  
; 例如，某些频繁变化的配置文件或临时文件  
; opcache.blacklist_filename=/path/to/blacklist.txt  
  
; 启用Opcache的自动重启  
; 当检测到脚本内存不足时，Opcache将自动重启  
opcache.enable_restart_on_abort=1  

2.重启PHP并查看是否配置成功

systemctl restart php-fpm.service
#查看
php -m | grep OPcache 或 php -i | grep opcache

添加Aplayer音乐播放器与样式魔改

添加aplayer

argon后台——脚本

参数修改参考 aplayer官方文档

<!----- 音乐播放器 ---->
<link rel="stylesheet" href="https://img.kshar.cn/js/APlayer.min.css">
<script src="https://img.kshar.cn/js/APlayer.min.js"></script>
<script src="https://img.kshar.cn/js/Meting.min.js"></script>
<meting-js 
    server="netease" 
    type="playlist" 
    id="8475517540"
    fixed="true" 
    mini="true"
    volume="1"
    lrc-type="0"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>
<!--------  音乐播放器完 ------------>

魔改aplayer

外观——自定义——额外css

/* ===== 音乐播放器 css =====*/
@media (max-width: 200px) {
    /* Aplayer音乐标签伸缩 */
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
      left: -66px !important;
      /* 默认情况下缩进左侧66px，只留一点箭头部分 */
    }
   
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
      left: 0 !important;
      /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
    }
  }
  /* Aplayer日间模式调整 */
  /* 背景色 */
  .aplayer {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: relative;
  }
   
  .aplayer.aplayer-fixed .aplayer-lrc:after,
  .aplayer.aplayer-fixed .aplayer-lrc:before {
    display: none;
  }
   
  .aplayer.aplayer.aplayer-fixed .aplayer-body {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
  }
  /* 滚动条 */
  .aplayer .aplayer-list ol::-webkit-scrollbar {
    width: 5px;
  }
  /* HTML 底部音乐播放器 */
  .aplayer-body {
      padding-right: 0!important;
  }
  
  .aplayer.aplayer-fixed .aplayer-lrc {
      top: 70px!important;
      right: 10px!important;
      text-align: right!important
  }
  
  .aplayer.aplayer-fixed {
      background-color: #0000 !important;
  }
  
  .aplayer.aplayer-fixed .aplayer-body {
      bottom: 10px!important;
      left: 20px!important;
      background: #fffa!important;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border: 1px solid var(--lyx-border)!important;
      box-shadow: var(--heo-shadow-border);
      width: 284px!important
  }
  
  .aplayer-info {
      border-top: none!important
  }
  
  [data-theme=dark] .aplayer.aplayer-fixed .aplayer-body {
      bottom: 10px!important;
      left: 10px!important;
      background: #0008!important;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      color: #fff!important
  }
  
  .aplayer.aplayer-fixed .aplayer-body:hover {
      border: 1px solid var(--lyx-theme)!important;
      box-shadow: 0 0 3px var(--lyx-theme)!important
  }
  
  .aplayer-pic {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px
  }
  
  [data-theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author,[data-theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time {
      color: #fff!important
  }
  
  .aplayer.aplayer-fixed .aplayer-list {
      border: none!important
  }
  
  .aplayer .aplayer-pic {
      transform: translate(-1px);
      -webkit-transform: translateX(-1px);
      -moz-transform: translateX(-1px);
      -ms-transform: translateX(-1px);
      -o-transform: translateX(-1px)
  }
  
  .aplayer.aplayer-fixed .aplayer-list {
      background-color: var(--lyx-white-acrylic1);
      transform: translate(100px,-20px);
      width: 200px;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-transform: translate(100px,-20px);
      -moz-transform: translate(100px,-20px);
      -ms-transform: translate(100px,-20px);
      -o-transform: translate(100px,-20px)
  }
  
  [data-theme=dark] .aplayer.aplayer-fixed .aplayer-list {
      background-color: var(--lyx-black-acrylic1)!important
  }
 
  .aplayer.aplayer-fixed .aplayer-icon-lrc {
      display: none!important
  }
  
  .aplayer .aplayer-miniswitcher {
      height: 40%!important;
      left: 290px;
      border-radius: 8px!important;
      -webkit-border-radius: 8px!important;
      -moz-border-radius: 8px!important;
      -ms-border-radius: 8px!important;
      -o-border-radius: 8px!important;
      top: 20px!important;
      }
  
  .aplayer-narrow .aplayer-miniswitcher {
      position: fixed!important;
      left: 300px!important;
      bottom: 10px!important;
      height: 26px!important
  }
  .aplayer-fixed.aplayer-narrow .aplayer-body {
      transition: all 1s;
      transform: translate(-300px);
      -webkit-transform: translateX(-300px);
      -moz-transform: translateX(-300px);
      -ms-transform: translateX(-300px);
      -o-transform: translateX(-300px);
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s
  }
/* ===== 音乐播放器 css 完 ===== */

魔改代码来自 Jming

文章与说说鼠标悬停3D效果

argon后台——脚本

<!-----------鼠标悬停3D效果start---------->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<script src="https://img.kshar.cn/js/3dkp.js"></script> <!--如果你没有引用过mobile-detect.js，请去除这里的注释以使其生效-->
<script type="text/javascript" src="https://img.kshar.cn/js/3dkp2.js"></script>
<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);
    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded); 
    }
</script>
<!--------------鼠标悬停3D效果end-------->

页脚内容

argon后台——页脚

<!------------备案信息及又拍云-------------->
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i> </span>
        <span>2024</i>
            <a href="https://kshar.cn/" target="_blank" one-link-mark="yes">柠檬茶
        </span>
</div>
<div class="github-badge-big">
<!-- 备案链接 -->
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">鄂ICP备2024058901号</a>
</div>
<div class="github-badge-big">
      <span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN & 云存储</span>
      <span class="badge-value bg-shallots">
<!-- 又拍云链接 -->
            <a href="https://www.upyun.com/" target="_blank" one-link-mark="yes">又拍云</a>
       </span>
</div>

<!--------运行时间开始------------->
<div>已运行 <span id="blog_running_days" class="odometer"></span> 天 <span id="blog_running_hours" class="odometer"></span> 时 <span id="blog_running_mins" class="odometer"></span> 分 <span id="blog_running_secs" class="odometer"></span> 秒 </div>
<script no-pjax>
var blog_running_days=document.getElementById("blog_running_days");
var blog_running_hours=document.getElementById("blog_running_hours");
var blog_running_mins=document.getElementById("blog_running_mins");
var blog_running_secs=document.getElementById("blog_running_secs");
function refresh_blog_running_time(){
    //此处月份要-1，因为JS中Date月份从0开始算
    //2023.1.11开始运行
    var time = new Date() - new Date(2023,06,10, 10, 30, 0);
    var d=parseInt(time/24/60/60/1000);
    var h=parseInt(time%(24*60*60*1000)/60/60/1000);
    var m=parseInt(time%(60*60*1000)/60/1000);
    var s=parseInt(time%(60*1000)/1000);
    blog_running_days.innerHTML=d;
    blog_running_hours.innerHTML=h;
    blog_running_mins.innerHTML=m;
    blog_running_secs.innerHTML=s;
}
refresh_blog_running_time();
if (typeof(bottomTimeIntervalHasSet) == "undefined"){
    var bottomTimeIntervalHasSet = true;
    setInterval(function(){refresh_blog_running_time();},500);
}
</script>
<!---------运行时间完------------------->

将Gravatar头像服务替换为Cravatar

解决wordpress评论头像显示问题

外观——主题文件编辑器——function.php文件里添加

if ( ! function_exists( 'get_cravatar_url' ) ) {
    /**
    *  将Gravatar头像服务替换为Cravatar
    * @param string $url
    * @return string
    */
    function get_cravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com',
            '0.gravatar.com',
            '1.gravatar.com',
            '2.gravatar.com',
            'secure.gravatar.com',
            'cn.gravatar.com'
        );
        return str_replace( $sources, 'cravatar.cn', $url );
    }
    add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}

css美化代码合集

外观——自定义——额外css

/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
	filter: brightness(150%);
}
/*隐藏左侧栏搜索框*/
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
	.leftbar-banner {
	border-radius: var(--card-radius);
	}
}
/*=========字体设置============*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
/*字体*/
@font-face {
	font-family: myFont;
src:url(https://img.kshar.cn/js/FZFWZZAY.woff2) format('woff2');
	font-display: swap;
}
body{
    font-family:"myFont" !important
}
/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}
/*说说预览模式的代码字体颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}
/*横幅字体大小*/
.banner-title {
  font-size: 2.2em;
}
.banner-subtitle{
  font-size: 20px;
}
 
/*文章标题字体大小*/
.post-title {
    font-size: 22px
}
 
/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;
}
 
/*评论区字体大小*/
p {
    font-size: 1.2rem
}
 
/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}
 
/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}
 
/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 20px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}
 
/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}
 
/*========颜色设置===========*/
 
/*文章或页面的正文颜色*/
body{
    color:#364863
}
 
/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}
 
/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}
 
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}
 
/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*========透明设置===========*/
 
/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.85) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}
 
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}
 
/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
 
/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}
 
/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/
/*========排版设置===========*/
 
/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}
 
/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}
 
/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}
 
/*正文图片边距修改*/
article figure {margin:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}
 
/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}
 
/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'myFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.2rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}
 
/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 15rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}
 
/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}

yum install epel-release -y
yum -y update && yum -y install certbot

2.申请证书

停止nginx

systemctl stop nginx
certbot certonly --standalone -d 域名 --email 邮箱 --agree-tos --no-eff-email --force-renewal

证书存放目录目录为：/etc/letsencrypt/live/

3.编写自动续签脚本

内容自行修改

cat auto_cert_renewal-1.sh 
# 定义证书存储目录
certs_directory="/etc/letsencrypt/live/"

days_before_expiry=5  # 设置在证书到期前几天触发续签

# 遍历所有证书文件
for cert_dir in $certs_directory*; do
    # 获取域名
    domain=$(basename "$cert_dir")

    # 忽略 README 目录
    if [ "$domain" = "README" ]; then
        continue
    fi

    # 输出正在检查的证书信息
    echo "检查证书过期日期： ${domain}"

    # 获取fullchain.pem文件路径
    cert_file="${cert_dir}/fullchain.pem"

    # 获取证书过期日期
    expiration_date=$(openssl x509 -enddate -noout -in "${cert_file}" | cut -d "=" -f 2-)

    # 输出证书过期日期
    echo "过期日期： ${expiration_date}"

    # 将日期转换为时间戳
    expiration_timestamp=$(date -d "${expiration_date}" +%s)
    current_timestamp=$(date +%s)

    # 计算距离过期还有几天
    days_until_expiry=$(( ($expiration_timestamp - $current_timestamp) / 86400 ))

    # 检查是否需要续签（在满足续签条件的情况下）
    if [ $days_until_expiry -le $days_before_expiry ]; then
        echo "证书将在${days_before_expiry}天内过期，正在进行自动续签。"

        # 停止 Nginx
        systemctl stop nginx

        # 续签证书
        certbot certonly --standalone -d $domain --email 1172338990@qq.com --agree-tos --no-eff-email --force-renewal

        # 启动 Nginx
        systemctl start nginx

        echo "证书已成功续签。"
    else
        # 若未满足续签条件，则输出证书仍然有效
        echo "证书仍然有效，距离过期还有 ${days_until_expiry} 天。"
    fi

    # 输出分隔线
    echo "--------------------------"
done

添加执行权限并测试

chmod +x auto_cert_renewal-1.sh

sh auto_cert_renewal-1.sh 
检查证书过期日期： kshar.cn
过期日期： Sep 23 07:56:22 2024 GMT
证书仍然有效，距离过期还有 89 天。
--------------------------

4.设置定时任务

echo "0 0 * * * cd ~ && ./auto_cert_renewal-1.sh" | crontab -

<?php

$dir = 'img';

$arr = scandir($dir);

array_splice($arr,0,2);

shuffle($arr);

$image=$arr[0];

header("Location:"."https://clls.online/" . "$dir/$image");
?>

网站根目录创建img文件夹，将需要的图片丢进去，Location后面的换成自己的博客地址

地址栏输入域名加php文件名访问测试

nginx防盗链

在你需要设置防盗链的server块里添加如下配置

        #防盗链
        location ~* \.(jpg|jpeg|png|gif|swf|flv|mp4|ico)$ {
                valid_referers none blocked 你的域名
                       ~\.google\.;

            if ($invalid_referer) {
                    return 403;
            }
        }

winget install Hugo.Hugo.Extended

创建网站

hugo new site blog
cd blog

下载stack主题

git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

拷贝D:\hugo\themes\hugo-theme-stack\exampleSite目录下的content目录与hugo.yaml到根目录

根目录创建\scss\custom.scss

以下操作路径为\根目录\assets\scss\custom.scss

## 全局样式调整
// 页面基本配色
:root {
  // 浅色模式配色
  --body-background: #EBEBEB;
  // 全局顶部边距
  --main-top-padding: 30px;
  // 全局卡片圆角
  --card-border-radius: 25px;
  // 标签云卡片圆角
  --tag-border-radius: 8px;
  // 卡片间距
  --section-separation: 40px;
  // 全局字体大小
  --article-font-size: 1.8rem;
  // 行内代码背景色
  --code-background-color: #f8f8f8;
  // 行内代码前景色
  --code-text-color: #e96900;
  // 暗色模式下样式
  &[data-scheme="dark"] {
    // 行内代码背景色
    --code-background-color: #ff6d1b17;
    // 行内代码前景色
    --code-text-color: #e96900;
  }
}

//------------------------------------------------------
// 修复引用块内容窄页面显示问题
a {
  word-break: break-all;
}

code {
  word-break: break-all;
}

//---------------------------------------------------
// 文章内容图片圆角阴影
.article-page .main-article .article-content {
  img {
    max-width: 96% !important;
    height: auto !important;
    border-radius: 8px;
  }
}

//------------------------------------------------
// 文章内容引用块样式
.article-content {
  blockquote {
    border-left: 6px solid #358b9a1f !important;
    background: #3a97431f;
  }
}
// ---------------------------------------
// 代码块基础样式修改
.highlight {
  max-width: 102% !important;
  background-color: var(--pre-background-color);
  padding: var(--card-padding);
  position: relative;
  border-radius: 20px;
  margin-left: -7px !important;
  margin-right: -12px;
  box-shadow: var(--shadow-l1) !important;

  &:hover {
    .copyCodeButton {
      opacity: 1;
    }
  }

  // keep Codeblocks LTR
  [dir="rtl"] & {
    direction: ltr;
  }

  pre {
    margin: initial;
    padding: 0;
    margin: 0;
    width: auto;
  }
}

// light模式下的代码块样式调整
[data-scheme="light"] .article-content .highlight {
  background-color: #fff9f3;
}

[data-scheme="light"] .chroma {
  color: #ff6f00;
  background-color: #fff9f3cc;
}

//-------------------------------------------
// 设置选中字体的区域背景颜色
//修改选中颜色
::selection {
  color: #fff;
  background: 	#1E90FF;
}

a {
  text-decoration: none;
  color: var(--accent-color);

  &:hover {
    color: var(--accent-color-darker);
  }

  &.link {
    color: #4288b9ad;
    font-weight: 600;
    padding: 0 2px;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

//-------------------------------------------------
//文章封面高度更改
.article-list article .article-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;

  @include respond(md) {
    height: 200px;
  }

  @include respond(xl) {
    height: 305px;
  }
}

//---------------------------------------------------
// 全局页面布局间距调整
.main-container {
  min-height: 100vh;
  align-items: flex-start;
  padding: 0 15px;
  gap: var(--section-separation);
  padding-top: var(--main-top-padding);

  @include respond(md) {
    padding: 0 37px;
  }
}

//--------------------------------------------------
//页面三栏宽度调整
.container {
  margin-left: auto;
  margin-right: auto;

  .left-sidebar {
    order: -3;
    max-width: var(--left-sidebar-max-width);
  }

  .right-sidebar {
    order: -1;
    max-width: var(--right-sidebar-max-width);

    /// Display right sidebar when min-width: lg
    @include respond(lg) {
      display: flex;
    }
  }

  &.extended {
    @include respond(md) {
      max-width: 1024px;
      --left-sidebar-max-width: 25% !important;
      --right-sidebar-max-width: 20% !important;
    }

    @include respond(lg) {
      max-width: 1280px;
      --left-sidebar-max-width: 20%;
      --right-sidebar-max-width: 30%;
    }

    @include respond(xl) {
      max-width: 1453px; //1536px;
      --left-sidebar-max-width: 15%;
      --right-sidebar-max-width: 25%;
    }
  }

  &.compact {
    @include respond(md) {
      --left-sidebar-max-width: 25%;
      max-width: 768px;
    }

    @include respond(lg) {
      max-width: 1024px;
      --left-sidebar-max-width: 20%;
    }

    @include respond(xl) {
      max-width: 1280px;
    }
  }
}

//全局页面小图片样式微调
.article-list--compact article .article-image img {
  width: var(--image-size);
  height: var(--image-size);
  object-fit: cover;
  border-radius: 17%;
}
```
## 归档页面调整
```
/*-----------归档页面-------------------*/
/*归档页面卡片缩放*/
.article-list--tile article {
  transition: .6s ease;
}
.article-list--tile article:hover {
  transform: scale(1.03, 1.03);
}

// 归档页面两栏-------------------------
@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: 16px;
      }
    }
  }
```
## 友情链接页面调整
```
// 友情链接三栏---------------------------------
@media (min-width: 1024px) {
    .article-list--compact.links {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: var(--card-border-radius);
  
        &:nth-child(odd) {
          margin-right: 8px;
        }
      }
    }
  }
```
## 右侧导航栏动画
```
/*------------------右侧导航栏----------------------*/
//归档小图标放大动画
.widget.archives .widget-archive--list {
  transition: transform .3s ease;
}
.widget.archives .widget-archive--list:hover {
  transform: scale(1.05, 1.05);
}
  //右侧标签放大动画
  .tagCloud .tagCloud-tags a {
    border-radius: 10px;
    font-size: 1.4rem;
    transition: transform .3s ease;
  }
  
  .tagCloud .tagCloud-tags a:hover {
    transform: scale(1.1, 1.1);
  }
```
## 头像动画
```
// 头像旋转动画------------------------------------
.sidebar header .site-avatar .site-logo {
  transition: transform 1.65s ease-in-out; // 旋转时间
}

.sidebar header .site-avatar .site-logo:hover {
  transform: rotate(360deg); // 旋转角度为360度
}
```
## 修改代码块样式
```
//为代码块顶部添加macos样式----------------------------
.article-content {
  .highlight:before {
    content: "";
    display: block;
    background: url(/img/code-header.svg);
    height: 32px;
    width: 100%;
    background-size: 57px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
    background-position: -1px 2px;
  }
}
```
## 修改左侧头像大小及间距
路径：\assets\scss\sidebar.scss </br>
35行添加
```
/*头像大小--------------------*/
    @include respond(2xl) {
        --sidebar-avatar-size: 108px;
        --sidebar-element-separation: 20px;
        --emoji-size: 40px;
    }

安装配置docker

这里

编写yaml文件

tee docker-compose.yml <<-'EOF'
version: '3'
services:
  twikoo:
    image: imaegoo/twikoo
    container_name: twikoo
    restart: unless-stopped
    ports:
      - 8087:8080 ## 将宿主机8087端口映射到容器8080
    environment:
      TWIKOO_THROTTLE: 1000
    volumes:
      - ./data:/app/data ## 将容器的/app/data/目录持久化到宿主机当前目录的data下
EOF
```

启动twikoo容器

-d 后台运行

docker compose up -d
docker ps ## 查看容器状态

放行ecs的8087端口

为twikoo配置https

准备一个子域名并准备对应的ssl证书

配置nginx代理

cat kshar.cn.conf
server {
listen 80;
listen 443 ssl;
server_name cmm.clls.online;
#强制SSL
if ($server_port !~ 443){
rewrite ^(/.*)$ https://$host$1 permanent;
}
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
##ssl路径
ssl_certificate /cert/twikoo/xxx.pem;
ssl_certificate_key /cert/twikoo/xxx.key;

location / {
        proxy_pass  http://127.0.0.1+端口;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header REMOTE-HOST $remote_addr;
   }

}