关于网站美化(转)

前言

很开心这篇美化文章能够帮助到大家,如果转载请标注原文地址哦,十分感谢!

常言道:工欲善其事必先利其器,在发表文章前,美化博客,使其利于自己的观看与管理极其重要,所以我四处搜寻,得到了以下美化代码。

但是,有时候我们走得太远,会忘了为什么出发。希望阅览本文章的人不要忘记初心,想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记,生活故事。

所以,有时候博客美化过度会适得其反,望各位仔细斟酌,莫要使自己的博客变成了花架子,好的文章才是博客之本,立足之根。


主题资源

链接:https://pan.baidu.com/s/1yyA-m_h_wku7n3qzK-eYEQ?pwd=echo 提取码:echo


我的博客美化 JSON

注意:可复制一键导入

别忘记在主题设置页面修改头像、背景以及底部信息等设置哦

{"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":"sourcegcdn","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":"<style>\n/* 核心样式 */\n.github-badge {\ndisplay: inline-block;\nborder-radius: 4px;\ntext-shadow: none;\nfont-size: 13.1px;\ncolor: #fff;\nline-height: 15px;\nmargin-bottom: 5px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge-big {\ndisplay: inline-block;\nborder-radius: 6px;\ntext-shadow: none;\nfont-size: 14.1px;\ncolor: #fff;\nline-height: 18px;\nmargin-bottom: 7px;\n}\n.github-badge-big .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\n}\n.github-badge-big .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\n}\n.bg-orange {\nbackground-color: #ec8a64 !important;\n}\n.bg-red {\nbackground-color: #cb7574 !important;\n}\n.bg-apricots {\nbackground-color: #f7c280 !important;\n}\n.bg-casein {\nbackground-color: #dfe291 !important;\n}\n.bg-shallots {\nbackground-color: #97c3c6 !important;\n}\n.bg-ogling {\nbackground-color: #95c7e0 !important;\n}\n.bg-haze {\nbackground-color: #9aaec7 !important;\n}\n.bg-mountain-terrier {\nbackground-color: #99a5cd !important;\n}\n</style>\n \n<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-id-card\"></i> 备案号 </span\n><span class=\"badge-value bg-orange\">\n<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\" one-link-mark=\"yes\"\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</div>\n\n \n<div class=\"github-badge\">\n<span class=\"badge-subject\"><img src=\"https://www.liveout.cn/wp-content/uploads/2022/10/又拍云_logo4.png\" height=\"20\" width=\"20\"/></i> CDN</span\n><span class=\"badge-value bg-shallots\"\n><a href=\"\" target=\"_blank\" one-link-mark=\"yes\"></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<span class=\"badge-subject\"><i class=\"fa fa-wordpress\"></i> Powered</span\n><span class=\"badge-value bg-green\"\n><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"\n>WordPress</a\n></span\n>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\">Copyright </span\n><span class=\"badge-value bg-red\">\n2022-2022\n<i class=\"fa fa-copyright\"></i> Echo</span\n>\n</script>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-clock-o\"></i> Running Time</span\n><span class=\"badge-value bg-apricots\"\n><span id=\"blog_running_days\" class=\"odometer odometer-auto-theme\"></span>\ndays\n<span id=\"blog_running_hours\" class=\"odometer odometer-auto-theme\"></span> H\n<span id=\"blog_running_mins\" class=\"odometer odometer-auto-theme\"></span> M\n<span id=\"blog_running_secs\" class=\"odometer odometer-auto-theme\"></span>\nS</span\n>\n <script no-pjax=\"\">\nvar blog_running_days = document.getElementById(\"blog_running_days\");\nvar blog_running_hours = document.getElementById(\"blog_running_hours\");\nvar blog_running_mins = document.getElementById(\"blog_running_mins\");\nvar blog_running_secs = document.getElementById(\"blog_running_secs\");\nfunction refresh_blog_running_time() {\nvar time = new Date() - new Date(2020, 0,0, 0, 0, 0);\nvar d = parseInt(time / 24 / 60 / 60 / 1000);\nvar h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);\nvar m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);\nvar s = parseInt((time % (60 * 1000)) / 1000);\nblog_running_days.innerHTML = d;\nblog_running_hours.innerHTML = h;\nblog_running_mins.innerHTML = m;\nblog_running_secs.innerHTML = s;\n}\nrefresh_blog_running_time();\nif (typeof bottomTimeIntervalHasSet == \"undefined\") {\nvar bottomTimeIntervalHasSet = true;\nsetInterval(function () {\nrefresh_blog_running_time();\n}, 500);\n}\n</script>\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":"<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js\"></script>\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"}

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

