Typecho 博客文章评论添加显示 UserAgent(UA)的功能

  • 本篇文章实现了为 Typecho 博客文章评论添加显示 UserAgent(UA)的功能
  • 本功能可替代 UserAgent 插件,更美观、简洁且好看

效果显示

  • 大概就是这样了,实际效果请看我的评论!
    TIM截图20200226131837.png
  • 目前可以识别的操作系统以及浏览器
    3404854218.png

食用方法

  • 这里以 Mirages主题为例,其他主题操作方法类似。

首先
将下面这段 css 全部加入到 Mirages/css/7.10.0/Mirages.min.css 末尾。

.ua-icon{display:inline-block;width:1pc;height:1pc;background-size:cover;background-repeat:no-repeat;vertical-align:text-top}.icon-360{background-image:url(https://img.jichun29.cn/img/20200226125429.png)}.icon-android{background-image:url(https://img.jichun29.cn/img/20200226125423.png);height:19px}.icon-apple{background-image:url(https://img.jichun29.cn/img/20200226125422.png)}.icon-baidu{background-image:url(https://img.jichun29.cn/img/20200226125424.png)}.icon-chrome{background-image:url(https://img.jichun29.cn/img/20200226125427.png)}.icon-edge{background-image:url(https://img.jichun29.cn/img/20200226125425.png)}.icon-firefox{background-image:url(https://img.jichun29.cn/img/20200226125426.png)}.icon-google{background-image:url(https://img.jichun29.cn/img/20200226125428.png)}.icon-ie{background-image:url(https://img.jichun29.cn/img/20200226125431.png)}.icon-liebao{background-image:url(https://img.jichun29.cn/img/20200226125430.png)}.icon-linux{background-image:url(https://img.jichun29.cn/img/20200226125433.png)}.icon-mac{background-image:url(https://img.jichun29.cn/img/20200226125432.png)}.icon-opera{background-image:url(https://img.jichun29.cn/img/20200226125434.png)}.icon-qq{background-image:url(https://img.jichun29.cn/img/20200226125435.png)}.icon-quark{background-image:url(https://img.jichun29.cn/img/20200226125437.png)}.icon-safari{background-image:url(https://img.jichun29.cn/img/20200226125438.png)}.icon-ubuntu{background-image:url(https://img.jichun29.cn/img/20200226125436.png)}.icon-uc{background-image:url(https://img.jichun29.cn/img/20200226125439.png)}.icon-win1{background-image:url(https://img.jichun29.cn/img/20200226125440.png)}.icon-win2{background-image:url(https://img.jichun29.cn/img/20200226125421.png)}
  • 也可后台加入自定义 css 或是直接在 header.php 中引入

然后
找到 Mirages/functions.php,将下面代码完整复制,加到 functions.php 文件的最末尾

    // 获取浏览器信息function getBrowser($agent){if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {$outputer = '<i class="ua-icon icon-ie"></i>&nbsp;&nbsp;Internet Explore';} else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('Firefox/', $regs[0]);$FireFox_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-firefox"></i>&nbsp;&nbsp;FireFox';} else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('Maxthon/', $agent);$Maxthon_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {$outputer = '<i class="ua-icon icon-360"></i>&nbsp;&nbsp;360极速浏览器';} else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('Edge/', $regs[0]);$Edge_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';} else if (preg_match('/UC/i', $agent)) {$str1 = explode('rowser/',  $agent);$UCBrowser_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';}  else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('rowser/',  $agent);$QQ_vern = explode('.', $str1[1]);$outputer = '<i class= "ua-icon icon-qq"></i>&nbsp;&nbsp;QQ浏览器';} else if (preg_match('/UBrowser/i', $agent, $regs)) {$str1 = explode('rowser/',  $agent);$UCBrowser_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';}  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {$outputer = '<i class= "ua-icon icon-opera"></i>&nbsp;&nbsp;Opera';} else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('Chrome/', $agent);$chrome_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-chrome""></i>&nbsp;&nbsp;Google Chrome';} else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {$str1 = explode('Version/',  $agent);$safari_vern = explode('.', $str1[1]);$outputer = '<i class="ua-icon icon-safari"></i>&nbsp;&nbsp;Safari';} else{$outputer = '<i class="ua-icon icon-chrome"></i>&nbsp;&nbsp;Google Chrome';}echo $outputer;}// 获取操作系统信息function getOs($agent){$os = false;if (preg_match('/win/i', $agent)) {if (preg_match('/nt 6.0/i', $agent)) {$os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows Vista&nbsp;/&nbsp;';} else if (preg_match('/nt 6.1/i', $agent)) {$os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows 7&nbsp;/&nbsp;';} else if (preg_match('/nt 6.2/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8&nbsp;/&nbsp;';} else if(preg_match('/nt 6.3/i', $agent)) {$os = '&nbsp;&nbsp;<i class= "ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8.1&nbsp;/&nbsp;';} else if(preg_match('/nt 5.1/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-win1"></i>&nbsp;&nbsp;Windows XP&nbsp;/&nbsp;';} else if (preg_match('/nt 10.0/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 10&nbsp;/&nbsp;';} else{$os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows X64&nbsp;/&nbsp;';}} else if (preg_match('/android/i', $agent)) {if (preg_match('/android 9/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Pie&nbsp;/&nbsp;';}else if (preg_match('/android 8/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Oreo&nbsp;/&nbsp;';}else{$os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';}}else if (preg_match('/ubuntu/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-ubuntu"></i>&nbsp;&nbsp;Ubuntu&nbsp;/&nbsp;';} else if (preg_match('/linux/i', $agent)) {$os = '&nbsp;&nbsp;<i class= "ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';} else if (preg_match('/iPhone/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-apple"></i>&nbsp;&nbsp;iPhone&nbsp;/&nbsp;';} else if (preg_match('/mac/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-mac"></i>&nbsp;&nbsp;MacOS&nbsp;/&nbsp;';}else if (preg_match('/fusion/i', $agent)) {$os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';} else {$os = '&nbsp;&nbsp;<i class="ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';}echo $os;}

最后

在 Mirages/lib/comments.php 中找到合适位置添加以下代码:

<span class="comment-ua"><?php getOs($comments->agent); ?><?php getBrowser($comments->agent); ?></span>

TIM截图20200226131539.png

如果修改完都显示 Linux 的话,需要将上面的 $comments 替换成 $this 即可,注意代码缩进
修改完后刷新浏览器缓存,现在你的评论 UA 已经变得很漂亮啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt教程 — 3.5 深入了解Qt 控件:Display Widgets部件(1)

目录 1 Display Widgets简介 2 如何使用Display Widgets部件 2.1 QLabel组件-显示图像或文本 2.2 QCalendarWidget组件-日历简单的使用 2.3 QLCDNumber组件-控件作时钟的显示 2.4 QProgressBar组件-模拟手机电池充电 2.5 QFrame组件-绘制水平/垂直线 Display Widgets将分…

【C++练级之路】【Lv.16】红黑树(冰与火的碰撞,红与黑的史诗)

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《C语言》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、红黑树的概念二、红黑树的模拟实现2.1 结点2.2 成员变量2.3 插入情况一&#xff1a;uncle在左&#xff…

【Python】Scrapy整合FastAPI实现爬虫API 附大量示例

文章目录 前言1. 网页分析入门1.1 基本原理1.2 Scrapy 原理 2. 创建项目2.1 创建Scrapy项目2.2.1 创建Scrapy项目2.2.2 创建Spider2.2.3 执行Demo 2.2 引入FastAPI 2. 获取Cookie3. 数据建模3.1 Scrapy 数据建模3.2 SQLAlchemy 创建实体类 3. 分析网页3.1 xpath 分析3.2 css 分…

Kotlin协程CoroutineScope命名空间CoroutineName,Kotlin

Kotlin协程CoroutineScope命名空间CoroutineName&#xff0c;Kotlin import kotlinx.coroutines.*fun main(args: Array<String>) {val myName CoroutineName("fly")runBlocking {CoroutineScope(Dispatchers.IO).launch {repeat(3) {val name coroutineCont…

厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件开发之功能结构篇

厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件开发之功能结构篇 好几年前&#xff0c;应朋友之邀&#xff0c;为其工厂的厨余垃圾处理设备研发一套用于对现场的生产及维护进行远程查看、管理和质量监控的厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件系统。 因为…

9.串口通信

串口基本认识 串行接口简称串口&#xff0c;也称串行通信接口或串行通讯接口&#xff08;通常指COM接口&#xff09;&#xff0c;是采用串行通信方 式的扩展接口。串行接口&#xff08;Serial Interface&#xff09;是指数据一位一位地顺序传送。其特点是通信线路简 单&#x…

搭建 canal 监控mysql数据到RabbitMQ

项目需求&#xff1a; 使用canal监控mysql某个库某个表&#xff0c;或者多个库&#xff0c;多个表---- update/inster/create 操作&#xff0c; 系统版本mysql版本java版本canal版本rabbitMQ版本Rocky 9.2MySQL 8.0.26openjdk 11.0.221.1.6rabbitmq-server 3.12.4 mysql 配置…

C++(7): std::list的使用

std::list 容器介绍及用法 1. std::list std::list是 C 标准模板库&#xff08;STL&#xff09;中的一个顺序容器适配器&#xff0c;它提供了双向链表的数据结构。与 std::vector 不同&#xff0c;std::list 不存储连续的元素&#xff0c;因此它可以高效地在中间插入和删除元…

Rust 实战练习 - 4. 网络 TCP/UDP/Channel

目标&#xff1a; tcp 服务器和客户端udp服务器和客户端多线程实现服务器&#xff0c;异步并发channel tcp server & client use std::{prelude::*, net, thread, env}; use std::io::{Read, Write};fn main() {let args env::args().into_iter().collect::<Vec<…

淘宝扭蛋机小程序开发:开启线上扭蛋新体验

随着科技的飞速发展和移动互联网的普及&#xff0c;线上娱乐方式也变得越来越多样化。为了满足广大用户对于新鲜、有趣的娱乐体验的需求&#xff0c;我们决定开发一款淘宝扭蛋机小程序&#xff0c;为用户带来全新的线上扭蛋乐趣。 淘宝扭蛋机小程序将结合淘宝平台的优势资源&a…

flask_restful渲染模版

渲染模版就是在 Flask_RESTful 的类视图中要返回 html 片段代码&#xff0c;或 者是整个html 文件代码。 如何需要浏览器渲染模板内容应该使用 api.representation 这个装饰器来定 义一个函数&#xff0c; 在这个函数中&#xff0c;应该对 html 代码进行一个封装&#xff…

LeetCode-88

题目&#xff1a; 88. 合并两个有序数组 思路&#xff1a; 最开始想到的就是使用一个中间数组来存放合并后的数据&#xff0c;对两个数组使用双指针进行遍历&#xff0c;将两个数组中较小的放入中间数据。 看了题解&#xff0c;发现可以逆序进行遍历&#xff0c;因为nums1中后…

基于nginx 动态 URL反向代理的实现

背景&#xff1a; 我们在项目中在这样一个场景&#xff0c;用户需要使用固定的软件资源&#xff0c;这些资源是以服务器或者以容器形式存在的。 资源以webAPI方式在内网向外提供接口&#xff0c;资源分类多种类型&#xff0c;每种类型的资源程序和Wapi参数都一样。这些资源部属…

setitimer实现每隔一秒打印输出一次

setitimer是一种定时器&#xff0c;可以通过C语言中的系统调用函数setitimer()来实现。 struct itimerval { struct timerval it_interval; // 闹钟触发周期 struct timerval it_value; // 闹钟触发时间 }; struct timeval { long tv_sec; // 秒 lo…

学习SpringBoot笔记--知识点(1)

目录 SpringBoot介绍 创建一个最基础的springbooot项目 使用Spring Initializr创建springboot项目 Spring Boot 自动配置机制 SpringBoot常用注解 1.组件注册 2.条件注解 3.属性绑定 SpringBoot自动配置流程​编辑 学习SpringBoot的方法 ​编辑 SpringBoot日志配置…

2015年认证杯SPSSPRO杯数学建模A题(第一阶段)绳结全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 A题 绳结 原题再现&#xff1a; 给绳索打结是人们在日常生活中常用的技能。对登山、航海、垂钓、野外生存等专门用途&#xff0c;结绳更是必不可少的技能之一。针对不同用途&#xff0c;有多种绳结的编制方法。最简单的绳结&#xff0c;有时称…

PyCharm环境下Git与Gitee联动:本地与远程仓库操作实战及常见问题解决方案

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言下载及安装GitGit的使用设置用户签名设置用户安全目录Git基本操作Git实操操作 Pyc…

牛可编程题

提示&#xff1a;文章 文章目录 前言一、背景二、 2.1 2.2 总结 前言 前期疑问&#xff1a; 本文目标&#xff1a; 一、背景 最近 二、 2.1 坐标移动 https://www.nowcoder.com/practice/119bcca3befb405fbe58abe9c532eb29?tpId37&tqId21240&rp1&ru/exam/…

SpringBoot+Vue前后端分离项目在Linux系统中基于Docker打包发布,并上传镜像到阿里镜像私仓

文章目录 SpringBootVue前后端分离项目在Linux系统中基于Docker打包发布&#xff0c;并上传镜像到阿里镜像私仓一、Java项目基于Docker打包发布1.打包应用&#xff0c;将打好的jar包放到我们的linux系统中2.新建dockerfile3.打包镜像4.测试运行5.上传镜像到阿里云免费私仓 二、…

Webpack生成企业站静态页面 - 项目搭建

现在Web前端流行的三大框架有Angular、React、Vue&#xff0c;很多项目经过这几年的洗礼&#xff0c;已经都 转型使用这三大框架进行开发&#xff0c;那为什么还要写纯静态页面呢&#xff1f;比如Vue中除了SPA单页面开发&#xff0c;也可以使用nuxt.js实现SSR服务端渲染&#x…