搜索到
50
篇与
码海
的结果
-
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)
-
OpenID Connect(OIDC) WordPress v1.0.0插件 Typecho的OIDC插件更新完了，咱们来说说WordPress插件。插件特点支持 PHP 7.0+ 、WordPress 5.8+、基于邮箱进行自动绑定、支持新建用户。安装方法1：手动安装下载插件文件将插件文件夹上传到 /wp-content/plugins/ 目录在WordPress管理后台激活插件进入"设置" > "OIDC设置"进行配置2：通过WordPress上传在WordPress管理后台进入"插件" > "安装插件"点击"上传插件"选择插件ZIP文件并上传激活插件并进行配置基本配置客户端ID: 从OIDC提供商获取的客户端标识符客户端密钥: 从OIDC提供商获取的客户端密钥发现URL: OIDC提供商的发现文档URL重定向URI: OIDC提供商回调的URI地址作用域: 请求的OIDC作用域（默认：openid profile email）高级配置启用OIDC登录: 在登录页面显示OIDC登录按钮自动创建用户: 如果用户不存在，自动创建WordPress用户账户自动链接用户: 自动链接OIDC用户与现有WordPress用户（基于邮箱）支持的OIDC提供商Google OAuth 2.0Microsoft Azure ADAuth0Keycloak其他符合OIDC标准的提供商使用说明可详细参考插件内的README.md下载地址下载地址
-
OpenID Connect(OIDC) Typecho v1.2.0插件 最近一直在研究“统一认证”，了解到了OIDC ，即OpenID Connect。OpenID Connect 是基于OAuth 2.0的身份认证协议，增加了Id Token。OIDC是OAuth2.0的超集，可以理解为OIDC=身份认证+OAuth2.0. OAuth2.0主要定义了资源的授权，而OIDC主要关注的是身份的认证。（身份信息也属于资源，但是OAuth2.0中没有对身份信息包含哪些内容以及认证过程做完整定义）刚好我自己搭建了一套TOPIAM认证平台，顺手把之前写的OAuth2登录认证插件做个升级，还写了一个WordPress的OIDC插件，有需的朋友可以下载使用。插件效果插件使用下载地址选择Typecho插件的zip包，解压后将插件上传/usr/plugins这个目录下，然后登陆后台，在“控制台”下拉菜单中进入“插件管理”，激活OidcTypecho插件。激活后，需要配置 OIDC发现文档URL、OIDC系统名称、Client ID、Client Secret、用户名映射规则因为我这个系统只有单用户，所以做了一个用户名映射规则，具体可以看插件设置中的说明。OIDC系统回调地址为：https://your-site/oidc/callback登录页添加按钮在需要的地方添加以下代码即可，建议放在登录页。<? php $plugin = Helper: : options() - > plugin('OidcTypecho'); if ($plugin) { $loginLink = OidcTypecho_Plugin: : renderLoginButton(); echo $loginLink; } ?>下载地址下载地址
-
-
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)，即可登录成功。只要思想不滑坡，方法总比困难多。
-
PostgreSQL:Unsupported binary encoding of timestamp. 报错信息服务启动后的前几次查询没有问题，多次查询后报这个错。org.postgresql.util.PSQLException:Unsupported binary encoding of timestamp.报错原因PostgreSql默认使用二进制进行数据的传输，导致的jdbc解析失败。解决方案数据库连接信息中配置不使用二进制传输 binaryTransfer=falsejdbc:postgresql://localhost:5432/test?binaryTransfer=false
-
代码实现：微博图片转存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文件，将微博图片的后缀存起来，然后把上面代码改造一下就可以实现。
-
