type
status
date
slug
summary
tags
category
icon
password
🥺
今天又装修了一下我的WordPress站点！（怎么还不去写毕业论文）
这期间又踩了好多坑，大部分问题都解决了，还有一些暂时不知道该怎么办，总之记录一下！
放一下站点链接：https://ja-307020.great-site.net

鼠标点击特效

在网页的footer（或者header也可以）中添加相应代码为鼠标点击加上特效，这里用了比较简单的点击时出现文字浮现效果。
在添加的时候安装了插件WPCode：可以直接在“Header & Footer”选项卡中添加代码，也可以新建一段code snippet，然后将运用位置选择为“Site Wide Footer”。
添加的代码如下，我用了颜文字作为浮现的文字，并把文字颜色设置在蓝色附近：

参考教程

blog.csdn.net
https://blog.csdn.net/weixin_42077074/article/details/121031327

鼠标指针替换

直接在主题的Customize选项中设置Additional CSS就可以更改鼠标指针，不过不知道为什么在我的网站上没有效果。
于是安装了Mouse cursor customizer这个插件，可以使用自定义的图片作为鼠标指针。安装后在WordPress左侧菜单栏的Appearance → Cursor Settings选项卡中进行设置。可以选择两种指针图标，分别对应通常状态和链接点击，图片格式
指针选择：
  • 在b站上可以搜到很多，这个插件支持的格式只有jpg，png和gif，因此对于cur或者ani格式的鼠标指针需要先进行转换。

页面加载动画

ASHE主题在 ashe/templates/header/preloader.php 中定义了默认的页面加载动画。
安装插件Flat Preloader，可以使用自定义图片作为页面加载时的过渡效果，但实际使用时发现gif不能正常播放，也不能调整图片大小。

加入Aplayer播放器

网站美化：为WordPress添加音乐播放器（纯代码实现）
为WordPress网站添加一个音乐播放器，网上大部分的教程都是使用各种插件，有的插件还需要花钱买授权，用着不爽。本文用纯代码为网站添加音乐播放器，安全可靠，可以任意修改。.
网站美化：为WordPress添加音乐播放器（纯代码实现）
https://cuijiahua.com/blog/2018/11/website-21.html
网站美化：为WordPress添加音乐播放器（纯代码实现）
这篇教程写得非常详细，基本上照着做就可以了。
因为主机用的是InfinityFree，不能直接连接到服务器用FTP传文件，所以上传文件的时候我先安装了插件“WP File Manager”。后来发现InfinityFree其实有自带的文件管理功能，包括后续修改代码也直接用了这个功能在线编辑，还是挺方便的。
在网页的footer中加入如下代码，其中data-id是网易云的歌单id。这里还需要注意一下前面上传的css和js文件的路径，一开始写错了路径，f12打开开发者工具检查发现“Uncaught SyntaxError: Unexpected token <”错误，这其实是因为资源获取失败导致404错误，返回的内容是html。

PJAX

⭐
以下内容仅适配于ASHE主题，其他的主题也许可以类推^^
在添加完Aplayer播放器后，发现存在一个问题：由于点击网页上的任意链接都会刷新整个页面，播放器也重新加载，因此跳转时会出现播放中断的情况。但是想到我用NotionNext搭建的站点并没有出现这种情况，在点击链接时，网页页眉和导航栏并没有随着页面跳转而改变，只有网页主体部分进行了刷新。
于是AJAX出现在了我的脑子里（虽然对它的了解十分浅薄），于是开始搜索是否能在WordPress中使用AJAX请求，但是能查到的相关结果基本都在十年前，很多当时能用的插件现在也都下架或者失效了。最后查到了一些和PJAX相关的内容，决定尝试一下。

修改functions.php

下列要修改的文件均位于主题目录下。首先在 functions.php 中加入以下代码：
 
然后确定网页中需要用PJAX容器包裹的部分，借助开发者工具可以很方便地进行定位。
一开始我选择的是 class="page-content" 的元素，这部分包括了网页正文内容，右侧导航栏，以及ASHE主题的“上一篇/下一篇”按钮。但完成后续操作后，发现右侧导航栏不再随着页面的滚动而移动，尝试过用回调函数但是不知道怎么写……
后来想了一会儿决定把PJAX容器包裹的部分进一步缩小，排除右侧导航栏（以及翻篇按钮），只框选博客正文的部分，最终把要刷新的元素定位在 class="main-container"。
由于 class="main-container" 这个元素并未出现在 header.php和 footer.php 中（里面只有"main-container"），所以不需要在这两个文件中添加新的容器。由于包裹范围缩小了，需要修改更内层的代码，分别在下面列出的几个文件中。

修改index.php

index.php 中不包含 main-container ，

修改page.php和single.php

page.php 与 single.php 分别对应页面与文章详情，对于这两个文件均在 main-container 前后加上 pjax-container 。

修改footer.php

在完成以上步骤后，在footer中调用PJAX，这里参考教程中的做法设置了容器的淡入和淡出效果。
如果显示了PJAX的部分页面刷新效果，但在几秒后网页依然全部刷新了，可能是因为 timeout 设置的时间太短。

设置加载动画

由于接入PJAX后，网页只有部分内容进行刷新，之前用插件设置或是主题自带的加载动画均不会显示。这里我在 pjax:send 和 pjax:complete 中加入了gif图片，并设置位置让其显示在窗口中央。（ChatGPT我的好帮手……）

尚未解决的问题

在引入PJAX后出现了一些新问题，一个是上面提到的右侧导航栏显示效果，另一个是翻页按钮无法正常显示。最开始用PJAX只是为了优化音乐播放器的效果，然而出现了新的bug，感觉难以取舍……好在把右侧导航栏改好了，但是翻页按钮目前还不知道怎么办，先凑合着用吧ww

