Agron 主题建站记录

年度倒计时显示(左侧栏)

在左侧栏里添加工具 ->简码，添加代码：

<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext"></span>
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {
let year = new Date().getFullYear();
("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);("#yearprogress_progresstext").text(progressshort + "%");
("#yearprogress_progresstext_full").text(progress + "%");("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {
yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {
transform: translateY(-45px);
}
</style>

小工具栏设置

透明设置

在左侧栏里添加工具 ->简码，添加代码：

/*小工具栏背景完全透明*/
/*小工具栏是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;
}

缩小字体

在左侧栏里添加工具 ->简码，添加代码：

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

网站底部信息

在Argon主题选项->页脚->页脚内容添加代码：

<style>
/* 核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}
</style>

   <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
        <span class="badge-value bg-orange"><a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">ICP备案号</a> |
            <a href="https://beian.mps.gov.cn/" rel="noreferrer" target="_blank">
            <img src="备案图标url" style="width: 20px; height: 20px;"> 公网安备案号</a>
        </span>
    </div>

    <div class="github-badge-big">
        <span class="badge-subject">Copyright </i></span>
        <span class="badge-value bg-red"><i class="fa fa-copyright" aria-hidden="true"></i> 开始年-当前年
            <a href="https://YourWebSite" target="_blank" one-link-mark="yes"> YourName </a>
        </span>
       </div>

    <div class="github-badge-big">
        <span class="badge-subject">联系我 </i> </span>
        <span class="badge-value bg-red"> <i class="fa fa-envelope-o" aria-hidden="true"></i> 
            <a href="mailto:example@email.com" target="_blank" one-link-mark="yes"> 
 example@email.com </a>
        </span>
    </div>

    <!-- 运行时间 -->
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span
            class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            days
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S
        </span>

 <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() {
var time = new Date() - new Date(2024, 10, 17, 0, 0, 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>

滚动模糊

在 Argon主题选项->脚本->页头脚本加入下面代码：

<!--滚动模糊--><script>
window.addEventListener("scroll", function (e) {
  if (window.scrollY > window.innerHeight * 0.3) {
    document.querySelector("#content").classList.add("scrolled");
  } else {
    document.querySelector("#content").classList.remove("scrolled");
  }
});</script>
<style>
#content.scrolled::before {
  filter: blur(13px);
  transform: scale(1.02);
}
#content::before {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}</style>

顶部Banner美化

白云效果

在自定义->额外 CSS 中加入以下代码：

/* 白云效果 */
.banner-title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
transform:translatex(-50%);
max-width:500px;
z-index: -100;
background:white;
filter: blur(30px);
opacity: 0.5;
}

正文内容

正文表格样式修改(居中与线条颜色)

在自定义->额外 CSS 中加入以下代码：

/*正文表格样式修改*/
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;}

引文属性设置

在自定义->额外 CSS 中加入以下代码：

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.13) !important;
    width: 100%
}
/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

安全设置

网站部署成功后，安全问题也是每个站长不得不考虑的问题。下面提供几种方法，可以提高网站的安全性，降低网站被暴力破解的可能。

author 页面地址

author 页面地址为http://yoursite/?author=1，ID 会依据你注册的用户数量自增，请求此 URL 会301到另一个 URL，新的 URL 为 http://.../author/后台登录的用户名

会导致注册用户名名泄露，解决方案这里提供两个：

1. 在主题代码里实现：

   /* 在主题代码的function.php中添加 */
   /* author 页面地址 */
   function my_author_link() {
   return home_url('/');
   }
   add_filter('author_link', 'my_author_link');
   

   访问带有 author 参数的URL, 就跳向主页

2. 通过 .htaccess 文件添加重定向

   在 .htaccess文件中添加

   redirect 301 URL_1 URL_2 
   

   URL_1 为使用author参数系统返回的URL

   URL_2 为你的网站主页

xmlrpc.php

xmlrpc 为 WordPress 远程调用的接口，使用 xmlrpc 调用接口进行账号保存没有验证码，最大错误尝试次数限制等，一次 POST 请求可以尝试大量的账号与密码。为了解决这一风险，最好禁用该接口。下面提供2种解决方案：

1. 在 Apache, Nginx 等 Web 服务器中限制 xmlrpc.php 访问

   location = /xmlrpc.php {
      deny all;
   }
   

2. 修改 WordPress 配置文件 wp-config.php

   add_filter('xmlrpc_enabled', '__return_false');
   

WordPress 后台默认地址

后台默认地址 http://yoursite/wp-login.php。通过修改主题的 function.php 修改该默认地址。添加如下代码：

function login_protection() {
    if ($_GET['word'] != 'press')
        header('Location : /');
}
add_action('login_enqueue_scripts',`login_protection`);

后台登录地址变为http://yoursite/wp-login.php?word=press。 word 与 press自行修改。

或者使用插件解决

WPS Hide Login插件可以隐藏登录入口

WPS Limit Login 限制后台登录试错次数。

restAPI

WordPress 的 resAPI可会暴露用户名.通过 GET 请求GET http://yoursite/wp-json/wp/v2/users。返回link字段中包含用户名。

解决方法：

1. 修改主题的 function.php 文件。添加如下代码

   add_filter( 'rest_endpoints', function( endpoints ){
      if(!is_user_logged_in()) {
          if ( isset(endpoints['/wp/v2/users'] ) ) {
              unset( endpoints['/wp/v2/users'] );
          }
          if ( isset(endpoints['/wp/v2/users/(?P<id>[\d]+)'] ) ) {
              unset( endpoints['/wp/v2/users/(?P<id>[\d]+)'] );
          }
      }
      returnendpoints;
   });
   

   或者完全禁用

   /*禁用未登录的用户获取resAPI*/
   function rest_only_for_authorized_users($wp_rest_server) {
      if ( !is_user_logged_in() ) {
          wp_die('非法操作！');
      }
   }
   add_filter('rest_api_init', 'rest_only_for_authorized_users', 99);
   

2. 通过 Web 服务器限制

   /* 完全禁止 */
   location ~* /wp/v2/(.*) {
      deny all;
   }
   
   /* 或者限制user */
   location ~* /wp-json/wp/v2/users(\/)?(.*)? {
      deny all;
   }
   

参考文章

本文的代码参考自下面这些文章：

1. Argon主题美化 – 北冥红烧鱼的芥子空间
2. Argon主题博客美化 – Echo小窝
3. 博客Argon主题美化 – pidanxia’ s Blog
4. 玩转代码|WordPress防止暴力破解管理员密码_wordpress绕过密码-CSDN博客