Argon美化日志

关于 Argon 主题的美化进度文档~

日志

• 2024/1/28：新增嘉立创的传送链接，记录一下图标网址，点击传送

• 2024/1/27：整理了目前的美化进度，更新了文档内容

• 2023/7/6：添加插件WP Mail SMTP用于评论区自动发送邮件,esay-location插件用于显示评论区IP地址,国内精确到省级,国外精确到国家。

• 2023/7/5：修改字体格式为霞鹜文楷，免费商用。

1. 下载.ttf字体文件，免费字体网站
2. 转换成.woff22文件后上传到cdn目录或其他路径，转换网站
3. 将下列代码url修改后添加到额外css（注：已在额外css更新）

@font-face{
    font-family:btfFont;
    src: url(https://img.new-epoch-meta.com/global/font/xxx.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

前言

此文用于更新blog美化进度，以及方便搬迁使用
用了那么多主题，还是argon更适合自己，符合我的审美

额外CSS

更新时间：2024/1/27
设置方式：外观——自定义——额外css

/*===========模式============*/
/*悼念模式*/
/* html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
} */
/*===音乐播放器夜间模式显示过浅===*/
.aplayer * {
    color: #000;
}
/*====字体样式修改为LXGW文楷====*/
@font-face{
    font-family:btfFont;
    src: url(https://img.new-epoch-meta.com/global/font/xxx.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}
/*=========字大小设置=========*/
/*博客大横幅标题大小*/
.banner-title {
    font-size: 2.5em;
}
/*博客小横幅标题大小*/
.banner-subtitle {
    font-size: 25px;
}
/*正文字体大小（不包含代码）*/
.post-content p {
    font-size: 1.2rem;
}
/*======日间模式的颜色设置======*/
header.post-header.text-center.post-header-with-thumbnail .post-header-text-container div.post-meta a{
        color:white;
}   
header.post-header.text-center div.post-meta a,
a.post-title,
.post-content-container div.post-meta a{
        color:#364863;
}   
/*标签边框*/
.tag.badge{
  border-color: #364863;
}
/*======夜间模式的颜色设置=======*/
html.darkmode a.post-title,
html.darkmode div.post-meta a{
    color: white;
}
/*夜间模式标签边框*/
html.darkmode .tag.badge{
  border-color: #fff;
}
/*=========背景透明设置=========*/
/*白天卡片背景透明*/
.card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    -webkit-backdrop-filter: blur(6px);
}
/*左侧栏日历等工具，表情包背景透明*/
.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;
}
/*夜间模式页脚透明*/
html.darkmode #footer{
background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(10px);
}
/*夜间全局透明修改*/
html.darkmode .card,
html.darkmode .leftbar-banner {
    background: rgba(66, 66, 66, 0.8) !important;
}
/*右下角选项夜间模式设置*/
html.darkmode 
#fabtn_blog_settings_popup {
    background: rgba(66, 66, 66, 0.95) !important;
}
/*=========左侧栏设置=========*/
/*公告栏目，一言居中*/
.leftbar-announcement-content,
.leftbar-announcement-title,
.leftbar-banner.card-body{
    text-align: center;
}
/*夜间颜色左侧栏目录，站点概览功能*/
html.darkmode .post-outdated-info,
html.darkmode div#leftbar_part2_inner.card-body a,
html.darkmode header.post-header.text-center a {
    color: #fff;
}
/*日间颜色左侧栏目录，站点概览功能*/
.post-outdated-info, div#leftbar_part2_inner.card-body a,
header.post-header.text-center a {
    color: #000;
}
/*=========文章设置==========*/
/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
    text-align: center;
}
/*表格样式调整*/
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;
}
/*=========顶栏菜单设置========*/
/*字体大小*/
.navbar-brand {
    font-family: 'btfFont';
    font-size: 1.4rem;
            -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;
}
/*间距大小*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2em;
}
/*==========推荐文章==========*/
/*推荐文章夜间模式颜色修正*/
html.darkmode div.related-post-title.clamp{
    color:#fff;
}

主题设置