参考教程

前两篇对我帮助很大~一般情况下只阅读这两篇应该就足够了！
WordPress主题 PJAX 无刷新以及渲染问题的修复 - hiRipple
WP博客全局配置PJAX。
WordPress主题 PJAX 无刷新以及渲染问题的修复 - hiRipple
https://hiripple.com/archives/2982
WordPress主题 PJAX 无刷新以及渲染问题的修复 - hiRipple
Typecho 主题 PJAX 无刷新以及遇到的一些问题 - SkyWT
最近给 Typecho 主题 Daydream 加上了 PJAX 无刷新。本以为加一段代码就好，结果遇到了一大堆问题，无法提交评论、插件无效、数学公式没法渲染……特此记录一下。
Typecho 主题 PJAX 无刷新以及遇到的一些问题 - SkyWT
https://blog.skywt.cn/posts/typecho-pjax-and-some-problems#toc_title1
wordpress主题设置pjax - 建站教程 - 逗号CMS
最佳答案在WordPress中设置使用Pjax作为主题加载方式可以提升网站的用户体验和页面加载速度。Pjax是一种无刷新加载页面的技术，它可以在不刷新整个页面的情况下更新部分内容，使用户在浏览网站时感觉更加流畅和快速。下面是使用Pjax设置WordPress主...
wordpress主题设置pjax - 建站教程 - 逗号CMS
https://cms.douhao.com/jiaocheng/fb7690c68357db02.html
为Hexo博客添加音乐播放器并保持跳转时不中断播放状态 - 掘金
由于主题布局的关系，个人博客网站两翼的位置比较空，所以我在右边摆了一只看板娘作为平衡，就算左边不摆东西，其实已经比较和谐了。但是看到网上有一些个人博客炫酷的音乐播放器，正好置于左下固定位置，就想自己也弄一个也不错。
为Hexo博客添加音乐播放器并保持跳转时不中断播放状态 - 掘金
https://juejin.cn/post/6844904174212087815
PHP全站pjax影响收录,WordPress实现全站PJAX-CSDN博客
文章浏览阅读444次。什么是PJAXpjax = pushState + ajaxpjax是一个Query插件，它通过ajax和pushState技术提供了极速的(无刷新ajax加载)浏览体验，并且保持了真实的地址、网页标题，浏览器的后退(前进)按钮也可以正常使用。pjax的工作原理是通过ajax从服务器端获取HTML，在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中..._pjax 影响收录
PHP全站pjax影响收录,WordPress实现全站PJAX-CSDN博客
https://blog.csdn.net/weixin_42405980/article/details/116246719
利用Pjax实现网页无刷新加载的详细方法
很多朋友问我网站PJAX的问题，这里一篇文章来统一解决大家的问题！ 加入 Pjax 后，我们的网站可以实现无刷新加载网页，加上一个良好的过度 loading 动画，这样用户的...
https://www.jianshu.com/p/808a647dc324
利用Pjax实现网页无刷新加载的详细方法
 
💡
简单的总结：今天折腾了好久，赶在睡前把这篇记录也写完了。建站真是一件复杂的事啊……但是也很有成就感！

动态字体效果

写了几句歌词
Hexo中Buttefly主题美化进阶续篇（十一）
原文地址，阅读效果更佳：Hexo中Buttefly主题美化进阶续篇（十一） | 偷掉月亮 (moonshuo.cn) 大家好，我是阿硕，专注与后端，略懂前端的一个菜鸟程序猿，今天将为大家讲述Butterfly主题的我们页面的整体美化，其实前面已经出过两个这样的美化，但是随着时间的交替，发现可能适合我们的美化，这里将大家可以自由进行选择 个人卡片背景图Hexo中Buttefly主题美化进阶（八） |
Hexo中Buttefly主题美化进阶续篇（十一）
https://moonshuo.cn/posts/12667.html
Hexo中Buttefly主题美化进阶续篇（十一）
 
用ChatGPT写的版本：
 

将博客内容的背景改为透明

这里的背景指的是文章、右侧导航栏的颜色，这层在前面添加星星特效的上方，对应的是page-content元素。找这个元素的css具体在哪个文件里设置花了好多时间，感觉一直在按f12……ASHE有三种皮肤——default，dark和box，每个皮肤的元素颜色有一些微小的区别。我是前端笨蛋，靠着在一个个可能有相关内容的文件里里查有没有出现对应的颜色，再修改那些看起来和目标元素有关的地方，然后观察页面有没有变化。
default皮肤的白天模式，目标元素css在 ashe/inc/customizer/dynamic-css.php 中：
 
顺带一提，dark和box皮肤的css在 ashe/inc/customizer/css/theme-skins.php 里。
关于default皮肤的夜间模式，一开始我修改的是dark皮肤的css，但是改完发现default夜间并不会变，然而也没找到default夜间的css在哪，最后靠查找 dark-mode-switcher 这个按钮绑定的函数才找到，都快把主题文件夹里的东西翻遍了……文件位置在 ashe/assets/js/custom-scripts.js ，我真的没想到作者会把css写在这里TT
 
修改一下 page-content 和 page-footer 的透明度：
 
改完发现页面显示并没有变化，开始排查问题。切换按钮绑定的函数如下：
 
在开发者工具的Application选项卡下查看local storage，发现 asheDarkMode 的值确实随着按钮点击在on和off之间切换，处于on状态时，head 元素的最后增加了一段夜间模式的css，然而经过查看发现依然是修改前的css。于是想到清除浏览器缓存——重新加载后， page-content 确实变透明了，但 page-footer 依然没有变（虽然css已经变了），暂时没找出问题，先这样吧！该休息了hhh