Joe主题统计页面增加年度/月度统计数据 最近博客圈里年度报告的风愈刮愈烈，我原本想借着这股热度，用 AI 快速制作一个展示年度数据的静态页面。但实际用起来才发现问题：页面数据完全固定，哪怕只是小幅更新，都得手动调整数值，实在费时又麻烦。后来留意到 Joe 主题的统计页面本就会展示一些基础数据，便萌生了在这个页面上新增年度 / 月度统计模块的想法 —— 这样数据能动态同步，就不用再手动维护了。不过在落地过程中，几经调整才找到合适的呈现方式：初版采用用 ECharts 把浏览量、文章数、评论数三类核心数据做成三个独立图表，结果页面被拉得过长，视觉观感大打折扣；第二版尝试将三类数据整合到同一个图表中，可浏览量的数值量级远高于文章数和评论数，后两者的变化趋势几乎完全被掩盖，根本看不清晰；第三版又调整思路，把浏览量单独拆分展示，将文章数和评论数合并在一个图表里，但整体呈现效果依旧不尽如人意；最终敲定了 “双 Y 轴 + 混合图表” 的方案，既解决了不同数据量级的展示问题，又让页面布局更紧凑美观，数据对比也更直观。实现过程隐藏内容，请前往内页查看详情最终效果如下：站点归档

在 CNB 云开发中部署 Ollama：零门槛体验 AI 大模型，极速启动指南 背景介绍CODING 标准版已于 2025 年 9 月 1 日正式下线，全新升级的云原生构建（CNB）平台同步上线。该平台整合 "云原生构建"、"云原生开发"、"代码托管"、"制品库"、"AI 助手"、"任务集" 六大核心功能，专注为开发者提供全链路 DevOps 解决方案。其云开发环境配备 H20、L40 等高性能 GPU，在保持环境心跳的情况下，最长可稳定运行 18 小时。更重要的是，运行中的程序可通过 CNB 自动映射为公网地址，极大简化测试流程 —— 这为 AI 大模型的本地试用提供了理想环境。部署 Ollama 完整步骤1.准备仓库Fork Ollama 仓库到个人 CNB 组织，点击 "云原生开发" 进入部署流程2.启动开发环境等待云开发环境初始化完成后，点击 "WebIDE" 进入云开发桌面3.选择模型进入 CNB 的ai-models组织下的Ollama子组织，挑选所需的 AI 大模型4.拉取模型（内网加速）在云开发桌面的终端中执行git clone拉取选定模型（CNB 内网环境下，拉取过程通常不到 1 分钟）5.配置模型路径克隆完成后，通过mv命令将模型文件移动到当前项目的models目录下6.配置端口映射点击云开发界面的 "PORTS" 选项，添加 Ollama 默认端口11434，系统会自动生成对应的公网访问域名7.验证部署结果访问生成的公网域名并拼接路径/v1/models，即可查看当前运行的模型列表8.模型调用方式支持通过第三方工具对接 Ollama API 调用模型可直接在终端中运行测试，实时查看模型响应效果{dotted startColor="#ff6c6c" endColor="#1989fa"/}零门槛玩转 AI 大模型，高效 DevOps 工具一站 get！更多惊喜，尽在 CNB.COOL 等你解锁！

