devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Argon美化教程（搬运+实践）_argon主题美化

作者：从前慢现在也慢 | 2024-04-12 14:24:18

赞

踩

argon主题美化

本站 Argon

直接复制粘贴到 后台 - Argon 主题选项 - 底部 - 导入设置

链接（点击）：1689337651-argon

5fb092b76382a42af05b26d19f25a2dd.png

背景透明

进入后台 - 外观 - 自定义 - 额外 css

  1.  /*日间模式背景透明*/
  2. .card{
  3. background-color:rgba(255, 255, 255, 0.8) !important;
  4.  
  5. -webkit-backdrop-filter:blur(6px);
  6. }
  7.  
  8. /*夜间模式背景透明*/
  9. html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
  10. background:rgba(66, 66, 66, 0.9) !important;
  11. }
  12. html.darkmode #fabtn_blog_settings_popup{
  13. background:rgba(66, 66, 66, 0.95) !important;
  14. }
  15.  
  16. /*小工具栏背景透明*/
  17. .card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
  18. background-color:#ffffff00 !important;
  19. backdrop-filter:none;
  20. -webkit-backdrop-filter:none;
  21. }
  22. .emotion-keyboard,#fabtn_blog_settings_popup{
  23. background-color:rgba(255, 255, 255, 0.95) !important;
  24. }

 

1b05fd7661fce1bb20bd10ee024068e8.png

菜单前添加图标

注意这里面的图表其实本质上是文字而不是图片

Argon 主题内置了 Font Awesome 4.7.0 图标库。所以只需要在前面添加代码即可。

图标库链接：Font Awesome Icons

温馨提示：可以在图标代码后加一个空格再打网页名哦

 

945d018866063353f34b63013d18c5dc.png

添加小竖线

在 WordPress 后台 - Argon 主题选项中，找到文章内标题样式

 

74bcc8d1339215d74b74216bd37d6df0.png

顶部菜单栏放大

依次打开外观 - 自定义 - 额外 CSS

  1.  .navbar-nav .nav-link {
  2. font-size: 1rem;
  3. }
  4. .navbar-brand {
  5. font-size: 1.1rem;
  6. margin-right: 1rem;
  7. padding-bottom: .2rem;
  8. }
  9. .navbar-nav .nav-item {
  10. margin-right:0;
  11. }
  12. .navbar-expand-lg .navbar-nav .nav-link {
  13. padding-right: 0.9rem;
  14. padding-left: 1rem;
  15. }

年度倒计时显示

在左 / 右侧栏或站点概览额外内容中插入简码（Argon 主题中有作者头像那侧，一般为左侧栏，无法进行编辑，可通过站点概览额外内容进行添加

  1.  <div class="progress-wrapper" style="padding: 0">
  2. <div class="progress-info">
  3. <div class="progress-label">
  4. <span id="yearprogress_yearname"></span>
  5. </div>
  6. <div id="yearprogress_text_container" class="progress-percentage">
  7. <span id="yearprogress_progresstext"></span>
  8. <span id="yearprogress_progresstext_full"></span>
  9. </div>
  10. </div>
  11. <div class="progress">
  12. <div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
  13. </div>
  14. </div>
  15. <script no-pjax="">
  16. function yearprogress_refresh() {
  17. let year = new Date().getFullYear();
  18. $("#yearprogress_yearname").text(year);
  19. let from = new Date(year, 0, 1, 0, 0, 0);
  20. let to = new Date(year, 11, 31, 23, 59, 59);
  21. let now = new Date();
  22. let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
  23. let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
  24. $("#yearprogress_progresstext").text(progressshort + "%");
  25. $("#yearprogress_progresstext_full").text(progress + "%");
  26. $("#yearprogress_progressbar").css("width", progress + "%");
  27. }
  28. yearprogress_refresh();
  29. if (typeof yearProgressIntervalHasSet == "undefined") {
  30. var yearProgressIntervalHasSet = true;
  31. setInterval(function () {
  32. yearprogress_refresh();
  33. }, 500);
  34. }
  35. </script>
  36. <style>
  37. #yearprogress_text_container {
  38. width: 100%;
  39. height: 22px;
  40. overflow: hidden;
  41. user-select: none;
  42. }
  43. #yearprogress_text_container > span {
  44. transition: all 0.3s ease;
  45. display: block;
  46. }
  47. #yearprogress_text_container:hover > span {
  48. transform: translateY(-20px);
  49. }
  50. </style>

 

3b9a1945905714133fc3fe9cbcb6c7fe.png

页脚添加博客运行时间

