过期提醒：本页面距今已有1054天没有更新，年久失修，内容可能有所偏颇，还请仔细甄别！ Loading... # 字体修改为谷歌思源黑体 引用谷歌网络字体，不需要上传字体到服务器，修改后，夜间模式字体不会变化，造成看不清楚。不过实在看不习惯原来字体，忍了，等有其它好方法更改。 应用日期：2020-10-12 `自定义CSS中加入如下代码` ```html *{font-family: 'Noto Serif SC', serif;} .text-muted { color: #000000!important; } .navi ul.nav li a{ color: #000000!important; } .bg-black #skPlayer { color: #ffffff!important; } .bg-black .nav>li>a { color: #ffffff!important; } .text-muted { color: #000000!important; } body { color: #000000!important; } #post-content{ color:#000000!important; } ``` `自定义输出head 头部的HTML代码` ```http <link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet"> ``` 或者 ```http <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;700&display=swap" rel="stylesheet"> ``` 现在用的是第二种。 # 标签随机颜色 ### 方法１： 下面是源码， 在/handsome/component/sidebar.php位置<!--非文章页面-->下面 ```php <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h5 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h5> <div class="tags l-h-2x"> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a> <?php endwhile; ?> <?php endif; ?> </div> </section> ``` 修改为： ```php <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3> <div class="tags l-h-2x"> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <span id="tag-clould-color" style="background-color:rgb(<?php echo(rand(100,150)); ?>,<?php echo(rand(150,200)); ?>,<?php echo(rand(200,255)); ?>)"> <a href="<?php $tags->permalink();?>" title="<?php echo sprintf(_mt("该标签下有 %d 篇文章"),$tags->count); ?>" data-toggle="tooltip" > <?php $tags->name(); ?></a> </span> <?php endwhile; ?> <?php endif; ?> </div> </section> ``` 在后台，后台－控制台－外观－自定义css中加入以下css代码 ```php /* tag-clould-color 彩色标签云 */ #tag-clould-color { padding: 3px 10px 3px 10px; border-radius: 10px; color: #FFFFFF; margin: 3px 3px 3px 0; display: inline-block; } ``` ### 方法２： 在后台－自定义css代码中添加以下代码 ```php let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); ``` 如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中 # 页尾动态显示建站时间 效果：  打开handsome/component/footer.php，实现动态显示运行时间 在footer.php适当的位置添加下面的代码即可 ```php <span id="runtime_span"></span> <script type="text/javascript"> function show_runtime() {window.setTimeout("show_runtime()",1000);X=new Date("8/15/2020 15:00:00"); Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000; a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60); runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime(); </script> ``` 我是放在左下角，代码放的位置是：  代码上面原代码还有一个```<span></span>```是显示`© 2020 Copyr`，我也直接删掉了。 # 手机网页端后台，点不了导航二级菜单修正 后台点击导航时，总自动跳转二级导航首个连接，选择不了其它连接。 解决办法如下： 找到Typecho目录中的/var/Widget/Menu.php 打开搜索定位到如下代码（大概309行上下）  找到： ```python <li class=\"parent\"><a href=\"{$node[2]}\">{$node[0]}</a>" ``` 修改为 ```python <li class=\"parent\"><a href=\"#\">{$node[0]}</a>" ``` 保存上传即可 # 后台编辑器不能上传图片 打开/var/Typecho/Common.php 这个文件，找到下面这段代码： ```php public static function isAppEngine() { return !empty($_SERVER['HTTP_APPNAME']) // SAE || !!getenv('HTTP_BAE_ENV_APPID') // BAE || !!getenv('SERVER_SOFTWARE') // BAE 3.0 || (ini_get('acl.app_id') && class_exists('Alibaba')) // ACE || (isset($_SERVER['SERVER_SOFTWARE']) && strpos($_SERVER['SERVER_SOFTWARE'],'Google App Engine') !== false) // GAE ; } ``` 修改为： ```php public static function isAppEngine() { return false; } ``` 上面改的取消对上传文件的检测限制。 接下来把typecho里的usr/目录权限修改为777，好像本来usr文件就已经是777权限，如果不是就修改。 # 说说页及文章修改后，日期不对 如果用的是国外服务器，使用的是UTC(世界协调时间），容易出现发表说说（评论后）及文章修改后，时间不对， 修改服务器时区可以解决，宝塔面板在linux工具箱有服务器时区设置，修改为asia,shanghai，没用宝塔搭建网站之前一直被这个问题困绕，谷歌很多修改typecho代码的文章都没效果。 # 文章头部添加更新日期 效果：  打开主题目录下post.php文件，在适当位置添加如下代码，一般添加在post-content后面（表示文章正文开始的地方）  ```php <div class="tip inlineBlock share" rel="nofollow"> <p> 本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>， 已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。 如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ </p> </div> ``` 注意：代码引用的css是handsome主题内置的，如果要用在其他主题，请自行把这个css扒下来！ # # 文章边缘彩色阴影化 本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。 其中：rgba()里面4个参数分别代表红，绿，蓝，透明度，可以在<button class="btn m-b-xs btn-info btn-rounded " onclick='window.open("http://www.calculatorcat.com/calc/color_picker/","_blank")'>拾色器</button>，选择自己喜欢的颜色，或者用ps等获取喜欢的三原色的值 ```php /*panel阴影*/ .panel{ box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); } .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); } .panel-small{ box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); } .panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); } #如果也想使盒子四周也有阴影，加上以下代码 .app.container { box-shadow: 1px 1px 5px 5px rgba(53, 206, 255, 0.35); } ``` 我选择的是浅蓝  # 复制弹框 **效果如图：**  **步骤1：先将下面代码复制到`自定义输出body 尾部的HTML代码`即可** ```php <!--复制弹框--> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> ``` **步骤2：再将下面代码复制到`自定义 Javascript`即可** ```php <!--复制弹框--> document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; ``` # 添加心知天气 先注册个账号，并开通免费版服务<button class="btn m-b-xs btn-info btn-rounded " onclick='window.open("https://www.seniverse.com/","_blank")'>心知天气</button>  生成的代码只复制`<script>`部分，添加两行`<div>`代码 ```php <!-- 心知天气--> <!--添加以下两行div代码，可以正确显示在搜索框后--> <div class="navbar-form navbar-form-sm navbar-left shift"></div> <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div> <script> (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10))); window.SeniverseWeatherWidget('show', { <!--这里要改成slim--> flavor: "slim", location: "WS0E9D8WN298", geolocation: true, language: "auto", unit: "c", theme: "auto", <!--这里token是你的账号生成，每个人不一样--> token: "63d48486-48df-417b-8560-e9cba195e195", <!--这里hover设置为不展开，不然会全屏展开影响效果--> hover: "enabled", container: "tp-weather-widget" }) </script> <!-- 心知结束--> ``` **代码放在`themes/handsome/component/headnav.php`**：  # 后台登陆界面美化 [sunpma'blog](https://sunpma.com/674.html) 第28项，我只是把其中的英文全改为中文  第一步：用压缩包内的`login.php`文件替换掉`/admin/login.php`文件 第二步：将压缩包内的`style`文件夹上传到`/admin/`文件夹下 第三步：修改`login.php`第35行，把“SunPma'Blog”替换成自己的信息 ## 滑稽表情 [sunpma'blog](https://sunpma.com/674.html) 第26项，滑稽表情包，表情包应该放在/usr/themes/handsome/assets/img/emotion/目录下 ## 文章按最后编辑时间排列 打开根目录下**/var/Widget/Archive.php**文件，搜索**仅输出文章**，可以看到如下的文章排序代码： ```php /** 仅输出文章 */ $this->_countSql = clone $select; $select->order('table.contents.created', Typecho_Db::SORT_DESC) ->page($this->_currentPage, $this->parameter->pageSize); $this->query($select); } ``` 将其中的`<span> </span>table.contents.created<span> </span>`改为 `table.contents.modified` 即可。 ## 心情文字居中 ```php <header class="bg-light lter b-b wrapper-md"> #替换成 <header class="bg-light lter b-b wrapper-md" style="text-align:center"> ``` ## 网页标题变化 **把以下代码复制到`自定义JavaScript`即可** ```js var OriginTitile = document.title, titleTime; document.addEventListener("visibilitychange", function() { if (document.hidden) { document.title = "网页已崩溃！"; clearTimeout(titleTime) } else { document.title = "(/≧▽≦/)你又回来了！ " ; titleTime = setTimeout(function() { document.title = OriginTitile }, 2000) } }); ``` ## 主题文件概述 由于本人并非作者，水平关系部分文件可能解释不对，仅供参考 component/aside.php 左边导航栏 component/comments.php 评论区 component/footer.php 底部版权、音乐播放器之类 component/header.php 页面头，没啥要改的 component/headnav.php 顶部导航 component/say.php 时光机动态 component/sidebar.php 右侧栏目 component/third_party_comments.php 3.3.0新增，第三方评论 css/ 博客CSS，一般不要改 fonts/ 博客字体，一般不要改 img/ 图像，一般不要改 js/ js文件，一般不要改 lang/ 语言文件 libs/Content.php 文章内容 libs/... 一般不要改 usr/ 另一个语言文件？ 404.php 404界面 archive.php 整合 booklist.php 书单 cross.php 时光机 files.php 归档 functions.php 配置界面的东西 guestbook.php 留言板 index.php 首页 links.php 友链 page.php 文章页面整合 post.php 文章输出 # **Glyphicons字体图标** https://v3.bootcss.com/components/#glyphicons  # 更换音乐播放器 自带的音乐播放器，在手机上使用时，需要先打开搜索按钮，在里面找到播放器播放，更换音乐，关闭等，都要去里面操作，比较麻烦，换了另外 一款播放器。 先把播放器界面去掉，代码在 **/handsome/component/headnav.php** ```java <ul class="nav navbar-nav navbar-right"> <!--从这里开始去掉--> <?php if(@in_array('musicplayer',$this->options->featuresetup)): ?> <li class="music-box hidden-xs hidden-sm"> <div id="skPlayer"></div> </li> <li class="dropdown "><a class="skPlayer-list-switch dropdown-toggle feathericons"><i data-feather="disc"></i><span class="visible-xs-inline"></span></a></li> <?php endif; ?> <!--到这里结束--> <?php echo $headerItemsOutput; ?> <?php if (!$hideTalkItem): ?> <!--闲言碎语--> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle"> <i data-feather="twitch"></i> <span class="visible-xs-inline"> <?php _me("闲言碎语") ?> ``` 到这个网址：https://music.clwl.online/ 注册后，在歌单管理中添加歌单，歌单里面添加歌曲，  在player管理里面把刚才的歌单添加进播放器  获取代码里面，复制播放器代码，粘贴到要显示的位置，我是放在**/handsome/component/header.php**  显示效果如下 ：  更多修改请参考： <button class="btn m-b-xs btn-info btn-rounded " onclick='window.open("https://blog.csdn.net/m0_45963906/article/details/106959084?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight","_blank")'>魔改记录</button> <button class="btn m-b-xs btn-info btn-rounded " onclick='window.open("https://blog.csdn.net/qq_44747221/article/details/107859787","_blank")'>美化修改</button> <button class="btn m-b-xs btn-info btn-rounded " onclick='window.open("https://sunpma.com/674.html","_blank")'>sunpma'blog</button> 最后修改：2020 年 11 月 05 日 11 : 32 AM © 允许规范转载 赞赏 如果觉得我的文章对你有用，请随意赞赏 ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付
