搞短代码搞到两点半

还遇到这两天确实有死线，下次不这么干了晕死，活生生给自己多找麻烦。

但是短代码确实是搞好了，大概有下次图片框怎么做的思路了，可算是有点不虚此行的东西了吧。

闲着没事看了下akilar那个博客，是我现在已经难以理解的水平……他那个花哨过头了倒是不必要，因为就这样子的我集中注意力都没法在文字本身，我觉得butterfly和yun混合一下其实就挺好的……

然后晚上又来更新，这次可算是完成了但痛失图标搞得我查了好久到底是哪里的问题最后鉴定为vk blocks卸载的后果，但关键是我记得argon不是自带支持fontawesome的吗难道是区块链入侵了我可爱的插件区域把它给打死了（大雾）

算了不管怎么说还是留着吧，备份了一手页面，打算换个密码插件，因为仔细想了下不是特别必要我只是单纯害怕被收录了而已，光是打勾总害怕总有什么不长眼的跑来留言然后我就被开盒了（什么鬼）

算了，先在这里记一下一些必要的函数，免得下次又找不到地方放更新了

Argon设置

这是Argon主题设置的json，直接备份导入即可

{"argon_theme_color":"#c7aca1","argon_theme_color_hex_preview":"#c7aca1","argon_show_customize_theme_color_picker":false,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"system","argon_enable_amoled_dark":"false","argon_card_radius":"4","argon_card_shadow":"default","argon_page_layout":"triple","argon_article_list_waterflow":"1","argon_article_list_layout":"1","argon_font":"sans-serif","argon_assets_path":"default","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"false","argon_toolbar_title":"山茶折叠","argon_toolbar_icon":"<https://elfriede-gulistan.top/wp-content/uploads/2023/12/1702491072-C854598BA3970B39F9044A4A8996F7ED.png.webp.jpg.png","argon_toolbar_icon_link":"https://elfriede-gulistan.top/","argon_toolbar_blur":"true","argon_banner_title":"Words> Never Spoken","argon_banner_subtitle":"Lesen heißt durch fremde Hand träumen. ","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"<https://elfriede-gulistan.top/wp-content/uploads/2023/12/1702818876-IMG_9795.png","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://elfriede-gulistan.top/wp-content/uploads/2023/12/1702820334-IMG_9807.png","argon_page_background_dark_url":"https://elfriede-gulistan.top/wp-content/uploads/2023/12/1702818837-IMG_9793.png","argon_page_background_opacity":"0.75","argon_sidebar_banner_title":"白茶花屋","argon_sidebar_banner_subtitle":"忘记闲暇的时刻，你钟爱雨点的波纹。","argon_sidebar_auther_name":"Elfriede> Hiraeth","argon_sidebar_auther_image":"<https://elfriede-gulistan.top/wp-content/uploads/2023/12/1702491069-3C646AF239B16ABD0A78D04FB08C8E4B.png.webp.jpg.png","argon_sidebar_author_description":"历史的记录者","argon_sidebar_announcement":"本次博客装修完毕，缓存加载问题导致部分css和图标失效。","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"false","argon_seo_description":"","argon_seo_keywords":"","argon_article_meta":"timeedittimecategories","argon_show_readingtime":"true","argon_reading_speed":"300","argon_reading_speed_en":"160","argon_reading_speed_code":"20","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"false","argon_reference_list_title":"参考","argon_show_sharebtn":"true","argon_show_headindex_number":"true","argon_donate_qrcode_url":"","argon_additional_content_after_post":"✟长江黄河不会倒流。✟\\nMay> freedom and love be with you forever.","argon_related_post":"disabled","argon_related_post_sort_orderby":"date","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-1","argon_outdated_info_time_type":"modifiedtime","argon_outdated_info_days":"-1","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于 %date_delta% 天前，其中的信息可能已经有所发展或是发生改变。","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"<https://elfriede-gulistan.top/__trashed","argon_footer_html":"","argon_enable_code_highlight":"false","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"false","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/[email protected]/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//cdn.jsdelivr.net/npm/[email protected]/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":"false","argon_custom_html_head":"><!--鼠标指针特效2 开始-->\\n<style type=\\"text/css\\">\\n.main-content img,body{cursor:url(<https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur>),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(<https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur>),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(<https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur>),auto}\\n</style>\\n<!--鼠标指针特效2 结束-->","argon_custom_html_foot":"","argon_enable_smoothscroll_type":"1","argon_enable_into_article_animation":"false","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"feed","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":"false","argon_comment_mailnotice_checkbox_checked":false,"argon_comment_enable_qq_avatar":"false","argon_comment_avatar_vcenter":"false","argon_who_can_visit_comment_edit_history":"admin","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"false","argon_comment_ua":"hidden","argon_show_comment_parent_info":"true","argon_fold_long_comments":"false","argon_gravatar_cdn":"","argon_text_gravatar":"false","argon_enable_search_filters":"true","argon_search_filters_type":"*post,*page,*shuoshuo,*diska","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":"false","argon_trim_words_count":"175","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

额外CSS部分

这是额外css部分，包括一系列装修还有短代码等杂物的样式

/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:echo;
src:url(<https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2>) format('woff2')
font-weight:400px
unicode-range: U+1f1e9-1f1f5;
font-display:swap;
}
 
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: 3.5em;
  text-shadow: 5px 5px 2px rgb(54 50 50 / 45%);
}

}
.banner-subtitle{
  font-size: 30px;
-webkit-text-fill-color: transparent; 
  background: linear-gradient(93deg,rgb(255 181 247) 0%,rgb(172 208 249) 43.66%, rgb(253 250 253) 64.23%,rgb(209 233 212) 83.76%,rgb(195 132 133) 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-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.9) !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: 0.8rem;
    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(141 202 243) 0%,rgb(203 196 230) 43.66%, rgb(228 179 167) 64.23%,rgb(232 209 162) 83.76%,rgb(180 156 120) 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:#b79685;
text-shadow: 2px 3px 4px #c9ce9c;
}
 