腾讯云EdgeOne Pages/KV/Functions实战笔记 最近腾讯云Edgeone内测挺火，文档也逐步完善，刚好做个开发笔记；PagesPages是一个全栈开发部署平台，提供从前端页面到动态 API 的无服务器部署体验。我们先新建一个Vue+Vite项目，执行 npm create vite@latest tencent-edgeone-pages-kv-demo -- --template vue 命令。也可以拉我刚建的工程 CNB Githubgit clone https://cnb.cool/bcrjl/tencent-edgeone-pages-kv-demo npm install -g pnpm pnpm install我们需要全局安装 EdgeOne CLInpm install -g edgeone通过 edgeone -v命令，可以查看是否安装成功。通过edgeone -h命令，可以查看相关的所有命令。安装完成后，执行 edgeone login 登录命令，选择 China 国内站，然后在弹出的浏览器窗口完成登录。完成后，可以执行 edgeone pages dev 进入本地开发阶段。该命令会优先读取 edgeone.json 中的 devCommand 参数来启动 dev 服务，若没有该配置则会读取 package.json 的 dev 命令进行启动。切记请勿在 edgeone.json 或 package.json 中配置 edgeone pages dev！Edge Functions 调试服务有启动次数限制，因此尽量避免频繁退出启动 dev 服务（dev 服务内热更新不会增加启动次数）。执行命令默认会在本地 8088 端口起一个服务，Pages 函数的服务和 Pages 项目的服务都运行在同一个端口上，无需额外代理。访问 http://localhost:8088/ 即可查看效果。本地执行命令可以直接部署。edgeone pages deploy [<directoryOrZip>] [-n <projectName>] [-e <env>]参数说明: 需要部署的文件夹或 ZIP 包路径-n, --name: 需要部署的项目名称，项目不存在则自动创建新项目-e, --env: 部署目标环境，可选值: production 或 preview（默认 production）执行 deploy 时，CLI 会自动构建并部署项目；若手动构建，则需将 Pages Functions 相关文件夹及 package.json 放入输出目录（如 dist），再执行 edgeone pages deploy ./dist本地部署执行下列命令，部署的项目名为 tencent-edgeone-pages-kv-demoedgeone pages deploy . -n tencent-edgeone-pages-kv-demoKV存储和Pages Functions使用KV存储，我们需要在控制台申请。申请通过后，我们需要新建一个命名空间。创建成功后，点击进入。选择关联项目 -> 新建一个变量名，并绑定 样例工程(tencent-edgeone-pages-kv-demo)。同样也可以Pages控制台，点击项目，设置KV存储，选择绑定项目。绑定成功后，我们需在代码中执行 edgeone pages link 关联项目。> edgeone pages link √ Input your EdgeOne Pages project name ... tencent-edgeone-pages-kv-demo [cli][✔] Project tencent-edgeone-pages-kv-demo linked successfully.PS：此处有一个坑，关联项目后，会在当前项目生成 .edgeone 目录，我们在提交代码到Git的时候，不要把这个文件夹提交。云开发部署的时候会出现异常。关联成功后，我们再次执行 edgeone pages init 用于初始化 Pages Functions 和 Edgeone Pages 需要的基础环境。> edgeone pages init √ Do you want to create an Edge Function example? ... yes [cli][✔] Edge Function example created! √ Do you want to create a Node Function example? ... yes [cli][✔] Node Function example created! [cli][✔] .gitignore already contains Tencent Cloud EdgeOne configuration, do nothing! [cli][✔] Project init success!此时项目中会多出两个文件夹 edge-functions 和 node-functions ，执行 edgeone pages init 过程中会有两个提示，可以看上述命令记录。建议都创建，不影响使用。下面我们再次允许项目，执行 edgeone pages dev 后；访问 http://localhost:8088/helloworld-cloud 和 http://localhost:8088/helloworld-edge 可以看到下列效果，说明程序正常运行。现在我们来实现KV存储的使用，我们在项目 edge-functions 下新建一个 kv 目录，用于区分调用方。新建一个page-view.js 文件。填写以下代码内容，用于计算页面被访问了几次。export async function onRequestGet({ request, params, env }) { // 读取 Key-Value 数据 const visitCount = await siteConfig.get('visitCount'); let visitCountInt = Number(visitCount); visitCountInt += 1; // 写入 Key-Value 数据 await siteConfig.put('visitCount', String(visitCountInt)); const res = JSON.stringify({ visitCount: visitCountInt, }); return new Response(res, { headers: { 'content-type': 'application/json; charset=UTF-8', 'Access-Control-Allow-Origin': '*', }, }); }上述代码中，siteConfig 是我们之前绑定时新建的变量名称。访问 http://localhost:8088/kv/page-view 查看效果。现在我们改造首页，将这个访问量在首页显示。将下列代码替换到 src\views\Home.vue 中，原理就是调用Pages Functions生成的一个接口，调用它保存数据到KV存储中。<template> <div>欢迎访问 Tencent-Edgeone-Pages-KV-Demo项目</div> <div>当前访问量：{{visitCount}}</div> </template> <script> import { get} from "@/utils/api"; export default { name: 'Home', data() { return{ visitCount: 0 } }, created() { this.getVisitCount(); }, methods: { async getVisitCount(){ await get('/kv/page-view') .then(res => { this.visitCount = res.visitCount; }) } } } </script>我们再次部署，一起来看看效果吧。源码分享CNB Githubmain分支：基础工程deploy分支：成品项目(含KV和Pages Functions)

