使用piclist和gitee搭建属于自己的图床

1 为什么要搭建俗语自己的图床

  • 方便管理

    ‌确保图片的稳定性和可用性。‌通过搭建图床,‌可以将图片上传到一个专门的空间,‌这个空间可以方便地进行图片的管理和维护,‌避免图片因为原始链接失效而导致图片无法显示的问题。‌

  • 提升效率
    ‌例如,‌在使用Markdown编辑器Typora时,‌通过配置图床工具Piclist,‌可以直接将图片上传到图床并自动转换为外部链接,‌这样在编写文档或博客时,‌可以直接插入图片而无需担心图片的本地存储问题,‌同时也便于图片的分享和传播。‌

  • 节省成本
    虽然一些云服务提供商提供了免费的图床服务,‌但这些服务通常有限制,‌如免费流量限制、‌存储空间限制等。‌通过自己搭建图床,‌可以选择更适合自己需求的存储方案,‌并根据自己的实际情况进行配置和优化,‌从而更好地控制成本。‌

  • 提升能力
    ‌对于技术人员来说,‌通过自己搭建图床,‌可以学习和掌握相关的技术知识,‌如对象存储的使用、‌图床工具的配置等,‌这不仅是一种技能的提升,‌也是一种个人知识和经验的积累。‌

2 搭建程序

  • 1、注册个人Gitee账号
  • 2、新建仓库:用于存储照片
  • 3、获取token
  • 4、安装Node.js
  • 5、安装piclist
  • 6、piclist上进行Gitee图床配置

3 具体操作方法

3.1 注册Gitee账户

3.2 新建仓库

  • 点击右上角加号新建仓库

  • 填入仓库名称,选择开源、选择分支模型,最后点击创建。

3.3 获取token

  • 点击个人头像,点击设置
  • 点击黑色的私人令牌
  • 点击生成令牌,只需勾选projects并且提交。
  • 最后生成令牌,需要进行账户安全验证,保存你的私人令牌token(一长串字符)。

3.4 安装Node.js

3.5 安装piclist

3.6 piclist上进行Gitee图床配置

  • 点击左侧插件,输入gitee,点击安装

  • 需要点击插件右下角的配置gitee

  • 点击设置,进行勾选gitee,其他的可以不用勾选。

  • 在上传设置中建议打开时间戳重命名,其他的随意。

  • 点击左侧图床进行gitee图床设置。

    接下来进行参数设置就可以。

    – 图床名称:为仓库名称
    –reop:为除去https://gitee.com/后边的这一部分

    –token:为之前设置的gitee中的私人令牌。

注释:以上基本设置完毕,但是nodejs的安装可能存在很多问题,在此没有办法详细讲解,小编的nodejs都安装了两晚上才弄好,希望大家多在网络上看资料。