/* 简介 */
#leftbar_overview_author_description {
    font-size: 14px;
    margin-top: -4px;
    opacity: 0.8;
color:#887375;
}
 
/* 标题，链接等 */
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;
}

/*评论区按钮文字*/
.btn-outline-primary {
    color: #9d6c6c;
}

/*分享按钮文字*/
.btn-primary {
    color: #dbe9e8;
    background-color: #cb9c9c;
    border-color: #a36a2c;
}

/*嘟嘟界面透明*/
.include-mastodon-feed .status {
    background: rgb(255 255 255 / 0%);
}

/*嘟嘟界面头像*/
.include-mastodon-feed .avatar {
    height: 50px;
    border-radius: 50%;
}   

/*嘟嘟链接文字*/
.include-mastodon-feed .status a {
    color: rgb(147 112 112);
}

/*说说悬空文字颜色*/
.btn-outline-primary:hover {
    background-color: #ae8e8e;
}

/*发送返回按键颜色*/
.btn-primary:hover {
    background-color: #9c535e;
    border-color: #625555;
}

/*日期进度条颜色*/
.progress-label span {
    color: #ad8585;

}

/*时间轴卡片*/
.card .card {
box-shadow: 5px 5px 13px 1px #d0a5a51f;
border: 1px solid rgba(0,0,0,0);
}

/*时间轴年份透明*/
.archive-timeline-year + .archive-timeline-title {
    opacity: 0;
}

/*时间轴月份透明*/
.archive-timeline-month + .archive-timeline-title {
    opacity: 0;
}