Typecho(1.2.1)免密登录研究笔记 最近在研究 Spring Cloud 微服务 框架，便研究了一下它的OAuth2认证模式，想着在Typecho中也对接下，后面就不用再次输入账号密码了，很是方便。其中技术难点，是 Typecho 的免密登录方式，看到官方文档说的是封装在了Widget_User组件中，开发人员可调用此组件免密登录。但是验证了好久，都无法登录成功，又研究了聚合登录的插件中的免密登录(见下方)方法，也不是很好使。//使用用户uid登录 private function useUidLogin($uid, $expire = 0) { $authCode = function_exists('openssl_random_pseudo_bytes') ? bin2hex(openssl_random_pseudo_bytes(16)) : sha1(Typecho_Common::randString(20)); $user = array('uid'=>$uid,'authCode'=>$authCode); Typecho_Cookie::set('__typecho_uid', $uid, $expire); Typecho_Cookie::set('__typecho_authCode', Typecho_Common::hash($authCode), $expire); //更新最后登录时间以及验证码 $this->db->query($this->db ->update('table.users') ->expression('logged', 'activated') ->rows(array('authCode' => $authCode)) ->where('uid = ?', $uid)); }这个是根据用户的 uid 进行免密登录,但是调用 $this->user->hasLogin() 来判断用户是否登录，一直是 false；查了查资料，看到了一篇《Typecho不改核心代码实现自定义登录、注册功能》文档，然后给了一个思路，研究一下1.2.1版本用户那块的代码；在/var/Widget/User.php中，用户登录跟聚合登录的方式一样，但是就是不好使，再向下有一个方法，叫 simpleLogin; 注解也写的很好“只需要提供uid或者完整user数组即可登录的方法, 多用于插件等特殊场合”，直接调用 $this->user->simpleLogin($uid)，即可登录成功。只要思想不滑坡，方法总比困难多。

