codex—pet自从上次 cluadecode 源码泄露后，大家发现还有未发布的 pet 宠物功能，然后没过几天 cc 就上线这个功能了。就在几天前，codex app 也上线宠物功能，不过比起 cc 的，我还是喜欢 codex 的宠物功能 (特指 app 桌面版)。而且 codex app 的更新速度十分频繁，基本是每天都会更新下。昨天在小红书上正好刷到了 codex 自制宠物，于是便试了下，具体步骤就是使用 codex 的官方 skill：Hatch Pet下载完 skill 后，选择素材图片就行了，然后开始让 codex 生成对应的宠物图。不过还是挺费 token 的，这里提醒下！！！博客宠物自制完宠物后，突然想着要不给博客也添加一个吧，正好 MiMo 还有许多额度没有用完，于是说干就干，开始了面向 cc 编程，最后效果个人感觉还是不错的下面就是一些功能介绍了，233基本功能显示与隐藏：支持前台一键隐藏/显示宠物，状态保存到浏览器本地，刷新不丢失四角定位：支持左上、右上、左下、右下四个默认位置，后台可配置自由拖动：用户可直接拖动宠物到任意位置，位置自动保存响应式适配：桌面端和手机端自动调整尺寸，不遮挡主要内容深色模式：气泡样式自动适配深色主题无障碍支持：系统开启"减少动态效果"时只显示静态首帧动作系统宠物有 9 种动作状态，根据页面上下文自动切换：动作说明触发场景idle待机首页、文章列表、说说列表running奔跑文章详情页review审视说说详情页waiting等待搜索页failed失败404 页面waving挥手点击宠物、评论成功jumping跳跃页面加载running-right向右跑向右拖动running-left向左跑向左拖动页面专属台词不同页面会显示专属气泡消息，每次进入都触发：404 页面：页面走丢啦，换个页面吧说说列表：我最喜欢吐槽了友链页面：这些都是小伊的好朋友留言板：欢迎留言哦～归档页面：咋这么多水文啊 555台词系统点击宠物、焦点聚焦、隐藏恢复、自动冒泡时，会从 67 条台词中随机显示一条。台词库按风格分类：原版：我再也不学计算机了、好想喝奶茶呀...程序员日常：代码写得好，不如 bug 找得早、只要我不看 bug，bug 就不存在...摸鱼哲学：上班如上坟，摸鱼如度假、人生苦短，我用摸鱼...吃货语录：干饭不积极，思想有问题、奶茶一杯，快乐起飞...打油诗：床前明月光，疑是地上霜，低头写代码，bug 一行行...网络热梗：我太难了.jpg、奥利给！干就完了！...小依专属：小依虽小，头发不多、你来看我啦，开心～...周杰伦：从前从前有个人爱你很久、故事的小黄花...孙燕姿：我遇见谁会有怎样的对白、天黑黑，要下雨了...朴树：我曾经跨过山和大海、平凡之路...夜空中最亮的星：夜空中最亮的星，能否听清...其他经典：后来、突然好想你、倔强、光辉岁月...自动冒泡每隔 30~60 秒（随机间隔），宠物会自动冒泡显示一条随机台词，让页面更有生气。仅在宠物可见且未开启减少动画时触发。评论联动评论成功提交后，宠物会自动挥手并显示专属气泡。支持两套评论系统，且能自动区分评论类型：文章评论成功：显示"感谢你的评论呀～"，回到 running 状态说说评论成功：显示"让我看看说说的啥"，回到 review 状态交互细节首次访问：显示气泡"小依已上线。"，同一会话内不再重复点击宠物：随机台词 + 挥手动画 + 展开隐藏按钮鼠标悬停：显示宠物名称拖动：切换奔跑动画，松手后恢复当前页面状态页面切换：自动恢复对应页面的动作状态浏览器标签切换：标签隐藏时暂停动画，恢复时继续
前言虽然是考试月，并且一星期三门专业课，但是这个憨憨计组真的是越看越头疼，感觉再看下去要死在宿舍了。在闲逛友链博客时，突然想在虚拟机里建个博客（虽然这两件事情之间并无关联），然后通过内网穿透进行访问，这样等下次买了小主机后就有经验了，于是就有了此篇教程文章。此次博客搬迁教程不涉及任何面板工具，从而降低功耗，适合建站小白观看。此次迁移以 wordpress 为例，但 typecho 搬迁方法也和这个一样。如果使用宝塔面板，可以直接使用宝塔的免费一键迁移功能，应用商店搜索即可。1. 安装lamp环境（以Ubuntu为例）更新软件包列表：打开终端（Terminal），执行以下命令以更新软件包列表:sudo apt update安装Apache Web服务器：在终端中执行以下命令安装Apache：sudo apt install apache2验证Apache是否安装成功：安装完成后，Apache服务会自动启动。在浏览器中输入服务器的IP地址或域名，如果看到默认的Apache欢迎页面，表示安装成功。安装MySQL数据库服务器：在终端中执行以下命令安装MySQL服务器：sudo apt install mysql-server安装PHP：在终端中执行以下命令安装PHP及常用扩展：sudo apt install php libapache2-mod-php php-mysql验证PHP是否安装成功：创建一个简单的PHP文件以验证PHP是否正常工作。在终端中执行以下命令：sudo vim /var/www/html/info.php在打开的文件中，输入以下内容：php phpinfo(); ?保存并关闭文件。然后，在浏览器中输入服务器的IP地址或域名，加上/info.php，如果看到PHP信息页面，表示安装成功。2. 设置MySQL密码打开终端（Terminal），以root用户身份登录或使用具有sudo权限的用户。运行以下命令以连接到MySQL服务器：mysql -u root进入MySQL命令行后，执行以下命令来更改root用户的密码（将new\_password替换为您要设置的密码）：ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql\_native\_password BY 'new\_password';刷新权限使更改生效：FLUSH PRIVILEGES;退出MySQL命令行：exit3. 迁移博客在源服务器上将**WordPress文件夹**（即博客文件夹）打包为一个压缩文件（例如：wordpress.zip）。zip -r wordpress.zip /path/to/wordpress将压缩文件通过scp命令拷贝到目标服务器上。（就是**将数据库文件传送到目的服务器**）scp wordpress.zip user@目的ip:/path/to/destination\_folder在目标服务器上**解压缩**WordPress文件。unzip wordpress.zip将WordPress文件夹移动到**Web服务器的文档根目录**。sudo mv /path/to/destination\_folder/wordpress /var/www/html/授予适当的文件权限。sudo chown -R www-data:www-data /var/www/html/wordpress sudo chmod -R 755 /var/www/html/wordpress连接到MySQL数据库，并创建一个新的数据库。mysql -u root -p CREATE DATABASE wordpress\_database;**导入**源服务器上的**数据库备份文件**(source\_server\_backup.sql)到新创建的数据库。mysql -u root -p wordpress\_database < /path/to/source\_server\_backup.sql在WordPress的**wp-config.php**文件中更新数据库连接信息，包括数据库名称、用户名和密码。vim wp-config.php define('DB\_NAME', 'wordpress\_database'); /\* 数据库名 \*/ define('DB\_USER', 'root'); /\* 用户名 \*/ define('DB\_PASSWORD', 'new\_password'); /\* 密码 \*/检查Apache的配置文件（通常是/etc/apache2/sites-available目录下的000-default.conf.conf文件）是否正确设置了WordPress的虚拟主机，并且指定了正确的文档根目录和文件权限。在 VirtualHost 标签之间，DocumentRoot后面的改为你的**博客绝对路径**ServerAdmin webmaster@localhost DocumentRoot /var/www/html/liveout.cn重启 Apache 以使配置生效：sudo systemctl restart apache2打开网页浏览器，访问新服务器的地址，应该能够看到WordPress网站的动态页面。如果跳转博客其他页面请求失败，则检查WordPress文件里是否有一个 .htaccess 文件，并且具有正确的重写规则。由于 .htaccess 文件是一个隐藏文件（文件名以点号开头），某些文件管理器默认情况下可能不会显示它。你需要在文件管理器中启用显示隐藏文件选项，或者通过命令行查看和编辑.htaccess 文件。# BEGIN WordPress RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST\_FILENAME} !-f RewriteCond %{REQUEST\_FILENAME} !-d RewriteRule . /index.php [L]
前言下面的主题都是我在网络上搜寻到的，具体好不好用需要自己尝试。如果有什么好的博客主题也可以像我投稿哦~(不限于Wordpress)以下主题源码链接：https://pan.baidu.com/s/1pxp_ag92KVeC2tKkm20Qrg?pwd=echo提取码：echoWordpress1. Argon官网(作者)：solstice23 – BlogGithub: solstice23/argon-theme: ? Argon - 一个轻盈、简洁的 WordPress 主题 (github.com)使用文档：首页 - Argon Theme Docs (solstice23.top)2. Sakura(iro).png)作者：WordPress 主题 Sakura ? | 樱花庄的白猫 (2heng.xin)官网: Sakurairo 主题周边网站演示: 使用本主题的博客 | Sakurairo 主题周边网站Github: Sakurairo 主题周边网站3. Memory官网(作者):WordPress响应式主题Memory (shawnzeng.com)Github地址：ShawnZeng1996/Memory: A theme for wordpress. (github.com)免费版教程：Memory免费版使用教程 (shawnzeng.com)付费版教程：Memory付费版使用教程 (shawnzeng.com)4. Kratos官网(作者)：二次元向 WP 主题: Kratos-pjax - 犬's Blog (moedog.org)GIthub(原版): seatonjiang/kratos: ? WordPress theme that focus on reading experience (github.com)Github(修改): https://github.com/xb2016/Kratos-pjax5. boxmoe-dove(盒子萌)官网(作者)：盒子萌 - 一个基于内容分享,创作与灵感结合折腾的笔记博客 (boxmoe.com)Github: baomihuahua/boxmoe-dove-: 盒子萌鸽子版 WordPress主题 (github.com)文档: WordPress博客主题二次元风-lolimeow主题 - 盒子萌 (boxmoe.com)B站教程：wordpress主题lolimeow大概多设置boxmoe也差不多这样设置哔哩哔哩bilibili
前提这篇文章并不是关于搭建博客的详细教程，而是关于一些常见博客搭建方法的简要概述，不过其具体搭建方法B站都有视频，相关链接已放在各个方法下面常见搭建博客方法Wordpress需要花钱购买域名和服务器，但是是动态网页，后期管理没有难度，参考我的网站 https://liveout.cnHexo托管不花钱。但是访问速度慢，且是静态网页，后期发表文章等需要难度，参考 https://pgwind.github.ioTypecho，这个我不太了解，可以看下官网：https://typecho.org/专业的不多说，学计算机的应该都大概懂，参考 http://space.eyescode.top/网页类型静态网页静态网页有以下特点：静态网页不能自动更新，若要对静态页面进行更新，就要重新编写 HTML 源文件，然后再上传。因此静态网页的制作和维护工作量相当大。静态网页的内容不随浏览用户、浏览时间等条件的变化而变化。无论何人、何时、何地浏览网页，它的内容都是一成不变的（不包括使用 JavaScript 实现的一些简单特效）。静态网页一经发布，无论浏览者浏览与否，它都是真实存在的一个文件，都对应一个 URL（文件在网上的地址）。用静态网页实现人机交互有相当大的局限性。由于不能动态生成页面，所以用静态网页来实现人机交互是很困难的，在功能上有很大限制。动态网页动态网页有以下特点：动态网页在服务器端运行，客户机上看到的只是它的返回结果，不可能看到它的源文件。而静态网页则只能通过服务器把网页文件原封不动地传给客户机，本身不进行任何处理。不同的人、不同时间、不同地点浏览同一个动态网页，根据代码处理结果不同，会返回不同的内容。动态网页只有经客户浏览时才会返回一个完整的网页，而其本身并不是一个独立存在于服务器的网页文件。与静态网页相比，动态网页更容易实现人机交互。与数据库相联系，能实现更为强大的功能。由动态网页构建的网站维护起来比由静态网页构建的网站容易，只需要更新调用的数据（如数据库内容）即可。差别静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。每个人看到的网页都一样动态网页相对于静态网页来说，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。即每个人看到的页面都不一样1. WordpressWordPress是一款能让您建立出色网站、博客或应用程序的开源软件。用户可以通过服务器安装宝塔面板，然后通过宝塔面板在服务器里安装相关环境应用从而完成对博客的搭建。推荐观看B站视频 https://www.bilibili.com/video/BV1Vg411w7os/?spm_id_from=333.337.search-card.all.click博主自己录制教程：https://www.bilibili.com/video/BV1h24y1Q7Pb/服务器介绍存放网站内容，展示在互联网上，具有公网ip购买阿里云，腾讯云，华为云，都有便宜的学生机域名介绍由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，人们设计出了域名，并通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网域名解析到服务器，从而使他人可以通过域名访问服务器内容购买阿里云，腾讯云，华为云宝塔面板用来进行服务器的管理，一键安装相关依赖，可以给网站添加证书2. HexoHexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。即把用户的markdown文件，按照指定的主题解析成静态网页。通过将网站内容托管到 github 完成网站搭建，本地需要安装 node.js 和 git 以及相关运行环境教程文章 https://sunguoqi.com/posts/54163.html推荐观看B站视频 https://www.bilibili.com/video/BV1mU4y1j72n/?spm_id_from=333.337.search-card.all.clickMac用户推荐观看B站视频 https://www.bilibili.com/video/BV13v4y1c75G/?spm_id_from=333.337.search-card.all.clickGithubGitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。GitGit 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目通过git 上传网站内容，托管到githubNode.js Node.js 是一个JavaScript 运行环境。javascript作为开发Web页面的脚本语言,可以开发网站后台通过node.js安装hexo框架3. Typecho介绍Typecho是由type和echo两个词合成的，来自于开发团队的头脑风暴。Typecho基于PHP5开发，支持多种数据库，是一款内核强健﹑扩展方便﹑体验友好﹑运行流畅的轻量级开源博客程序。选用Typecho，搭建独一无二个人网络日志发布平台，享受创作的快乐。官网Typecho Official Site教程知乎：30分钟搭建 Typecho 个人博客教程 - 知乎 (zhihu.com)B站：无具体推荐4. 专业博客效果参考：瞳孔的个人空间 (eyescode.top)前端HTMLHTML(HyperText Markup Language),全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。CSSCSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言JavaScriptJavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数]式编程范式。后端
缘由一开始是因为兴趣使然，才搭建了一个个人博客，没想着会长远做下去。后来看着越来越多的文章，以及结识的博主变多，便打算一直运营下去。于是我开始对网站进行了优化，第一步便是将博客图片托管到其他平台，从而降低服务器负载。可惜找了几个教程，都不怎么样，于是便打算自己写一个。二级域名(域名已备案)从主域名那创建一个二级域名，具体操作看购买域名厂商的官方文档，注意，一定不要用主域名，否则待会无法绑定服务，因为主域名解析的主机记录已经用了www和@创建好二级域名后，先跳转到创建服务，看完后再到这里，对二级域名其进行解析，添加一条记录 其中记录值在创建服务时会给到创建服务打开 [又拍云]: https://www.upyun.com/，创建一个个人账号创建云存储服务创建授权操作员，其他的自己选择进入配置，绑定之前创建的二级域名，并在域名管理对其进行解析，添加记录，记录值为CNAME后面的一串字在右上角文件管理那添加文件，最好按照自己的需要进行文件夹创建与分类http 链接一般都打不开，建议给子域名添加SSL证书，变成 https, 又拍云有免费的证书最后要使用图片，复制图片链接就行
关于新建页面、菜单图标等操作请跳转目录到教程视频~搭建博客遇到的99.9%问题已经在文档、相关视频以及评论区中给出，一定要认真看文档及视频讲解，不会可以翻评论区前言很开心这篇美化文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！常言道：工欲善其事必先利其器，在发表文章前，美化博客，使其利于自己的观看与管理极其重要，所以我四处搜寻，得到了以下美化代码。但是，有时候我们走得太远，会忘了为什么出发。希望阅览本文章的人不要忘记初心，想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记，生活故事。所以，有时候博客美化过度会适得其反，望各位仔细斟酌，莫要使自己的博客变成了花架子，好的文章才是博客之本，立足之根。主题资源链接：https://pan.baidu.com/s/1yyA-m_h_wku7n3qzK-eYEQ?pwd=echo提取码：echo1. 我的博客美化 JSON注意：可复制一键导入别忘记在主题设置页面修改头像、背景以及底部信息等设置哦（博客背景url已失效，需自己填写）建议主题设置全局里 CDN 选择不使用或更换为自己的，否则可能出现CSS样式失效{"argon_theme_color":"#5e72e4","argon_theme_color_hex_preview":"#5e72e4","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"15","argon_card_shadow":"default","argon_page_layout":"double","argon_article_list_waterflow":"2","argon_article_list_layout":"1","argon_font":"serif","argon_assets_path":"jsdelivr_fastly","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"Echo","argon_toolbar_icon":"","argon_toolbar_icon_link":" ","argon_toolbar_blur":"true","argon_banner_title":"Echo‘s blog","argon_banner_subtitle":"Banner 副标题","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"--bing--","argon_banner_background_color_type":"shape-primary","argon_banner_background_hide_shapes":true,"argon_enable_banner_title_typing_effect":"true","argon_banner_typing_effect_interval":"100","argon_page_background_url":"https://yy.liveout.cn/background/wallhaven-yxjm57_1920x1080.png","argon_page_background_dark_url":"https://yy.liveout.cn/background/wallhaven-6dqjdl_1920x1080.png","argon_page_background_opacity":"1","argon_sidebar_banner_title":"左侧栏标题","argon_sidebar_banner_subtitle":"左侧栏子标题（格言）","argon_sidebar_auther_name":"Echo","argon_sidebar_auther_image":"https://yy.liveout.cn/photo/photo1.png","argon_sidebar_author_description":"左侧栏作者简介","argon_sidebar_announcement":"","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"false","argon_seo_description":"网站描述 (Description Meta 标签)","argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）","argon_article_meta":"time|categories|views","argon_show_readingtime":"true","argon_reading_speed":"580","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"参考","argon_show_sharebtn":"true","argon_show_headindex_number":"false","argon_donate_qrcode_url":"https://www.liveout.cn/wp-content/uploads/2022/10/wechat1.jpg","argon_additional_content_after_post":"文末附加内容","argon_related_post":"category,tag","argon_related_post_sort_orderby":"meta_value_num","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"createdtime","argon_outdated_info_days":"1","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，其中的信息可能已经过时，如有错误请发送邮件到big_fw@foxmail.com","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"https://www.liveout.cn/pigeonhole/","argon_footer_html":" \n \n \n 备案号 </span\n>\n苏ICP备0000000000号</a\n>\n|\n<a\nhref=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>苏公网安备 00000000000000号</a\n></span\n>\n \n\n \n \n CDN</span\n></a\n><a\nhref=\"https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>Upyun</a\n></span\n>\n Powered</span\n>WordPress</a\n></span\n>\n \n \nCopyright </span\n>\n2022-2022\n Echo</span\n>\n \n \n \n Running Time</span\n>\ndays\n H\n M\n\nS</span\n>\n \n","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"true","argon_code_highlight_break_line":"false","argon_code_highlight_transparent_linenumber":"false","argon_math_render":"none","argon_mathjax_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js","argon_mathjax_v2_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//cdn.jsdelivr.net/npm/katex@0.11.1/dist/","argon_enable_lazyload":"true","argon_lazyload_threshold":"800","argon_lazyload_effect":"fadeIn","argon_lazyload_loading_style":"1","argon_enable_fancybox":"true","argon_enable_zoomify":"false","argon_zoomify_duration":"200","argon_zoomify_easing":"cubic-bezier(0.4,0,0,1)","argon_zoomify_scale":"0.9","argon_enable_pangu":"article","argon_custom_html_head":"","argon_custom_html_foot":" \n \n \n \n<meting-js \n server=\"netease\" \n type=\"playlist\" \n id=\"7373135320\"\n fixed=\"true\" \n mini=\"true\"\n order=\"list\"\n loop=\"all\"\n preload=\"auto\"\n list-folded=\"true\"\n lrc-type=\"0\"\n>\n</meting-js>\n\n\n","argon_enable_smoothscroll_type":"1_pulse","argon_enable_into_article_animation":"true","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"page","argon_comment_emotion_keyboard":"true","argon_hide_name_email_site_input":"false","argon_comment_need_captcha":"false","argon_get_captcha_by_ajax":"false","argon_comment_allow_markdown":"true","argon_comment_allow_editing":"true","argon_comment_allow_privatemode":"true","argon_comment_allow_mailnotice":"true","argon_comment_mailnotice_checkbox_checked":true,"argon_comment_enable_qq_avatar":"true","argon_comment_avatar_vcenter":"false","argon_who_can_visit_comment_edit_history":"commentsender","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser","argon_show_comment_parent_info":"true","argon_fold_long_comments":"true","argon_gravatar_cdn":"gravatar.pho.ink/avatar/","argon_text_gravatar":"true","argon_enable_search_filters":"true","argon_search_filters_type":"*post,*page,shuoshuo","argon_pjax_disabled":"false","argon_hide_categories":"","argon_enable_login_css":"true","argon_home_show_shuoshuo":"false","argon_fold_long_shuoshuo":"true","argon_enable_timezone_fix":"false","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"0","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}2. 年度倒计时显示(左侧栏)在左侧栏里添加工具——简码，复制一下代码粘贴进去 3. 底部音乐播放下面的调用链接可能会突然失效，如有需要可参考官方文档[APlayer HTML5音乐播放器 | ACE-BLOG(ace520.github.io)](https://ace520.github.io/blog/post/2020/05/26/aplayer/)**server="netease" 指定音乐平台为网易云，type="song"指单曲类型，id="7373135320" 为音乐的 id（这里的id为打开音乐歌单，网址显示的id）**开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放order="random", 关闭底部歌词 lrc-type="0"注意：id需要为自己创建的歌单，不能为我喜欢的音乐；server可以改自己用的音乐平台，如netease(网易云)、tencent(QQ音乐)具体参数设置点击此链接：https://yy.liveout.cn/article/Learn/front-end/aplayer%E5%8F%82%E6%95%B0.pngAplayer播放器官网文档：[APlayer HTML5音乐播放器 | ACE-BLOG(ace520.github.io)](https://ace520.github.io/blog/post/2020/05/26/aplayer/) <meting-js server="netease" type="playlist" id="7360465359" fixed="true" mini="true" order="random" loop="all" preload="auto" list-folded="false"> </meting-js>4. 动态背景(视频资源失效)背景可以通过更改 url 链接设置为自己的动态视频，尽量不要太大，否则别人访问时会刷新许久注意视频链接已过期，可更换为自己的链接上传视频到云平台或媒体库，复制资源链接 5. 虚拟人物(看板娘)以下代码选择一项复制即可，效果不同，自行选择具体文章：[stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ |Live2D widget for web platform (github.com)](https://github.com/stevenjoezhang/live2d-widget) 其中 jsonpath: 后面的链接可按自己爱好更改，选择别的虚拟人物 /* 小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json 白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json 黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json 小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json 小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json 初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json 圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json 茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json 绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json 金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json 小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json 女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json */6. 网站底部信息CSS(样式表) HTML(底部信息) 备案号 苏ICP备1234567890号| 苏公网安备 32072212344321号 CDN Upyun Powered WordPress Copyright 2022-2023 @ Echo Running Time days H M S JavaScript（网站运行时间脚本）注意：new Date( year, month, date, hrs, min, sec) 按给定的参数创建 日期对象其中month的值域为0～11，0代表1月，11表代表12月；所以你输入的月份需要为自己真正月份的前一个月 7. 字体、鼠标等特效Docker系列 WordPress系列 特效 - Bensz (hwb0307.com)8. 博客自定义CSS样式8.1 博主的设置参考上面友情链接, 以下为我的额外CSS，涉及字体、透明等博客样式在 外观 --- 自定义 --- 额外CSS 中ps: 字体链接需要上传到云端调用才能生效（下面字体链接已失效）/*网站字体*/ /*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/ @font-face{ font-family:echo; src:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2') } body{ font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif } /*横幅字体大小*/ .banner-title { font-size: 2.5em; } .banner-subtitle{ font-size: 28px; -webkit-text-fill-color: transparent; background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%); -webkit-background-clip: text; } /*文章标题字体大小*/ .post-title { font-size: 25px } /*正文字体大小（不包含代码）*/ .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: 25px; /* color: rgba(var(--themecolor-rgbstr)); */ } /*尾注字体大小*/ .additional-content-after-post{ font-size: 1.2rem } /* 公告居中 */ .leftbar-announcement-title { font-size: 20px; /* text-align: center; */ color: #00FFFF } .leftbar-announcement-content { font-size: 15px; line-height: 1.8; padding-top: 8px; opacity: 0.8; /* text-align: center; */ color:#00FFFF; } /* 一言居中 */ .leftbar-banner-title { font-size: 20px; display: block; text-align: center; opacity: 0.8; } /* 个性签名居中 */ .leftbar-banner-subtitle { margin-top: 15px; margin-bottom: 8px; font-size: 13px; opacity: 0.8; display: block; text-align: center; } /*========颜色设置===========*/ /*文章或页面的正文颜色*/ 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; } /*左侧栏搜索框的颜色*/ button#leftbar_search_container { background-color: transparent; } /*========透明设置===========*/ /*白天卡片背景透明*/ .card{ background-color:rgba(255, 255, 255, 0.8) !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: 1rem; font-family: 'echo'; } .navbar-brand { font-family: 'echo'; font-size: 1.2rem; margin-right: 1.0 rem; padding-bottom: 0.2 rem; -webkit-text-fill-color: transparent; background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%); -webkit-background-clip: text; } /*菜单大小*/ .nav-link-inner--text { font-size: 1.25em; } .navbar-nav .nav-item { margin-right:0; } .mr-lg-5, .mx-lg-5 { margin-right:1rem !important; } .navbar-toggler-icon { width: 1.8rem; height: 1.8rem; } /*菜单间距*/ .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.4em; padding-left: 1.4em; } /*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/ *[style='position: relative; z-index: 99998;'] { display: none; } /* Github卡片样式*/ .github-info-card-header a { /*Github卡片抬头颜色*/ color: black !important; font-size: 1.5rem; } .github-info-card { /*Github卡片文字（非链接）*/ font-size: 1rem; color: black !important; } .github-info-card.github-info-card-full.card.shadow-sm { /*Github卡片背景色*/ background-color: rgba(var(--themecolor-rgbstr), 0.1) !important; } /* 左侧栏外观CSS */ /* 头像 */ #leftbar_overview_author_image { width: 100px; height: 100px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(127, 127, 127, 0.1); overflow: hidden; transition: transform 0.3s ease; } /* 头像亮暗 */ #leftbar_overview_author_image:hover { transform: scale(1.23); filter: brightness(150%); } /* 名称 */ #leftbar_overview_author_name { margin-top: 15px; font-size: 18px;align-content; color:#00FFFF; } /* 简介 */ #leftbar_overview_author_description { font-size: 14px; margin-top: -4px; opacity: 0.8; color:#c21f30; } /* 标题，链接等 */ a, .btn-neutral { color:#AF7AC5 ; } /* 页脚透明 */ #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; }8.2 根据主题自动透明添加到 页尾脚本 里，根据主题色自动透明，透明度可以在op1、op2、op3.....那里设置 来源自友链朋友：北冥红烧鱼 (hongshaoyv.com)9. 头像缩放或亮暗鼠标经过头像时自动缩放、高亮/暗在 外观 --- 自定义 --- 额外CSS 中#leftbar_overview_author_image { width: 100px; height: 100px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(127, 127, 127, 0.1); overflow: hidden; box-shadow: 0 0 5px rgba(116, 8, 204, 0.3); transition: transform 0.3s ease; /*变化速度*/ } #leftbar_overview_author_image:hover { transform: scale(1.2); /*缩放大小*/ filter: brightness(150%); /*调节亮度*/ }10. 头像/姓名跳转相关页在 外观 --- 主题文件编辑器 中, 选择 边栏文件(sidebar.php)点击 头像 跳转大概在第 126 行左右,添加 标签,即 , 其中链接改为想要跳转的地方<div class="tab-pane fade text-center<?php if ($nowActiveTab == 1) { echo ' active show'; }?>" id="leftbar_tab_overview" role="tabpanel" aria-labelledby="leftbar_tab_overview_btn"> <div id="leftbar_overview_author_image" style="background-image: ........ 点击 姓名 跳转则是 130 行左右添加 .... <?php echo get_option('argon_sidebar_auther_name') == '' ? bloginfo('name') : get_option('argon_sidebar_auther_name'); ?> 11. 评论头像显示在 外观 --- 主题文件编辑器 中的 function 模板函数添加此代码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 ); }来源：网络12. 插件合集12.1 网站访问数据(左侧栏)进入Wordpress，点击插件，搜索并且下载 Wp Statistics外观——小工具——站点额外内容——旧版小工具——统计12.2 评论IP地址以下根据体验自己选择WP-UserAgent | kyleabaker.com From 友链大佬：obaby@mars (h4ck.org.cn)WordPress 展示评论者地理位置插件 Easy Location | 歲月留聲 (0xo.net)12.3 评论管理Akismet Anti-Spam: Spam Protection12.4 邮件发送WP Mail SMTP12.5 文章字数统计WP Word Count12.6 WP用户个人头像Simple Local Avatars教程视频个人博客网站美化代码使用哔哩哔哩bilibili个人博客网站(Wordpress)基本使用哔哩哔哩bilibili推荐文章个人博客网站搭建 – Echo (liveout.cn)个人博客主题分享(WordPress) – Echo (liveout.cn)博客图片托管到又拍云教程 – Echo (liveout.cn)Wordpress/Typecho博客搬迁教程 – Echo (liveout.cn)相关链接本文可能涉及的代码出自以下博客文章，十分感谢下面各位大佬的分享关于 Argon 主题 更多美化内容文章： [Argon主题的美化设置 - Gong\_cx (gcxstudio.cn)](https://new.gcxstudio.cn/archives/argon-theme-settings/)博客透明、鼠标等美化: [Docker系列 WordPress系列特效 - Bensz (hwb0307.com)](https://blognas.hwb0307.com/linux/docker/744#comment-918)博客添加音乐插件: https://echeverra.cn/aplayerArgon主题 GitHub地址：[solstice23/argon-theme: ? Argon一个轻盈、简洁的 WordPress 主题 (github.com)](https://github.com/solstice23/argon-theme)Argon主题作者博客：solstice23 – BlogArgon主题使用文档：Argon Theme Docs (solstice23.top)FAQ如果遇到问题无法解决，请参考以下途径B站视频：博客搭建常见问题汇总哔哩哔哩bilibili翻翻评论区，已经有许多问题提出和解决了，大部分都一样查看官方文档如果问题还未解决，请评论区留言一些话很开心这篇美化文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！
2022 大一结束后，迎来两个月的暑假，终于有点精力来搭建网站，却因为各种事拖到现在。今天，我的第一个网站总算搭建成功（成功安装能看的过去的主题）。虽然各种功能并不是很多，但已经满足了基本需求。毕竟是借用别人的主题，还是很满意的。等到什么时候有时间学习前端知识，再来亲自DIY网站。2022/12大二寒假，博客已经美化完成，后续估计不会有大的变动了，下面就是搬迁新的服务器了，毕竟一年几百的续费，我还是承担不起的。等到大三再想办法弄一个主机搭载博客吧。后续的目标应该是单片机和前端的学习了。虽然一直都很犹豫学不学前端，现在觉得学学还是挺好的，可以美化博客，也可以搭建小程序。2023/3 博客迁移成功，除了说说评论没了，邮件通知失败，其他都基本没问题。邮件通知通过插件实现了，还行吧。2023/7 对博客进行二次优化，完善字体存储以及博客其他功能。字体托管于 GitHub ，并使用 jsDelivr 进行CDN加速，在此感谢二者！添加鼠标、评论输入特效左侧栏头像放大、点击跳转链接添加打赏展示页面，对给与打赏的好友进行展示公告栏更名左侧栏颜色调整数据统计移至功能栏顶栏标题、Banner 副标题 改为彩色2023/8 七牛云存储字体2026/3 改为 typecho，并且基于默认主题魔改2026/7 重构主题样式，二次魔改