/*sakurairo短代码测试*/
.noway.shortcodestyle {
    background-color: #908282;
    border-radius: 2px;
    box-shadow: 1px 1px 12px 0px #b99f9f;
    text-shadow: 0 0 4px #cfb4b442;
}
.buy.shortcodestyle {
    background-color: #908282;
    border-radius: 2px;
    box-shadow: 1px 1px 12px 0px #b99f9f;
    text-shadow: 0 0 4px #cfb4b442;
}
.task.shortcodestyle {
    background-color: #908282;
    border-radius: 2px;
    box-shadow: 1px 1px 12px 0px #b99f9f;
    text-shadow: 0 0 4px #cfb4b442;
}
.warning.shortcodestyle {
    background-color: #908282;
    border-radius: 2px;
    box-shadow: 1px 1px 12px 0px #b99f9f;
    text-shadow: 0 0 4px #cfb4b442;
}
.ghcard {
    width: 50%;
    box-shadow: 0 1px 30px -4px;
    background: rgba(255, 255, 255, 0.5);
    padding: 12px 12px;
    margin: 12px 12px;
    position: relative;
    -webkit-transition: all .8s;
    transition: all .8s;
    border-radius: 10px;
    border: 1.5px solid #e3d4d44d;
}
/*卡片信息块调整*/
.showcard{
    position: relative;
    width: 200px;
  height: auto;
    margin-top: 20px;
    padding-bottom: -10px;
    border-radius: 10px;
    box-shadow: 0 1px 30px -4px #e8e8e8;
    background: rgba(255, 255, 255, 0.5);
    transition: all .8s;
    border: 1.5px solid #e3d4d44d;
}
.showcard .img {
    position: relative;
    height: 160px;
    width: 160px;
    border-radius: 10px;
    margin: auto;
    margin-top: 4%;
    margin-bottom: -5%;
    box-shadow: 0 1px 30px -4px #e8e8e8;
    -webkit-transition: all .8s;
    transition: all .8s;
    opacity: 0.8;
}
.showcard .icon {
    position: relative;
    font-size: 3px;
    margin-left: 14px;
    margin-top: 1px;
    margin-bottom: -10px;
  padding-left:10px;
}
.icon i, .icon svg {
    font-size: 1.4rem;
}
.showcard .title {
    position: relative;
  float:left;
    width: 100%;
    color: #505050;
    font-size: 20px;
    margin-left: 50px;
  margin-top:-45px;
}

.showcard .img:hover {
    box-shadow: 0 1px 20px 10px #e8e8e8;
    height: 150px;
    margin-top: 7%;
    margin-bottom: 0%;
    width: 150px;
    opacity: 0.9;
    transition: all .8s;
  overflow:hidden;
}

/*造聊天气泡*/
.conversations-code-text {
  margin: auto 10px;
  padding: 8px 14px;
  color: #505050;
  max-width: 80%;
  width: fit-content;
  font-size: 15px;
  box-shadow: 0 1px 30px -4px #e8e8e8;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px !important;
  text-indent: 0 !important;
  -webkit-transition: all .8s;
  transition: all .8s;
  border: 1.5px solid #FFFFFF;
}

.conversations-code-text:hover {
  box-shadow: 0 1px 20px 10px #e8e8e8;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all .8s;
  transition: all .8s;
}
.fancybox-wrapper {
    margin: inherit;
}
.fancybox-wrapper > img {
    box-shadow: 0px 0px 3px 1px #c6c58c82;
}

/*图片卡调整*/
.piccard{
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 30px -4px #e8e8e8;
    background: rgba(255, 255, 255, 0.5);
    transition: all .8s;
    border: 1.5px solid #e3d4d44d;
}
.piccard .img {
    position: relative;
    height: 160px;
    width: 160px;
    border-radius: 10px;
    margin: auto;
    margin-top: 4%;
    margin-bottom: -5%;
    box-shadow: 0 1px 30px -4px #e8e8e8;
    -webkit-transition: all .8s;
    transition: all .8s;
    opacity: 0.8;
}
.piccard .title {
    position: absolute;
    float: center;
    width: 160px;
    color: #634646;
    font-size: 25px;
    text-shadow: 3px 2px 7px #ffffff;
    background: #ffffff5e;
    margin-top: -180px;
    font-family: "sans-serif";
    text-align: center;
  padding-bottom: 10px;
    height: 160px;
    margin-left: 9px;
  padding-top:55px;
  padding-bottom:10px;
  border-radius:10px;
}

.piccard .title:hover {
    position: relative;
    float: center;
    width: 180px;
    color: #634646;
    font-size: 25px;
    text-shadow: 3px 2px 7px #ffffff;
    background: #ffffff5e;
    margin-top: -190px;
    font-family: "sans-serif";
    text-align: center;
  padding-bottom: 10px;
    height: 180px;
    margin-left: 0px;
  padding-top:60px;
  padding-bottom:20px;
  border-radius:10px;
    transition: all .8s;
opacity:0.3;
}

