宝塔面板“抱歉，站点已停止运行”提示页面的修改
由于业务变更或者其它的临时原因，可能会需要用到宝塔的停止站点这个功能，停止后，访问网站会看到下面这个提示界面： 如果想更换，其实我们只需要在宝塔文件里找到：/www/server/stop/index.html进行修改就行了！ 抱歉，站点已停止运行 抱歉！该站点已经被管理员停止运行，请联系胖蒜网了解详情！ 进入胖蒜网
胖蒜网之前基本没有代码高亮，代码这块的处理就是简单的写在CSS的几行样式和一个JS文件，虽能实现，总感觉体验不好。今天去网上搜索了一下，发现 Prism 挺适合的，简单，小巧，个人博客用足够了。 Prism 是一个轻量级、可扩展的语法高亮库，使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能，支持超过上百种编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。为什么选择 Prism.js简单易用 引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！ 天生伶俐 语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。 轻如鸿毛 核心代码压缩后只有 2KB。每添加一个语言平均增加 0.3-0.5KB，主题样式在 1KB 左右。 快如闪电 如果可能，支持通过 Web Workers 实现并行。 轻松扩展 定义新语言或扩展现有语法，或者新增功能都非常简单。 丰富样式 所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。如何使用导入引擎和样式<link rel="stylesheet" href="<?php $this->options->themeUrl('css/prism.css'); ?>"> <script src="<?php $this->options->themeUrl('js/prism.js'); ?>" > 上面代码请根据实际情况修改一下，prism.js和prism.css你都可以自己在 https://prismjs.com/download.html 上选择配置，支持的语言有很多，选择你自己需要的语言；也有很多插件，比如行号，代码复制，代码预览，代码语言等，都可以自行选择。官方也提供多种主题配色，选择适合自己的。 选择好之后下载对应的 js 和 css 来引用到你的项目中。在文章中插入代码在Typecho编辑器中，使用对应语句包裹代码，就可以实现代码高亮的效果。 " ` "符号又称为抑音符，可在英文输入状态下按键盘左上方"~"输入。转义Prism中的尖括号 < >假如发表类似html代码，会有尖括号 < >，直接使用会有问题，需要进行转义，需要使用 < 和 > ，而不是 < 和 > 。使用中存在的问题？我个人因为不注重这块，所以在之前的代码中没有加上对应语言，所以代码高亮一直没有显示，后来发现是这个问题，这个不好的习惯以后得改正。
今天我要从腾讯网上弄个视频，放在PPT中讲课使用，我最先想到的方式是把链接放PPT文档中，讲课时点击链接打开即可，可我在试讲的时候，发现每次点击链接打开视频都要播放一段30秒的广告，不是会员不能跳过，然后页面还充斥着很多广告；其次，如果到时候讲课的环境没有网络的话，不就无法演示了吗？ 想到这里，我觉得还是要把视频下载下来比较好，放在本地，可以直接插入到PPT中，然后我就想怎么才能下载下来，首先就是在页面鼠标右键，去看页面代码查找，发现没找到；然后就是去找猴油脚本，又遇到墙的问题；最后不得已下载了腾讯的客户端，一顿操作终于下载了，然后又卸载了腾讯视频客户端。为了一个视频折腾一顿，真心没必要，有没有简单好用的方法呢？ 经过多次测试比较，我发现了这个，还是很实用的，后面我打算做个视频教程。 使用方法在电脑本地建立一个HTML格式文件，复制下面代码到文件里，双击打开文件，按页面提示操作即可。 腾讯视频下载 首先在视频上点击播放视频-->鼠标右键-->视频信息-->复制-->粘贴到文本编辑器-->复制vid前半部分，然后将复制的vid粘贴到下方输入框： 视频页面地址 视频vid 获取下载地址 注意事项本人亲测目前仅支持腾讯视频。
钉钉群自定义机器人签名问题修复记录
今天有用户反馈，钉钉群机器人使用有问题，我去看看果然，问题出在鉴权上面。钉钉默认的鉴权方式三种，分别是关键词，签名和 IP 白名单；关键词没有做多考虑放弃了，IP 白名单比较简单，但考虑到我这个是提供给大家用的，每个人都要输入我的IP，太麻烦了，所以还是觉得加签或许好一点。 在设置自定义机器人的时候，选择加签，然后在胖蒜网的个人中心，设置钉钉的Webhook地址和加签密钥，最后在上面选择推送方式为钉钉即可进行消息推送。 既然选择加签，我们来说一下加签方式，跟其它不一样，是这样的。 具体代码如下，先写个Curl函数：function request_by_curl($remote_server, $post_string) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $remote_server); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5); curl_setopt($ch, CURLOPT_HTTPHEADER, array ('Content-Type: application/json;charset=utf-8')); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_string); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 线下环境不用开启curl证书验证, 未调通情况可尝试添加该代码 // curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0); // curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, 0); $data = curl_exec($ch); curl_close($ch); return $data; } 然后来传数据试试：/** * 签名实现 */ $ding_webhook = "Webhook地址"; list($s1, $s2) = explode(' ', microtime()); $timestamp = (float)sprintf('%.0f', (floatval($s1) + floatval($s2)) * 1000); $secret = "加签密钥"; $sdata = $timestamp . "\n" . $secret; $signStr = base64_encode(hash_hmac('sha256', $sdata, $secret,true)); $signStr = utf8_encode(urlencode($signStr)); $webhook = "{$ding_webhook}&timestamp={$timestamp}&sign={$signStr}"; //$message="我就是我, 是不一样的烟火"; $data = array ('msgtype' => 'text','text' => array ('content' => $message)); $data_string = json_encode($data); $res_send_msg = request_by_curl($webhook, $data_string); 参考地址https://open.dingtalk.com/document/robots/custom-robot-access
胖蒜网的打赏页面使用的是TePass插件，打赏的时候如果没有登录，采用默认的头像，我本站是利用JS将默认头像改为打赏名称的首字母，因为要引用jquery，我本人不是很喜欢，所以就没有加到插件里面。 现在我尝试用PHP生成头像的形式，将默认的无头像打赏者的头像变成了打赏名称的首字母，具体效果可以前往我的功能定制页面查看：https://pangsuan.com/service.html/** * 首字母头像 * @param $text * @return string */ function letter_avatar($text) { $total = unpack('L', hash('adler32', $text, true))[1]; $hue = $total % 360; list($r, $g, $b) = hsv2rgb($hue / 360, 0.3, 0.9); $bg = "rgb({$r},{$g},{$b})"; $color = "#ffffff"; $first = mb_strtoupper(mb_substr($text, 0, 1)); $src = base64_encode(' ' . $first . ' '); return 'data:image/svg+xml;base64,' . $src; } function hsv2rgb($h, $s, $v) { $r = $g = $b = 0; $i = floor($h * 6); $f = $h * 6 - $i; $p = $v * (1 - $s); $q = $v * (1 - $f * $s); $t = $v * (1 - (1 - $f) * $s); switch ($i % 6) { case 0: $r = $v; $g = $t; $b = $p; break; case 1: $r = $q; $g = $v; $b = $p; break; case 2: $r = $p; $g = $v; $b = $t; break; case 3: $r = $p; $g = $q; $b = $v; break; case 4: $r = $t; $g = $p; $b = $v; break; case 5: $r = $v; $g = $p; $b = $q; break; } return [ floor($r * 255), floor($g * 255), floor($b * 255) ]; } echo " ";
关于网站深色（黑暗）模式的思考与实践
不知从什么时候开始，应该有好几年了，网站开始兴起黑暗模式，简单来说就是白天浅色，晚上深色，美其名日护眼。看到很多网站都有，如是我也去抄了一份加在我的主题里面，可是我感觉还是有些问题，今天思考了一下，就又折腾了一下胖蒜网的主题。网站之前的黑暗模式我网站最开始的黑暗模式是这样的，白天是浅色，也就是正常模式，到了晚上就是深色，用一段JS代码，写好了时间，比如晚上十点到早晨六点直接深色模式，这是自动的，到了时间就切换。这样就很不好，有的用户不喜欢黑暗模式，也强制切换了。 后来，我就在右上角加上了一个按钮，可以手动切换，如果不喜欢黑暗模式，手动切换一下就可以，这样就生成了一个cookie，保存在用户浏览器的客户端，下次访问就按照用户设置的。 这样虽说解决了问题，但是体验还是感觉不好。 代码见文章《js + css 自动/手工开启网站白天/黑夜模式》，这里也再啰嗦一次。下面说说胖蒜网之前实现的方法在header.php里面的body标签这么改：<body class="page-home <?php if(!isset($_COOKIE['night'])){ $_COOKIE['night'] = ""; } echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">然后在footer.php里面写JS文件： 最后，找个地方放切换按钮：胖蒜网现在的深色（黑暗）模式实现方法既然自己觉得之前的方法不好，那么我就去想了想，想用户的使用习惯，什么样的用户会使用黑暗模式？ 一般黑暗模式，需要用户在自己的设备设置才可以，比如iOS系统，而且还要比较新的系统才行，那么既然用户去设置了这个，就代表用户默认喜欢这种色系，就没有必要去设置切换，也没有必要去自己给用户设置时间，因为这一切交给操作系统即可。 既然这种模式这么依赖用户的操作系统，那么问题就很好解决了，支持这种模式的操作系统浏览器肯定是支持的，我去找了一下也确实有现成。 拿一个平常大家都用的微信来举例，如果你的手机设置了深色模式，微信就会自动切换到深色模式，你要切换模式就得去微信设置里面。再比如说GitHub这个网站，也是用这种方式，它会根据你设备终端，跟随系统来自动切换。在主题header.php里面加自适应代码 然后自己给dark模式，写一些样式来适应，样式写在下面代码之间： 总结目前胖蒜网采用的是后面的方式，使用一段时间看看体验怎样，目前觉得我这种想法还是很好的，也欢迎大家发表自己的想法。
网站的阅读量上来之后，几万几十万的数字就太长了，如果转换成w，k之后，虽说不精确，但是很方便一眼看出来大概有多少浏览。介绍：1000以上的阅读量可以转化为1k，10000以上的转换成w为单位。 例如 1600 转换为1.6k； 或者 16600 转换为 1.66w。代码：function convert($num) { if ($num >= 100000) { $num = round($num / 10000) .'W+'; } else if ($num >= 10000) { $num = round($num / 10000, 1) .'W+'; } else if($num >= 1000) { $num = round($num / 1000, 1) . 'K+'; } return $num; }代码分析：round() 函数，round() 函数对浮点数进行四舍五入。 效果如下：参考文章：https://cloud.tencent.com/developer/article/1942394
由于Gravatar头像总是无法访问，所以增加QQ头像来补充是个好方法，而正好腾讯有接口。 【腾讯QQ头像获取直链】 API接口：http://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640 调用例子：http://q1.qlogo.cn/g?b=qq&nk=190014322&s=640 【QQ高清头像】 http://q.qlogo.cn/headimg_dl?dst_uin=QQ号码&spec=640&img_type=jpg 【QQ昵称】 http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=QQ号码 【头像尺寸】s/specPX140 x 40240 x 403100 x 1004140 x 1405640 x 6404040 x 40100100 x 100但是这样会暴露QQ号码，懂点代码的直接查看图片地址，就把QQ暴露了，这样对用户隐私不好。 于是想到了这样的QQ头像地址： https://q1.qlogo.cn/g?b=qq&k=0n5AZ9Ne4h3em8iboKu3sHg&s=100 上面的地址，中没有QQ号，却获取了某人的qq头像，里面的重要参数就是K的值，那么如何获取K值呢？ 访问下面的地址就能得到一个json： http://ptlogin2.qq.com/getface?appid=101382166&imgtype=1&encrytype=0&devtype=0&keytpye=0&uin=QQ号码&r=0.17780657206333406 简化下无用参数，变成： http://ptlogin2.qq.com/getface?&imgtype=1&uin=QQ号码 访问上述地址得到的json： pt.setHeader({"QQ号":"http://q3.qlogo.cn/g?b=qq&k=对应的K值&s=40&t=1483323281"});$qq = '你的QQ号码'; $geturl = 'http://ptlogin2.qq.com/getface?&imgtype=1&uin='.$qq; $qquser = file_get_contents($geturl); $str1 = explode('&k=', $qquser); $str2 = explode('&s=', $str1[1]); $k = $str2[0]; $qqimg = 'https://q1.qlogo.cn/g?b=qq&k='.$k.'&s=100'; echo $qqimg;获取QQ头像不暴露QQ接口直接调用https://s.p.qq.com/pub/get_face?img_type=3&uin=QQ将上面的QQ 换成要调用的QQ 参数即可。
Typecho文章内挂载B站视频操作教程（附代码）
昨天在B站投稿了一个Win11操作系统安装在WMware虚拟机的操作教程，顺便发到胖蒜网，并将视频挂载过来，发现不是很完美，就稍微调整了一下。效果 步骤一：给主题的样式文件增加视频相关样式/*视频挂载*/ .iframe_video { position: relative; width: 100%; } @media only screen and (max-width: 767px) { .iframe_video { height: 15em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .iframe_video { height: 20em; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .iframe_video { height: 30em; } } @media only screen and (min-width: 1200px) { .iframe_video { height: 40em; } } .iframe_cross { position: relative; width: 100%; height: 0; padding-bottom: 75% } .iframe_cross iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0 }这段代码的作用就是根据主题在不同设备打开，控制视频去适配大小。步骤二：复制视频源代码打开B站视频网页，如图找到嵌入代码然后复制到文章中，因为Typecho使用的是MarkDown编辑器，要在代码前后各加三个感叹号。 使用iframe格式的，可以用我的视频体验一下： 复制适配后，把前面加的样式填进去class="iframe_video" ，填进去后是这样的： 发布文章，去打开文章看看，效果就跟我网站一样啦~~
教你设置当 Google Adsense 广告空白时显示背景图片
胖蒜网其实在很早就有Google Adsense账户，但是基本很少挂广告，主要是一些几个原因： 一、很多广告太丑，低俗，影响用户的体验。 二、速度太慢，拖累整个网站，按F12一堆红色的告警，我很不喜欢。 三、有些地方显示空白，明明网站内容很丰富了，还是空白，用户感觉奇怪，为啥一堆空白的没东西。 四、不喜欢的理由还有很多... 我这里就是为了解决三，而写的这篇文章，谷歌广告没有了，就显示空白，但是空白很丑，那么我们可以加个背景图片，用个DIV把谷歌广告包起来即可，代码如下： 这里放谷歌广告代码即可。 当没有广告的时候，效果如下： 很简单，写这个就是提供一种思路而已，就这样。