代码实现：微博图片转存AList 最近想把之前我存在微博的图片转入 AList 中，发现有点问题，原因是微博开启防盗链，无法直接在浏览器中打开或直接拿到文件流，这就造成 AList 无法通过离线下载。原因分析微博图床开启防盗链，所以需要在请求头中携带 Referer ，这样才能获取到流数据。AList 也提供了三方接口，可以自己调用上传文件。详见：AList API文档代码实现上面的常量配置自己的 Alist 信息就可以了，主要是 域名、账号、密码以及上传路径package com.yanqingshan.blog; import cn.hutool.http.ContentType; import cn.hutool.http.Header; import cn.hutool.http.HttpRequest; import cn.hutool.http.HttpResponse; import cn.hutool.json.JSONUtil; import java.util.HashMap; import java.util.Map; /** * 微博上传Alist简单测试 * * @author yanqs * @since 2024-07-31 */ public class WeiBoImgDemo { /** * USER_AGENT */ private static final String USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"; /** * Alist 域名 */ private static final String BASE_URL = ""; /** * Alist 账号 */ private static final String USER_NAME = ""; /** * Alist 密码 */ private static final String PASSWORD = ""; /** * Alist 上传路径 */ private static final String UPLOAD_Path = ""; public static void main(String[] args) { String url = "https://tvax3.sinaimg.cn/large/a5286dc9ly1hs78a2y4scj22xs4eonpf.jpg"; int lastSlashIndex = url.lastIndexOf('/'); // 如果找到了斜杠，就从斜杠后面截取字符串 String fileName = url.substring(lastSlashIndex + 1); System.out.println("File Name: " + fileName); HttpRequest request = HttpRequest.get(url) .header(Header.REFERER, "https://weibo.com/")//头信息，多个头信息多次调用此方法即可 .header(Header.USER_AGENT, USER_AGENT) .timeout(20000); HttpResponse httpResponse = request.executeAsync(); // 获取到文件流 上传到Alist byte[] bytes = httpResponse.bodyBytes(); String result = HttpRequest.put(BASE_URL + "/api/fs/put") .header(Header.AUTHORIZATION, getToken()) .header(Header.CONTENT_TYPE, ContentType.MULTIPART.getValue()) .header("File-Path", UPLOAD_Path + fileName) .body(bytes) .execute().body(); System.out.println(result); } /** * 获取Alist Token * * @return */ public static String getToken() { Map<String, String> params = new HashMap<>(); params.put("username", USER_NAME); params.put("password", PASSWORD); String body = HttpRequest.post(BASE_URL + "/api/auth/login") .header(Header.CONTENT_TYPE, ContentType.JSON.getValue()) .body(JSONUtil.toJsonStr(params)) .execute().body(); return JSONUtil.parseObj(body).getJSONObject("data").getStr("token"); } }注：其中微博图片的链接有多种可选large -> 原始图片oslarge ->无水印 mw690 -> 最大 690 像素宽度裁剪thumbnail -> 缩略图small -> 小图square -> 80 像素正方形裁剪thumb150 -> 150 像素正方形裁剪thumb180 -> 180 像素正方形裁剪thumb300 -> 300 像素正方形裁剪orj180 -> 180 像素宽度原比例缩放orj360 -> 360 像素宽度原比例缩放运行结果运行效果如下后续可以自己建一个txt文件，将微博图片的后缀存起来，然后把上面代码改造一下就可以实现。

VuePress 配置51LA/统计鸟统计代码 自从 语雀 付费和异常后，我也急需一款 Wiki知识手册 ，考虑了Hexo、GitBook、Docsify 等，感觉都各自有优缺点，最后选择了VuePress 2.0.0 搭建属于自己的私有化 Wiki知识手册 。使用过程中都还比较顺利，但是突然间发现跟其他 Vue 项目有点不太一样，少了一个 index.html ，这样不能在全局文件中引用/配置统计代码，刚好晚上在写知识手册的时候，看了一眼官方的说明文档，然后分享了一下统计代码，终于配置出来了。在全局 config.js 配置文件 head 参数中添加，就最终渲染出的 HTML 的 <head> 标签内加入的额外标签。但是之前一直添加不成功，后来分析了一下参数，这里以51LA为例。图上标注的红色就相当于红和绿就相当于第二个参数 { attrName: attrValue } ,而黄色就相当于最后一个参数 innerHTML? 那这样分析后，我们就可以这样写。head: [ ['script',{type:'text/javascript',src:'https://api.tongjiniao.com/c?_=***',async:''}], ['script',{charset:'UTF-8',id:'LA_COLLECT',src:'https://sdk.51.la/js-sdk-pro.min.js'}], ['script',{},'LA.init({id:"*****",ck:"*****",autoTrack:true,hashMode:true})'], ['script',{src: 'https://sdk.51.la/perf/js-sdk-perf.min.js',crossorigin:'anonymous'}], ['script',{},'new LingQue.Monitor().init({id:"******",sendSuspicious:true,sendSpaPv:true});'] ]第一个数组是统计鸟的，第二三数组是51LA的，第三四数组是51LA灵雀应用监控平台的。（注：其中官方的参数均使用**代替）至此，统计代码就安装完成了，如果要在 head 中引用其他脚本，也可以参考这样的写法。

使用VuePress搭建Wiki静态网站 最近使用 语雀 做了一个知识手册，改版后只能会员才能分享，想着数据托管到第三方，还不如自建。参考了其他静态网站生成，最后决定使用 VuePress 来搭建。环境要求Node.js v16.19.0+搭建框架步骤 1: 创建并进入一个新目录mkdir wiki-book cd wiki-book步骤 2: 初始化项目npm init步骤 3: 将 VuePress 安装为本地依赖npm install -D vuepress@next步骤 4: 在 package.json 中添加一些 scripts{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中echo 'node_modules' >> .gitignore echo '.temp' >> .gitignore echo '.cache' >> .gitignore步骤 6: 创建你的第一篇文档mkdir docs echo '# Hello VuePress' > docs/README.md步骤 7: 在本地启动服务器来开发你的文档网站npm run docs:devVuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。进阶配置启动上面项目后，会在docs 下会生成一个.vuepress 目录，我们在这个目录下创建一个config.js 文件。这个是 VuePress 站点的基本配置文件，在这个里面我们可以配置站点基础信息、插件、主题等。具体可以参考官方文档：配置信息这里我把常用的配置分享一下：import { defineUserConfig } from 'vuepress' //引入默认主题 import { defaultTheme } from '@vuepress/theme-default' export default defineUserConfig({ // 开发服务器的端口号 port: 8080, // 启动后打开浏览器 open: false, // 设置站点根路径 base: '/', // 站点的语言 lang: 'zh-CN', // 站点的标题 title: '知识手册', // 站点的描述 description: '站点的描述', // 默认主题配置 theme: defaultTheme({ // 默认颜色模式 colorMode: 'auto', // 是否启用切换颜色模式的功能 colorModeSwitch: true, // logo Logo 图片的 URL。 //logo: '' // 导航栏配置 navbar:[ ], // 侧边栏配置 sidebar:[ ] }) })打包配置运行 npm run docs:build 生成后的文件在 docs\.vuepress\dist 中，将这个文件压缩丢在服务器中，就可以打开了。一般只要支持 html 的web服务器都是可以的。这里不做过多描述。样例代码{cloud title="样例代码" type="lz" url="https://xiaose.lanzoum.com/b02ewqy8h" password="h39g"/}

druid连接池实现数据库加密 无论是公司的项目还是个人的项目，我们都会选择将源码上传到 Git 服务器（GitHub、Gitee 或是自建服务器），但只要将源码提交到公网服务器就会存在源码泄漏的风险，而数据库配置信息作为源码的一部分，一旦出现源码泄漏，那么数据库中的所有数据都会公之于众，其产生的不良后果无法预期。于是为了避免这种问题的产生，我们至少要对数据库的密码进行加密操作，这样即使得到了源码，也不会造成数据的泄露。怎么实现加密？ 对于 Java 项目来说，要想快速实现数据库的加密，最简单可行的方案就是使用阿里巴巴提供的 Druid 来实现加密。交互流程执行命令这里我们以 1.2.18 版本为例，各位也可以选择其他版本，命令基本都是一样的。 java -cp [druid-1.2.18.jar仓库路径] [com.alibaba.druid.filter.config.ConfigTools] [密码]命令示例java -cp D:\druid\druid-1.2.18.jar com.alibaba.druid.filter.config.ConfigTools 123456 执行结果： privateKey:MIIBVgIBADANBgkqhkiG9w0BAQEFAASCAUAwggE8AgEAAkEAloMI1R+5QNFTDAUvZ5KCkq+qauA2IJbiYR0ghk9ssWm7lPooZEOipCa88W0rya/4oaOt6i0iVlS/EmtmMCTZ7QIDAQABAkEAjWMyXOKcJ+N7XANS8LyUpC8Yq6VLs3mJ1yiBcSoTNORpTxndFog/BXUXQP6yTkNHk+Nc5sxdGvl42y3mywiRAQIhAMhiyFRwWWdImzPR+fC8n6s3+B341jy3AWMrixXMAJydAiEAwEjAp9LTgS0fIoEtlz6KYbVnsionIIof1JKAbsJjKZECIQCuthHcLSiF+LP49nZpAsxjyCS4XSDNRvIauPhHRNqzsQIhAJuBux1+6cLMxSNYqZBp6ex/k2+Jm787Nebq3Ke22g+hAiBi9IOPYlm40BAp9jkr2Z2/yqV1E0ppfqigUbFNIpp79g== publicKey:MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAJaDCNUfuUDRUwwFL2eSgpKvqmrgNiCW4mEdIIZPbLFpu5T6KGRDoqQmvPFtK8mv+KGjreotIlZUvxJrZjAk2e0CAwEAAQ== password:YJHHitRl6unpzMi4dfxDOUH7R0kSB/32Wxu0D+xRA5ijmmaO8whHSlCAm3iQ9OqtJXwPU/NzcKmGx/QvhRxnHg==截图示例替换配置文件spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource druid: url: jdbc:mysql://localhost:3306/test?useSSL=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root #生成后的密文 password: YJHHitRl6unpzMi4dfxDOUH7R0kSB/32Wxu0D+xRA5ijmmaO8whHSlCAm3iQ9OqtJXwPU/NzcKmGx/QvhRxnHg== filters: config connect-properties: config.decrypt: true #生成的公钥 config.decrypt.key: MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAJaDCNUfuUDRUwwFL2eSgpKvqmrgNiCW4mEdIIZPbLFpu5T6KGRDoqQmvPFtK8mv+KGjreotIlZUvxJrZjAk2e0CAwEAAQ==

Joe 主题对接腾讯 LBS 展示 IP 属地(二) 书接上回，我们在主题中对接腾讯LBS IP查询服务后，会有一个bug：如果某篇文章评论过多，则某些评论IP定位数据无法显示，这个是因为腾讯LBS服务个人开发者的并发量限制为5次/秒。在上一个教程发布后，也有大佬发现了这个问题，不过这个问题我顺手就解决了，但是解决方案没有分享出来，因为需要改typecho系统的代码。这个已经脱离技术小白的范围，请合理折腾，折腾前记得备份数据。{anote icon="fa-internet-explorer" href="https://blog.yanqingshan.com/130.html" type="success" content="Joe 主题对接腾讯 LBS 展示 IP 属地"/}原理这一次折腾的原理是，我们在数据库中添加一个字段作为IP属地信息的一个冗余信息；当用户评论时，获取用户IP地址，调用腾讯LBS服务进行查询，将查询到的数据写入数据库中，这样就避免并发量超出限制。执行sql语句23.06.10：根据Typecho数据库设计文档又更新了一下sql语句ALTER TABLE `typecho_comments` ADD COLUMN `ipRegion` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT 'IP中文地址' AFTER `parent`, DROP PRIMARY KEY, ADD PRIMARY KEY (`coid`) USING BTREE;上面sql就是在字段coid后增加一个ipRegion的字段，并且添加一个备注信息。修改代码我们打开网站根目录，路径：/var/Widget/Base/Comments.php 这个文件是系统评论对外提供的方法，包括插入数据和查询数据等方法，有能力的同学，可以翻翻代码，基本上面都有注释；大概55行，也就是增加评论 的方法首行，增加以下代码，将key和sign_key修改为自己申请的就可以。$ipRegion = ''; $cip = empty($comment['ip']) ? $this->request->getIp() : $comment['ip']; $key = '配置自己申请的key'; //签名校验的KEY $sign_key = '配置自己申请的sign_key'; $sign = md5('/ws/location/v1/ip?ip='.$cip.'&key='.$key.$sign_key); $url = 'https://apis.map.qq.com/ws/location/v1/ip?ip='.$cip.'&key='.$key.'&sig='.$sign; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_AUTOREFERER, 1); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ch, CURLOPT_HTTPGET, true); curl_setopt($ch, CURLOPT_REFERER, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36'); $content = curl_exec($ch); curl_close($ch); if($content) { $json = json_decode($content,true); if($json['status'] == 0 ){ $resjson = $json['result']['ad_info']; if($resjson['nation'] == '中国'){ if($resjson['province']=='北京市'||$resjson['province']=='天津市'||$resjson['province']=='上海市'||$resjson['province']=='重庆市'){ $ipRegion = $resjson['city']; }else{ $ipRegion = $resjson['province'].$resjson['city']; } }else{ $ipRegion = $resjson['nation'].$resjson['province'].$resjson['city'].$resjson['district']; } } }上面代码增加完后，大概在108行，也就是构建插入结构 那行注释里面增加一个参数，把下面代码放在[]中，'ipRegion' => $ipRegion, 在381行后，插入下面，这个就是把查询对象增加一个输出值'table.comments.ipRegion'基本上请求和写入已经完成，我们再改一下后台管理界面，把这个ip属地也添加到页面上，这样后台也方便查询打开admin/manage-comments.php136行后增加以下代码<br /><span><?php $comments->ipRegion(); ?>最后我们再来修改主题的评论，这里以Joe主题为例文件路径joe/public/comment.php<?php $comments->ipRegion(); ?> 找到合适位置显示IP属地，我是放在112行的<div class="agent"> <?php $comments->ipRegion(); ?> <?php _getAgentOS($comments->agent); ?> · <?php _getAgentBrowser($comments->agent); ?> </div>最终效果如下

Vue集成OnlyOffice组件实现在线预览 最近有个项目需要预览上传的附件（如：PDF、Excel、Word 等），且效果要好，Vue 插件中也有对应的插件：表格使用 xlsx 、文档使用 docx-prrview 、pdf 则使用 iframe 内嵌网页实现，公司的 OA 也是这样实现的，但是效果极差，之前使用 zfile 搭建私有网盘发现了一个 OnlyOffice 组件，实属不错，刚好对接一下，实现了附件预览。