/*造名片卡*/
.biscard-code {
display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
height:auto;
  color: #505050;
  max-width: 80%;
  width: fit-content;
  font-size: 15px;
  box-shadow: 0 1px 30px -4px #e8e8e8;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px !important;
  text-indent: 0 !important;
  -webkit-transition: all .8s;
  transition: all .8s;
  border: 1.5px solid #FFFFFF;
}

.biscard-code:hover {
  box-shadow: 0 1px 20px 10px #e8e8e8;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all .8s;
  transition: all .8s;
}

.biscard-code-text{
padding-top:10px;
}
/*部分内容加密短代码*/
.widget.widget_ui_posts {
  color: #737385;
    text-shadow: 1px 1px 1px #e8dada;
}
input#ipt {
    border-radius: 9px;
  opacity:0.8;
  border-color: #d4c2c29c;
}
button.search-btn {
    border-color: #d6bebe87;
    background-color: #ddcdcd54;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px #c4d6d7;
  color: #a68c8cf5;
    text-shadow: 1px 1px 1px #e6e6e6;
}
.secret-password {
    font-size: 22px;
}

/*隐藏字体大小*/
.argon-hidden-text.argon-hidden-text-blur {
    filter: blur(4px);
    font-size: 20px;
}

短代码定义部分

这个是function函数的叠加部分（我用的子博客）

/*sakurairo短代码测试*/
add_shortcode('task', 'task_shortcode');
function task_shortcode($attr, $content = '')
{
    $out = '<div class="task shortcodestyle"><i class="fa-solid fa-bars"></i>' . $content . '</div>';
    return $out;
}
add_shortcode('warning', 'warning_shortcode');
function warning_shortcode($attr, $content = '')
{
    $out = '<div class="warning shortcodestyle"><i class="fa-solid fa-triangle-exclamation"></i>' . $content . '</div>';
    return $out;
}
add_shortcode('noway', 'noway_shortcode');
function noway_shortcode($attr, $content = '')
{
    $out = '<div class="noway shortcodestyle"><i class="fa-solid fa-rectangle-xmark"></i>' . $content . '</div>';
    return $out;
}
add_shortcode('buy', 'buy_shortcode');
function buy_shortcode($attr, $content = '')
{
    $out = '<div class="buy shortcodestyle"><i class="fa-solid fa-check-to-slot"></i>' . $content . '</div>';
    return $out;
}
add_shortcode('ghcard', 'gh_card');
function gh_card($attr, $content = '')
{
    extract(shortcode_atts(array("path" => ""), $attr));
    return '<div class="ghcard"><a href="<https://github.com/>'. $path .'"><img src="<http://github-profile-summary-cards.vercel.app/api>'. $content .'" alt="Github-Card"></a></div>';
}

add_shortcode('showcard', 'show_card');
function show_card($attr, $content = '')
{
    extract(shortcode_atts(array("icon" => "", "title" => "", "img" => "", "color" => ""), $attr));
    return '<section class="showcard">
    <a href="'. $content .'"><div class="img" alt="Show-Card" style="background:url('. $img .');background-size:cover;background-position: center;">
    </div></a>
    <br>
    <div class="icon">
    <i class="'. $icon .'"></i>
    </div>
    <div class="title">
    '. $title .'
    </div>
</section>';
}

add_shortcode('conversations', 'conversations');
function conversations($attr, $content = '') 
{
    extract(shortcode_atts(array("avatar" => "", "direction" => ""), $attr));

    $output = '<div class="conversations-code" style="display: flex; flex-direction: ' . $direction . '; padding: 10px;">';
    $output .= '<img src="' . $avatar . '" style="width: 40px; height: 40px; border-radius: 50%;">';
    $output .= '<div class="conversations-code-text">' . $content . '</div>';
    $output .= '</div>';

    return $output;
}