在左侧栏里添加工具 —— 简码,复制一下代码粘贴进去

<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(-20px);
}
</style>

音乐播放功能

下面的调用链接可能会突然失效,如有需要可参考官方文档

APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)

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.png

Aplayer 播放器官网文档:APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

动态背景

背景可以通过更改 url 链接设置为自己的动态视频尽量不要太大,否则别人访问时会刷新许久

注意视频链接已过期,可更换为自己的链接

上传视频到云平台或媒体库,复制资源链接

<video
src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/daymode.mp4" /*白天动态视频链接*/
class="bg-video bg-video-day"
autoplay=""
loop="loop"
muted=""
></video>
<video
src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/darkmode.webm" /*夜间动态视频链接*/
class="bg-video bg-video-night"
autoplay=""
loop="loop"
muted=""
></video>
<style>
video.bg-video {
position: fixed;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
pointer-events: none;
}
html.darkmode video.bg-video.bg-video-day {
opacity: 0;
}
html.darkmode video.bg-video.bg-video-night {
opacity: 1;
}
video.bg-video.bg-video-day {
opacity: 1;
}
video.bg-video.bg-video-night {
opacity: 0;
}
#banner,
#banner .shape {
background: transparent !important;
}
* {
font-family: "Comfortaa", "Open Sans", -apple-system, system-ui,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
}
</style>
<script
src="https://api.gcxstudio.cn/odometer/odometer.min.js"
integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw="
crossorigin="anonymous"
></script>
 
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
 
<div id='aplayer'></div>
 
 

虚拟人物 (看板娘)

以下代码选择一项复制即可,效果不同,自行选择

具体文章:stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦) ノ | Live2D widget for web platform (github.com)

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
  1. 其中 jsonpath: 后面的链接可按自己爱好更改,选择别的虚拟人物
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
       //jsonpath控制显示那个小萝莉模型,
            //(切换模型需要改动)
//              "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json"
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //看板娘的表现位置
            "width": 75,  //小萝莉的宽度
            "height": 150, //小萝莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>
 
   /*   小帅哥: 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 */

网站访问数据 (左侧栏)

  1. 进入 WordPress,点击插件,搜索并且下载 Wp Statistics
  2. 外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计
网站统计

网站底部信息

CSS (样式表)

<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>

HTML (底部信息)

   <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备1234567890号</a>|
            <a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank"
                one-link-mark="yes">
                苏公网安备 32072212344321号</a>
        </span>
    </div>
 
 
    <div class="github-badge-big">
        <!-- 又拍云图标 -->
        <span class="badge-subject"><img src="https://www.liveout.cn/wp-content/uploads/2022/10/又拍云_logo4.png"
                height="20" width="20" /></i> CDN</span>
        <span class="badge-value bg-shallots">
            <a href="" target="_blank" one-link-mark="yes"></a>
            <!-- 又拍云链接 -->
            <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank"
                one-link-mark="yes">Upyun</a>
        </span>
 
        <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
        <span class="badge-value bg-green">
            <!-- wordpress链接 -->
            <a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
                WordPress</a></span>
    </div>
 
    <div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
        <span class="badge-value bg-red">2022-2023</i>
            <a href="https://www.liveout.cn/" target="_blank" one-link-mark="yes">@ Echo
        </span>
        </script>
    </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>
 

JavaScript(网站运行时间脚本)

注意:new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象

其中 month 的值域为 0~11,0 代表 1 月,11 表代表 12 月;所以你输入的月份需要为自己真正月份的前一个月