在 Argon 主题设置处添加：

 

  1.  <div>本博客已运行 <span id="blog_running_days" class="odometer"></span> days <span id="blog_running_hours" class="odometer"></span> h <span id="blog_running_mins" class="odometer"></span> m <span id="blog_running_secs" class="odometer"></span> s</div>
  2. <script no-pjax>
  3. var blog_running_days=document.getElementById("blog_running_days");
  4. var blog_running_hours=document.getElementById("blog_running_hours");
  5. var blog_running_mins=document.getElementById("blog_running_mins");
  6. var blog_running_secs=document.getElementById("blog_running_secs");
  7. function refresh_blog_running_time(){
  8. //此处月份要-1，因为JS中Date月份从0开始算
  9. //2023.1.11开始运行
  10. var time = new Date() - new Date(2023,0,11, 8, 0, 0);
  11. var d=parseInt(time/24/60/60/1000);
  12. var h=parseInt(time%(24*60*60*1000)/60/60/1000);
  13. var m=parseInt(time%(60*60*1000)/60/1000);
  14. var s=parseInt(time%(60*1000)/1000);
  15. blog_running_days.innerHTML=d;
  16. blog_running_hours.innerHTML=h;
  17. blog_running_mins.innerHTML=m;
  18. blog_running_secs.innerHTML=s;
  19. }
  20. refresh_blog_running_time();
  21. if (typeof(bottomTimeIntervalHasSet) == "undefined"){
  22. var bottomTimeIntervalHasSet = true;
  23. setInterval(function(){refresh_blog_running_time();},500);
  24. }
  25. </script>

 

0021280bd1fa45e651c2d09f56d8db1a.png

左侧栏文章目录添加序号

Argon 主题设置中提供了这一选项。

鼠标左击特效

放在页头脚本中

 

  1.  <script type="text/javascript">
  2. var a_idx = 0;
  3. jQuery(document).ready(function($) {
  4. $("body").click(function(e) {
  5. var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
  6. var $i = $("<span></span>").text(a[a_idx]);
  7. a_idx = (a_idx + 1) % a.length;
  8. var x = e.pageX,
  9. y = e.pageY;
  10. $i.css({
  11. "z-index": 99999,
  12. "top": y - 20,
  13. "left": x,
  14. "position": "absolute",
  15. "font-weight": "bold",
  16. "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
  17. //"#2299DD" //固定颜色
  18. });
  19. $("body").append($i);
  20. $i.animate({
  21. "top": y - 180,
  22. "opacity": 0
  23. },
  24. 1500,
  25. function() {
  26. $i.remove();
  27. });
  28. });
  29. });
  30. </script>

自定义右击页面

放在页头脚本里