add_shortcode('piccard', 'pic_card');
function pic_card($attr, $content = '')
{
    extract(shortcode_atts(array("icon" => "", "title" => "", "img" => "", "color" => ""), $attr));
    return '<section class="piccard">
    <div class="img" alt="Pic-Card" style="background:url('. $img .');background-size:cover;background-position: center;">
    </div>
    <br>
    <a href="'. $content .'"><div class="title">
    '. $title .'
    </div></a>
</section>';
}

add_shortcode('biscard', 'biscard');
function biscard($attr, $content = '') 
{
    extract(shortcode_atts(array("avatar" => "", "direction" => ""), $attr));

    $output = '<div class="biscard-code" style="display: flex; flex-direction: colomn; padding: 10px;">';
    $output .= '<img src="' . $avatar . '" style="width: 40px; height: 40px; border-radius: 50%;">';
    $output .= '<div class="biscard-code-text">' . $content . '</div>';
    $output .= '</div>';

    return $output;
}

//短代码结束

fuction函数逻辑

如前面所说，我这里短代码是摘抄自Sakurairo，因为不涉及到修改js库，对我惨淡的改代码人生来讲是个难得的好消息，首先是基础样式基本上按照卡片信息块和聊天气泡来处理，然后去掉icon，去掉卡片的button，因为同时让button和图片大小进行伸缩会导致元素抖动，很显然我是没有精力去管这个的，另外本身角标的设计就并不是很必要，直接让图片承担链接任务就好。

在此基础上修改的全覆盖带名称的卡片就直接让文字box重叠图片，达到一种透明遮罩的效果，然后作为主力相框使用，在此其中get到display和position的用法，剩下的基本上就是用margin和padding不停调整位置，用他同样的原理制作了名片短代码。

当时有一个比较微妙的点，就是要把a href的嵌套放在你想要作为承接目标对象的那块代码外面，所以我是观察了一下就把a href从button身上挪出来了（本身button也要被删掉，顺带一提知道很多小元素是怎么出现的了）然后嵌套在图片身上，同样的做相框卡片的时候因为用title做box直接遮罩，所以把a href放在title元素外壳。

然后我昨天找了下有没有好用的可视化css编辑器，最后证明是没有（）还是老老实实用额外css和f12开两个页面并存算了。

然后我今天唯一失策的就是还原到昨天的状态的时候还更新了很多内容，现在看来似乎全都失效了，用wp自带的xml无法实现增量更新，搞得我又把all import给下载回来了，还好格式上是直接认可的，但是它真的好麻烦好麻烦啊！

一波过去了之后我要放弃一段时间改博客，对于一个业余爱好者来讲每一次崩溃都简直是噩梦。

其他

在网上找资料写了个部分加密，这就不用再用插件了，而且没有ppwp那种非得重复两遍的臭毛病，坏处是它不缓存，因为很显然地没有写白名单的函数所以即使是我来看也必须得每次都输入密码呃呃呃。

好处是作为一个完全由函数写就的内容，改它css很容易。

部分加密的代码是

// 加密部分内容短代码
function kyx_secret_content($atts, $content=null){
extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
return '<div class="secret-password">'.$content.'</div>';
} elseif(isset($_POST['secret_key'])) {
return '<div class="widget widget_block"><div class="widget widget_ui_posts">
<h3>这个密码不对哦！</h3>
<form action="'.get_permalink().'" method="post">
<input id="ipt" class="search-input" type="password" size="20" name="secret_key">
<button type="submit" class="search-btn">解锁</button></form>
</div></div>';
} else {
return '<div class="widget widget_block"><div class="widget widget_ui_posts">
<h3>这段内容已被隐藏，密码见上方提示</h3>
<form action="'.get_permalink().'" method="post">
<input id="ipt" class="search-input" type="password" size="20" name="secret_key">
<button type="submit" class="search-btn">解锁</button></form>
</div></div>';
}
}
add_shortcode('secret', 'kyx_secret_content');

然后作为简码直接输入[noshortcode] 这段内容中的短代码将不会被解析 [secret key=”这里写密码”]这里写内容[/secret] [/noshortcode]就可以了

一些基于本主题的技术问题（三）

搞短代码搞到两点半

Argon设置

额外CSS部分

短代码定义部分

fuction函数逻辑

其他