picpic

一个图床应用，好看且好用，基于 github pages 和 github actions.

## 文档 [EN](https://github.com/MatrixAges/picpic) | [中文文档](https://github.com/MatrixAges/picpic/blob/master/readme_cn.md) ## 安装通过 npm 安装: ```bash $ npm i @matrixage/picpic ``` ## 使用方式通过如下步骤即可使用 picpic 创建你的个人图床: - 创建一个文件夹，然后进入它，并打开终端 - 执行 `npm init` 一路 enter 下去 - 执行 `npm i @matrixage/picpic` - 打开 package.json，把`"init": "picpic init"` 加入到 `scripts`字段中 - 执行`npm run init` - 然后把你的图片移动到 `assets` 文件夹中 - 执行`git commit` & `git push` 推送你的代码到 github github actions 检测到项目中 .github 文件夹下的部署脚本之后，将会启动自动化构建把你的图片打包编译到 gh-pages 分支上去。然后激活你的 gh-pages，在 github 项目的页面中的 tab 的最后一项 settings 中找到. 如果你没有使用过 github actions ，你需要激活你的 github actions 功能，然后才能通过部署脚本触发自动构建流程. 如果你发现生成的图片链接可以访问，但是放在 github 的 readme.md 中无法显示，那最有可能是 `githubusercontent.com` 被本地服务商 DNS 污染，解决方案是加入如下 DNS 解析到你的 hosts 文件中： ``` 199.232.96.133 raw.githubusercontent.com 199.232.96.133 camo.githubusercontent.com ``` 如果你发现访问 github 很慢，那是因为本地服务商在进行 DNS 网络过滤，加入如下 host 跳过服务商网络过滤： ``` 140.82.112.3 github.com ``` 如果你的仓库的主分支是 master 而不是 main，请自行修改构建脚本依赖分支为 master，在.github/workflows/ci.yml 中。 ## Tricks - 点击图片可以查看更多细节 - 点击右上角的文件夹图标可以进入文件夹模式 - 在移动端同样是可以使用的更多功能请自行探索: - 列表模式 - 搜索 - 导航 - 小型的文件系统如果你有自己的需求，而且你认为你的需求合理的话，可以通过 issue 或者 discussion 提给我，如果确实有价值，我会实现，当然，你也可以自行实现。 ## 配置文件 ```json { // 支持的图片格式 "types": ["svg", "png", "jpg", "jpeg", "gif", "webp"], // 开启图片压缩，当compress : false时，关闭压缩 // 仅支持对jpg、png、gif进行压缩 "compress": { // 图片质量 0.1 - 1 "quality": 0.8, // 如果设定为true，webp，jpg、png将使用imagemin的webp插件进行压缩 "webp": false }, // 文件夹读取深度 "depth": 12 } ``` ## Accessibility Picpic 支持所有现代浏览器，建议使用 chrome 或是 firefox 进行访问。 ## License Picpic 使用的是开放的 MIT 协议。 (http://opensource.org/licenses/MIT)