记得修改跳转链接

  1.  <!-- 自定义右键 -->
  2. <style type="text/css">
  3. a {text-decoration: none;}
  4. div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
  5. (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 5px;}
  6. div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
  7. div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
  8. div.usercm ul li a{color:#666;padding:0 15px;display:block}
  9. div.usercm ul li a:hover{color:#fff;background:rgba(9,145,113,0.88);border-radius: 5px}
  10. div.usercm ul li a i{margin-right:10px}
  11. a.disabled{color:#c8c8c8!important;cursor:not-allowed}
  12. a.disabled:hover{background-color:rgba(255,11,11,0)!important}
  13. div.usercm{background:#fff !important;}
  14. </style>
  15. <div class="usercm" style="left: 199px; top: 5px; display: none;">
  16. <ul>
  17. <li><a href="https://www.xyqiang.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
  18. <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
  19. <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>Bing一下</span></a></li>
  20. <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
  21. <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
  22. <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
  23. <li><a href="https://www.xyqiang.top/link/"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li> 
  24. <li><a href="https://www.xyqiang.top/liuyanban/"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
  25. </ul>
  26. </div>
  27. <script type="text/javascript" src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
  28. <script type="text/javascript">
  29. (function(a) {
  30. a.extend({
  31. mouseMoveShow: function(b) {
  32. var d = 0,
  33. c = 0,
  34. h = 0,
  35. k = 0,
  36. e = 0,
  37. f = 0;
  38. a(window).mousemove(function(g) {
  39. d = a(window).width();
  40. c = a(window).height();
  41. h = g.clientX;
  42. k = g.clientY;
  43. e = g.pageX;
  44. f = g.pageY;
  45. h + a(b).width() >= d && (e = e - a(b).width() - 5);
  46. k + a(b).height() >= c && (f = f - a(b).height() - 5);
  47. a("html").on({
  48. contextmenu: function(c) {
  49. 3 == c.which && a(b).css({
  50. left: e,
  51. top: f
  52. }).show()
  53. },
  54. click: function() {
  55. a(b).hide()
  56. }
  57. })
  58. })
  59. },
  60. disabledContextMenu: function() {
  61. window.oncontextmenu = function() {
  62. return !1
  63. }
  64. }
  65. })
  66. })(jQuery);
  67.  
  68. function getSelect() {
  69. "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy")
  70. }
  71. function baiduSearch() {
  72. var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  73. "" == a ? layer.msg("请选择需要Bing的内容！") : window.open("https://cn.bing.com/search?q=" + a)
  74. }
  75. $(function() {
  76. for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
  77. d = !1;
  78. break
  79. }
  80. d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
  81. });
  82. </script>

备案信息

放在页脚处

CSS：

  1.  <style>
  2. /* 核心样式 */
  3. .github-badge {
  4. display: inline-block;
  5. border-radius: 4px;
  6. text-shadow: none;
  7. font-size: 13.1px;
  8. color: #fff;
  9. line-height: 15px;
  10. margin-bottom: 5px;
  11. font-family: "Open Sans", sans-serif;
  12. }
  13. .github-badge .badge-subject {
  14. display: inline-block;
  15. background-color: #4d4d4d;
  16. padding: 4px 4px 4px 6px;
  17. border-top-left-radius: 4px;
  18. border-bottom-left-radius: 4px;
  19. font-family: "Open Sans", sans-serif;
  20. }
  21. .github-badge .badge-value {
  22. display: inline-block;
  23. padding: 4px 6px 4px 4px;
  24. border-top-right-radius: 4px;
  25. border-bottom-right-radius: 4px;
  26. font-family: "Open Sans", sans-serif;
  27. }
  28. .github-badge-big {
  29. display: inline-block;
  30. border-radius: 6px;
  31. text-shadow: none;
  32. font-size: 14.1px;
  33. color: #fff;
  34. line-height: 18px;
  35. margin-bottom: 7px;
  36. }
  37. .github-badge-big .badge-subject {
  38. display: inline-block;
  39. background-color: #4d4d4d;
  40. padding: 4px 4px 4px 6px;
  41. border-top-left-radius: 4px;
  42. border-bottom-left-radius: 4px;
  43. }
  44. .github-badge-big .badge-value {
  45. display: inline-block;
  46. padding: 4px 6px 4px 4px;
  47. border-top-right-radius: 4px;
  48. border-bottom-right-radius: 4px;
  49. }
  50. .bg-orange {
  51. background-color: #ec8a64 !important;
  52. }
  53. .bg-red {
  54. background-color: #cb7574 !important;
  55. }
  56. .bg-apricots {
  57. background-color: #f7c280 !important;
  58. }
  59. .bg-casein {
  60. background-color: #dfe291 !important;
  61. }
  62. .bg-shallots {
  63. background-color: #97c3c6 !important;
  64. }
  65. .bg-ogling {
  66. background-color: #95c7e0 !important;
  67. }
  68. .bg-haze {
  69. background-color: #9aaec7 !important;
  70. }
  71. .bg-mountain-terrier {
  72. background-color: #99a5cd !important;
  73. }
  74. </style>

HTML：

  1.  <div class="github-badge-big">
  2. <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span
  3. ><span class="badge-value bg-orange">
  4. <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes"
  5. >皖ICP备2022016531号</a
  6. >
  7. |
  8. <a
  9. href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255"
  10. target="_blank"
  11. one-link-mark="yes"
  12. >皖公网安备 (备案中)</a>
  13. </span>
  14. ​
  15. </div>
  16. <div class="github-badge-big">
  17. <span class="badge-subject">Copyright </span
  18. ><span class="badge-value bg-red">
  19. 2022-2022
  20. <i class="fa fa-copyright"></i> Qiang</span
  21. >
  22. </script>
  23. </div>
  24. ​
  25. <div class="github-badge">
  26. <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span
  27. ><span class="badge-value bg-green"
  28. ><a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes"
  29. >WordPress</a
  30. ></span
  31. >
  32. </div>
  33. <div class="github-badge-big">
  34. <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span
  35. ><span class="badge-value bg-apricots"
  36. ><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
  37. days
  38. <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
  39. <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
  40. <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
  41. S</span
  42. >

引用链接

Qiang's Blog:

agron主题美化设置 – QIANG – Blog

PandaX Blog:

Argon主题美化 - PandaX Blog

转载自impressi0n

https://impressi0n.asia/2023/07/14/21.html

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/411094
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号