<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(2022, 5, 31, 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>

字体、博客透明等特效

Docker 系列 WordPress 系列 特效 – Bensz (hwb0307.com)

鼠标、输入特效这些特效可以访问以上友情链接

以下为我的额外 CSS,涉及字体、透明等博客样式

/*=========字体设置============*/
 
/*网站字体*/
/*原则上你可以设置多个字体,然后在不同的部位使用不同的字体。*/
@font-face {
    font-family: btfFont;
    src:
        url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
 
body {
    font-family: "btfFont" !important
}
 
/*横幅字体大小*/
.banner-title {
    font-size: 2.5em;
}
 
.banner-subtitle {
    font-size: 27px;
}
 
/*文章标题字体大小*/
.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
}
 
 
 
 
/*========颜色设置===========*/
 
/*文章或页面的正文颜色*/
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-announcement-title {
    font-size: 20px;
    text-align: center;
}
 
.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.9;
    text-align: center;
}
 
/* 一言居中 */
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
}
 
/*左侧栏层级置于上层*/
#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;
}
 
/*顶栏菜单放大*/
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'btfFont';
 
}
 
.navbar-brand {
    color: white !important;
    font-family: 'btfFont';
    font-size: 1.4rem;
    margin-right: 1rem;
    padding-bottom: .2rem;
}
 
/*菜单大小*/
.nav-link-inner--text {
    font-size: 1.2em;
}
 
.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: 2.1em;
    padding-left: 1.em;
}
 
/*隐藏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;
}

博客透明 (根据主题自动)

添加到 页尾脚本 里,根据主题色自动透明,透明度可以在 op1、op2、op3….. 那里设置

<script>  function hexToRgb(hex,op){    let str = hex.slice(1);    let arr;    if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));    else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];    return  `rgb(${arr.join(', ')}, ${op})`;};   let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();  let op1 = 0.6  let themeColorRgb = hexToRgb(themeColorHex,op1);  let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')*  document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)   let op2 = 0.8  // 方法一:  let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();  colorTint92 += ', '+op2;  document.documentElement.style.setProperty('--color-tint-92',colorTint92)  // 方法二:(无效)  // let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();  // let colorForeground = hexToRgb(colorForegroundHex,op2)  // 无效的原因是博客里的--color-fpreground是局部变量,不是:root里的全局变量,所以最好的办法是修改--color-tint-92,这个是全局的  // document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)   // 不要用下面这种cssText这种写法,会导致上面--themecolor-gradient的样式修改失效!   // document.documentElement.style.cssText = '--color-tint-92:'+colorTint92    let op3 = 0.65  let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();  colorShade90 += ', ' + op3;  document.documentElement.style.setProperty('--color-shade-90',colorShade90)   let op4 = 0.8  let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();  colorShade86 += ', ' + op4;  document.documentElement.style.setProperty('--color-shade-86',colorShade86)</script>

来源自友链朋友:北冥红烧鱼 (hongshaoyv.com)


教程视频

个人博客网站美化代码使用哔哩哔哩 bilibili

个人博客网站 (WordPress) 基本使用哔哩哔哩 bilibili


相关链接

本文可能涉及的代码出自以下博客文章,十分感谢下面各位大佬的分享

关于 Argon 主题 更多美化内容文章: Argon 主题的美化设置 – Gong_cx (gcxstudio.cn)

关于博客中添加音乐插件https://echeverra.cn/aplayer

Argon 主题 GitHub 地址solstice23/argon-theme: 📖 Argon – 一个轻盈、简洁的 WordPress 主题 (github.com)

Argon 主题制作人博客solstice23 – Blog

Argon 主题使用文档首页 – Argon Theme Docs (solstice23.top)

问题解答

如果遇到问题无法解决,请参考以下途径

  1. B 站视频:博客搭建常见问题汇总哔哩哔哩 bilibili
  2. 翻翻评论区,已经有许多问题提出和解决了,大部分都一样
  3. 查看官方文档

如果问题还未解决,请评论区留言

一些话

很开心这篇美化文章能够帮助到大家,如果转载请标注原文地址哦,十分感谢!

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