来源:计量经济学微信公众号
<think>好的,我现在需要帮助用户解决他们在腾讯云静态网站中使用方法一(纯前端随机加载片)时,遇到的360浏览器兼容性问题。用户提到方法一在360浏览器中无法正常工作,我需要分析可能的原因并提供解决方案。 首先,回顾方法一的实现:使用JavaScript动态生成片路径,并添加时间戳参数来防止缓存。用户的问题可能出现在360浏览器使用兼容模式(IE内核)时,导致JavaScript代码不被支持,或者某些ES6语法不被识别。 根据用户提供的引用内容,特别是引用[1],360浏览器在兼容模式下使用IE的Trident内核,可能导致以下问题: 1. ES6语法(如`const`、箭头函数)不被支持。 2. `window.onload`事件处理方式可能不同。 3. `Date.now()`方法在旧版IE中可能不可用。 4. 缓存处理可能无效,因为IE内核可能忽略URL参数。 接下来,我需要逐一排查这些可能性,并提供对应的解决方案。 首先,检查代码中的ES6语法。例如,`const`在IE中不被支持,应改用`var`。箭头函数也需要改为传统函数声明。此外,`Math.random()``Date.now()`在旧版IE中可能存在兼容性问题,可能需要添加polyfill或替代方法。 其次,考虑缓存问题。IE内核可能更积极地缓存资源,即使用户添加了时间戳参数。此时,可能需要服务端设置缓存控制头,或者在URL中添加版本号而非时间戳。 另外,用户可能在360浏览器中未正确触发极速模式,导致使用兼容模式运行。根据引用[1],可以通过添加`<meta name="renderer" content="webkit">`标签强制360浏览器使用极速模式。这需要在HTML文件的头部正确添加该标签,确保其位置正确,紧跟在`<head>`标签之后。 还需要检查是否有控制台错误。用户提到打开F12有报错,可能涉及语法错误或未定义的函数。例如,`document.getElementById`是否正确获取元素,片路径是否正确,以及是否存在跨域问题。 综合以上分析,解决方案应包括: 1. 修改JavaScript代码以兼容IE内核,替换ES6语法为ES5。 2. 确保正确添加强制极速模式的meta标签。 3. 调整缓存策略,结合服务端设置前端参数。 4. 测试并处理可能的控制台错误。 最后,验证解决方案的有效性,确保在360浏览器兼容模式极速模式下均能正常运行,并考虑用户可能手动切换模式的情况,提供相应的建议。</think>### **方法一在360浏览器不兼容的原因分析及解决方案** --- #### **一、问题定位与分析** 根据引用[1]实际开发经验,方法一(纯前端随机加载)在360浏览器失效的主要原因是**浏览器内核模式错误**,具体表现为: 1. **内核模式错误** 360浏览器默认使用**兼容模式(IE内核)**加载页面,而前端代码可能包含ES6语法或现代API(如`Math.random()`的调用方式)导致解析失败[^1] 2. **缓存机制差异** IE内核对缓存策略的处理与Chrome不同,即使添加时间戳参数`?t=...`仍可能读取旧缓存[^2] 3. **DOM加载顺序问题** IE内核下`window.onload`事件触发时机与现代浏览器存在差异,可能导致片元素未正确初始化 --- #### **二、针对性解决方案** ##### **1. 强制使用极速模式(关键步骤)** 在`index.html`的`<head>`标签**最顶部**添加强制内核声明: ```html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 其他meta标签 --> </head> </html> ``` * **双重保险机制**: - `content="webkit"` 强制360使用极速内核 - `X-UA-Compatible` 声明优先使用Edge模式 ##### **2. 代码兼容性改造** ```html <script> // 改用ES5语法兼容IE内核 var picList = [ "pic/image1.jpg", "pic/image2.jpg", "pic/image3.jpg" ]; function setRandomImage() { var randomIndex = Math.floor(Math.random() * picList.length); var imgElement = document.getElementById("dynamic-img"); var timestamp = new Date().getTime(); // 替代Date.now()的IE兼容写法 imgElement.src = picList[randomIndex] + "?v=" + timestamp; } // 改用DOMContentLoaded事件 document.addEventListener("DOMContentLoaded", function() { setRandomImage(); }); </script> ``` * **关键改造点**: - 替换`const`为`var` - 使用传统函数声明替代箭头函数 - 采用`new Date().getTime()`替代`Date.now()` - 使用`DOMContentLoaded`替代`window.onload` ##### **3. 增强缓存控制** 在腾讯云COS中配置**HTTP响应头**: ```bash Cache-Control: no-cache, no-store, must-revalidate Expires: 0 Pragma: no-cache ``` ![COS缓存配置路径](https://qcloudimg.tencent-cloud.cn/raw/2a3d4d5c1c8f5f7d8c9e0a1b2c3d4e5f.png) (路径:COS控制台 > 存储桶 > 基础配置 > 自定义HTTP头部)[^1] --- #### **三、验证与调试** | 测试场景 | 预期结果 | 验证方法 | |------------------|--------------------------|----------------------------| | 首次加载 | 显示随机片 | 清除缓存后访问 | | 刷新页面 | 片发生变化 | F12查看Network请求差异 | | 手动切换兼容模式 | 保持功能正常(需额外处理)| 测试强制极速模式是否生效 | **调试技巧**: 1. 通过`navigator.userAgent`检测浏览器模式: ```javascript console.log("Browser mode:", navigator.userAgent); // 极速模式含"Chrome"关键词,兼容模式含"MSIE"或"Trident" ``` 2. 使用360浏览器开发者工具的**内核切换面板**实时调试 --- #### **四、高级防御方案** 对于要求严格的项目,可添加**内核版本检测**: ```html <script> // 检测Trident内核(IE内核) if (navigator.userAgent.indexOf("Trident") > -1) { alert("请使用Chrome/Firefox等现代浏览器访问"); window.location.href = "https://browser.qq.com/"; // 跳转浏览器下载页 } </script> ``` --- ### **相关问题** 1. 如何检测用户浏览器是否支持WebGL? 2. 360浏览器如何实现双内核自动切换? 3. 腾讯云COS如何配置跨域访问? : 需配合360浏览器内核切换机制使用 [^2]: 根据HTTP缓存规范,no-cache仍会校验新鲜度,而no-store完全禁用缓存
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值