更新时间：2024/1/27
注意：包含页脚设置，包含音乐播放器
导入方式：Agon主题选项——到底部——导入设置

{"argon_theme_color":"#41a7fb","argon_theme_color_hex_preview":"#41a7fb","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"6","argon_card_shadow":"big","argon_page_layout":"double-reverse","argon_article_list_waterflow":"3","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":"Clif's Blog","argon_toolbar_icon":"","argon_toolbar_icon_link":" ","argon_toolbar_blur":"true","argon_banner_title":"Clif's Blog","argon_banner_subtitle":"The more you know, The less you know","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"","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":"80","argon_page_background_url":"https://myblog1-1312660362.cos.ap-chengdu.myqcloud.com/new-epoch/Global/background/background_day2.jpg","argon_page_background_dark_url":"https://myblog1-1312660362.cos.ap-chengdu.myqcloud.com/new-epoch/Global/background/background_night.jpg","argon_page_background_opacity":"1","argon_sidebar_banner_title":"一言","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"Clif","argon_sidebar_auther_image":"https://img.new-epoch-meta.com/global/head/header.jpg","argon_sidebar_author_description":"擅长拔网线，物理攻击选手","argon_sidebar_announcement":"暂无公告~","argon_fab_show_settings_button":"true","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"true","argon_seo_description":"网站描述 (Description Meta 标签)","argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）","argon_article_meta":"author|categories|time|views","argon_show_readingtime":"true","argon_reading_speed":"200","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"true","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"ref","argon_show_sharebtn":"domestic","argon_show_headindex_number":"true","argon_donate_qrcode_url":"https://img.new-epoch-meta.com/global/%E6%89%93%E8%B5%8F/%E6%89%93%E8%B5%8F.jpg","argon_additional_content_after_post":"如果您觉得本博客内容有所帮助，可以打赏一下吗~，此打赏将会用于博客维护运营，十分感谢！\n作者：<a href='https://www.new-epoch-meta.com/' target=\"_blank\">Clif</a>\n版权声明: 本博客所有文章除未特别声明外，均采用<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target=\"_blank\">CC BY-NC-SA 4.0</a>协议。转载请注明文章地址及作者！","argon_related_post":"category,tag","argon_related_post_sort_orderby":"date","argon_related_post_sort_order":"DESC","argon_related_post_limit":"4","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"modifiedtime","argon_outdated_info_days":"3","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，如有错误请在评论区中留言。","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"https://www.new-epoch-meta.com/归档/","argon_footer_html":"<!--////////////////////////////////////核心样式////////////////////////////////////-->\n<style>\n    .github-badge {\n        display: inline-block;\n        border-radius: 4px;\n        text-shadow: none;\n        font-size: 13.1px;\n        color: #fff;\n        line-height: 15px;\n        margin-bottom: 5px;\n        font-family: \"Open Sans\", sans-serif;\n    }\n \n    .github-badge .badge-subject {\n        display: inline-block;\n        background-color: #4d4d4d;\n        padding: 4px 4px 4px 6px;\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n        font-family: \"Open Sans\", sans-serif;\n    }\n \n    .github-badge .badge-value {\n        display: inline-block;\n        padding: 4px 6px 4px 4px;\n        border-top-right-radius: 4px;\n        border-bottom-right-radius: 4px;\n        font-family: \"Open Sans\", sans-serif;\n    }\n \n    .github-badge-big {\n        display: inline-block;\n        border-radius: 6px;\n        text-shadow: none;\n        font-size: 14.1px;\n        color: #fff;\n        line-height: 18px;\n        margin-bottom: 7px;\n    }\n\n    .github-badge-big .badge-subject {\n        display: inline-block;\n        background-color: #4d4d4d;\n        padding: 4px 4px 4px 6px;\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n    }\n\n    .github-badge-big .badge-value {\n        display: inline-block;\n        padding: 4px 6px 4px 4px;\n        border-top-right-radius: 4px;\n        border-bottom-right-radius: 4px;\n    }\n \n    .bg-orange {\n        background-color: #ec8a64 !important;\n    }\n \n    .bg-red {\n        background-color: #cb7574 !important;\n    }\n \n    .bg-apricots {\n        background-color: #f7c280 !important;\n    }\n \n    .bg-casein {\n        background-color: #dfe291 !important;\n    }\n \n    .bg-shallots {\n        background-color: #97c3c6 !important;\n    }\n \n    .bg-ogling {\n        background-color: #95c7e0 !important;\n    }\n \n    .bg-haze {\n        background-color: #9aaec7 !important;\n    }\n \n    .bg-mountain-terrier {\n        background-color: #99a5cd !important;\n    }\n</style>\n<!--////////////////////////////////////底部信息////////////////////////////////////-->\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\">蜀ICP备2023005984号</a>\n<!--|\n        <a href=\"https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71\" target=\"_blank\" one-link-mark=\"yes\">公网安备 1234567890号</a>\n -->\n    </span>\n</div>\n \n<!-- CDN/wordpress -->\n<div class=\"github-badge-big\">\n    <span class=\"badge-subject\"><i class=\"fa fa-cloud\" aria-hidden=\"true\"></i> CDN</span>\n    <span class=\"badge-value bg-shallots\"><a href=\"https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral\" target=\"_blank\" one-link-mark=\"yes\">Upyun</a></span>\n    <span class=\"badge-subject\"><i class=\"fa fa-wordpress\"></i> Powered</span>\n    <span class=\"badge-value bg-green\"><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"> WordPress</a></span>\n</div>\n \n<!-- 网站所属 -->\n<div class=\"github-badge-big\">\n    <span class=\"badge-subject\"><i class=\"fa fa-copyright\" aria-hidden=\"true\"></i> Copyright </span>\n    <span class=\"badge-value bg-red\">2022-2023<a href=\"https://www.new-epoch-meta.com/\"  one-link-mark=\"yes\"> @Code_Don</a></span>\n</div>\n \n<!-- 运行时间 -->\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> days\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> S\n    </span>\n</div>\n<!--////////////////////////////////网站运行时间脚本////////////////////////////////////-->\n \n<script no-pjax=\"\">\n    var blog_running_days = document.getElementById(\"blog_running_days\");\n    var blog_running_hours = document.getElementById(\"blog_running_hours\");\n    var blog_running_mins = document.getElementById(\"blog_running_mins\");\n    var blog_running_secs = document.getElementById(\"blog_running_secs\");\n    function refresh_blog_running_time() {\n        var time = new Date() - new Date(2023, 2, 27, 0, 0, 0); /*此处日期的月份改为自己真正月份的前一个月*/\n        var d = parseInt(time / 24 / 60 / 60 / 1000);\n        var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);\n        var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);\n        var s = parseInt((time % (60 * 1000)) / 1000);\n        blog_running_days.innerHTML = d;\n        blog_running_hours.innerHTML = h;\n        blog_running_mins.innerHTML = m;\n        blog_running_secs.innerHTML = s;\n    }\n    refresh_blog_running_time();\n    if (typeof bottomTimeIntervalHasSet == \"undefined\") {\n        var bottomTimeIntervalHasSet = true;\n        setInterval(function () {\n            refresh_blog_running_time();\n        }, 500);\n    }\n</script>","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":"10","argon_enable_fancybox":"false","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|shuoshuo|comment","argon_custom_html_head":"","argon_custom_html_foot":"<!--////////////////音乐播放器mini（配合额外css修改夜晚字过浅bug）///////////////////////////-->\n\n<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    lrc-type=\"0\"\n    id=\"8756199193\"\n    fixed=\"true\" \n    mini=\"true\"\n    order=\"random\"\n    loop=\"all\"\n    preload=\"auto\"\n    list-folded=\"false\">\n</meting-js>","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":"true","argon_hide_shortcode_in_preview":"false","argon_trim_words_count":"100","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

左侧栏小工具

更新时间：2024/1/27
设置方式：外观——小工具——左侧栏处，添加[/]简码，将如下代码复制到[/]简码中，简码下方添加日历

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

站点概览额外内容

更新时间：2024/1/27
设置方式：外观——小工具——站点概览额外内容，添加统计，勾选累计访问，总浏览量