Pouck主题个人优化

共计 3349 个字符，预计需要花费 9 分钟才能阅读完成。

1、调整页面整体布局宽度

修改文件：wp-content/themes/wordpress-theme-puock-2.7.5/assets/dist/style/style.min.css

@media (min-width: 1360px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1500px;
  }
}

文件格式化后的一千五百行的位置，修改max-width大小就行了

2、设置图片左对齐

修改文件：wp-content/themes/wordpress-theme-puock-2.7.5/assets/dist/style/style.min.css

#post .entry-content img:not(.wp-smiley),
#page .entry-content img:not(.wp-smiley),
.block-content .entry-content img:not(.wp-smiley),
#page .entry-content-box img:not(.wp-smiley),
.block-content .entry-content-box img:not(.wp-smiley) {
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
#post .entry-content-box img:not(.wp-smiley){
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
  display: unset !important;
}

去掉一个样式即可，在大概2130行左右：

3、设置主题圆角

编写以下 css 放入“Puock 主题配置 - 脚本及样式 - 头部自定义全局 CSS 样式”

.p-block,.widget,.input-group {border-radius: 20px;}
.widget-puock-author .header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.col-6,.p-0 {border-radius: 20px;}
.abhl {border-radius: 20px;}
.wight{filter: blur(1px);
} 

4、设置底部备案

© <script>document.write(new Date().getFullYear());</script> 域名 • <a href="https://beian.miit.gov.cn/" target="_blank">你的备案号</a>

5、设置标题栏的样式变化

将以下代码粘贴到主题编辑器中的footer.php 的 </body> 前

<!-- 标题字符 -->
<script>
$.getScript("http://wandereryjh.top/wp-content/themes/wordpress-theme-puock-2.7.5/assets/dist/js/title.js");
</script>

在主题的assets/dist/js目录下新建title.js文件，输入以下内容：

// 浏览器搞笑标题  快回来!!! 终于回来了
// Based on: https://static.likepoems.com/cdn/javascript/onfocus.js
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '哎，人不见了？！';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '哟！回来啦！';
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

6、添加天气预报小组件

在正文内容 - 侧边栏旁边添加一个Pouck HTML小组件，添加代码下：

<iframe width="450" height="282" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>

7、添加今年已经过了多少

在首页小工具侧边栏，添加Pouck HTML小组件，代码如下：

<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_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;
}

</style>

转载CNLOVAU博客内容，文章链接：主题美化合集 - CN·LOVAU