标签 建站在线工具 下的文章 - 🥝 E 家 分 享 🥝

fabritor：快速构建属于自己的图片设计编辑器 前言一直以来，我的博客文章的主题图片都是自己创建的：一般先从 Googole 图片通过输入关键字，搜索相关的图片。然后通过 PicPick 截屏软件截取 400x400 大小的图片，在此基础上做些简单修改，添加主题标题。最后通过 PicX 压缩成 webp 格式并上传至 Github 上，同时复制 Markdown 格式的带 CDN 的图片链接，添加博客文章中。可见这一通操作比较繁琐，并且借助了很多工具。今天终于发现了一个在线的图片设计编辑器 fabritor，带有图层设置，图片不仅可以上传本地图片，而且可以直接引用远程图片。支持多种导出图片格式，非常方便。软件介绍在线体验：https://fabritor.surge.sh/Github 项目地址：https://github.com/sleepy-zone/fabritor-web项目介绍：? A creative editor based on fabricjs. 一款基于 fabricjs 的开源创意图片编辑器，旨在让开发者快速构建属于自己的图片编辑器。可应用于海报设计、小红书公众号封面设计、banner 设计等场景。软件功能：? 文本：内置多种开源字体；支持调整文字样式；支持多种文字特效：描边、阴影、形状文字、文字渐变、文字填充。? 图片：加载本地或者远程图片；支持图片边框和圆角；支持图片裁剪；支持多种图片滤镜；➡️ 形状：支持线段、箭头和多边形；多边形支持添加边框，同样支持渐变填充。支持手绘风格图形。✍️ 画笔：支持自由绘制? 应用：二维码、emoji? 画布：支持定制背景色和画布尺寸；支持画布拖拽。? 元素操作：锁定、透明度、组合、复制粘贴、删除、图层层级、历史操作记录、页面对齐及对应的快捷键操作。? 导出：导出到剪贴板，导出 JPG、PNG、SVG 和模板（JSON），基于 JSON 可以构建模板库。安全可靠：纯浏览器端操作；操作自动保存到本地，数据不丢失。软件使用从上图可以看出，使用界面左侧为工具栏，包括图层总览，添加文字，添加图片，素材，画笔，应用。每一项使用都很简单，几乎没有门槛，操作几下就能熟练掌握。右上角可以加载自己保存过的图片模板。导出格式包括 SVG，JPG，PNG，自定义模板，复制到剪贴板。下图截取了各个工具使用时对应的界面。Photor：截图美化工具Photor 使用了 fabritor 的功能，支持在线编辑，同时支持浏览器插件，utools 插件。 地址：https://www.photor.fun【END】

Notion 建站工具盘点 本文作者：Spike112 原帖地址：https://sspai.com/post/77787关于 Notion 建站等主题，在以前的文章「Notion 优质资源汇总」，介绍了围绕 Notion 的第三方生态——Notion 插件、建站、小组件、自动化、汉化…… 这些工具或服务，可以将 Notion 打造为一款工作流完整、十分强大的知识库。今天这篇文章将对其中的建站服务进行扩展和补充。基于 Notion 的建站，能够帮助普通用户使用 Notion 这款无代码工具，快速建立支持 SEO 的在线网站或者博客，降低了对于用户开发能力的要求。下面是几款好用的 Notion 建站服务。noto访问地址noto 官网上手难度⭐️直接绑定 Notion 账户，授权 Database 就可以。推荐⭐️⭐⭐⭐评价上手简单；国内开发者的产品，访问和分享方便；使用效果https://futantan.noto.so/​https://jimmylv.noto.so/Potion访问地址Potion 官网特色操作简单；样式多，展示效果好；支持多种自定义选项；支持 SEO 优化；上手难度⭐️ 直接粘贴公开页面链接到 Potion 设置框即可。推荐⭐⭐⭐⭐⭐版本​使用效果社区范例库：组件世界 WidgetStore，组件世界·介绍：参见 组件世界 WidgetStore ：一个丰富、强大的嵌入式小组件库官方范例库：https://potion.so/showcaseSuper访问地址Super官网上手难度⭐️推荐⭐️⭐⭐⭐⭐评价免费版能满足普通用户使用；上手门槛低；产品服务响应快；支持 SEO 优化；版本​使用效果见范例库：https://super.so/showcaseNotatu访问地址Notatu 官网上手难度⭐️⭐️推荐⭐️⭐️⭐评价使用比较简单，价格不低。风格偏简约风格的。版本使用效果范例库NotionNext简介一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为Notion和所有创作者设计。访问地址NotionNext 官网上手难度⭐️⭐️⭐️⭐️直接绑定 Notion 账户，授权 Database 就可以。推荐⭐️评价GitHub 访问，配置需要有技术基础，有一定的开发能力。对于普通用户难度比较大。样式丰富，可供选择比较多。使用效果https://preview.tangly1024.com/结语Notion 建站服务均提供了使用引导，上手难度不大。使用建站服务，一种是登录 Notion 账户进行授权，使用官方提供的模版化 Database，直接新建或者添加准备发布的内容即可。另外一种更为简单，直接注册登录，复制粘贴你要公开分享的 Notion 页面链接至建站服务的设置选项，点击发布即可。如果你需要一个简单、好用的站点，那么使用 noto 即可，使用和访问都十分方便。如果你需要一个高 SEO 的站点，那么 Potion、Super 值得考虑。免费版本足够多数普通用户使用。如果你对建站服务要求比较高，又不想付费使用 Pro 版本的建站服务，那么，在有一定技术能力的情况下，可以使用 NotionNext.最后，如果你喜欢数字花园理念的话，可以使用简悦的 Notion Blog 生成器，将任意阅读模式导入到 Notion 并生成 Notion Blog.  如此，便可以快速打造一个基于你的阅读文本、高亮、评论等内容的 Notion 站点。参考文献Notion 优质资源汇总组件世界 WidgetStore ：一个丰富、强大的嵌入式小组件库关于 Notion-Like 工具的畅想和反思FlowUs 息流·深度评测——一款知识管理和在线协作平台高效输入，从微信剪藏开始：支持微信剪藏和内容自动整理的解决方案信息管理，从高效收集信息开始RSS 入门指南：如何将「RSS阅读」与笔记软件进行整合？如何在 FlowUs、Notion 等笔记软件中实现「标签 Tags」功能？从思考辅助到内容组织：基于思维导图的另类使用如何在支持多维表格的笔记软件中进行文件管理？内容创作者如何高效发布创作内容？

一个漂亮的单文件PHP目录程序及破解 参考：https://www.skyqian.com/archives/files\_photo\_gallery.html介绍Files Photo Gallery 是一个单文件PHP目录程序，可以放置到服务器上的任何目录，立即拥有一个文件和文件夹预览目录。它支持所有文件类型，并允许您预览图像、视频、音频和代码。这是一款简约而不简单，轻量而不轻薄的 PHP 应用。官网：https://files.photo.gallery演示：https://files.photo.gallery/demo文档：https://forum.photo.gallery/viewtopic.php?f=66&t=9964源码：https://cdn.jsdelivr.net/npm/files.photo.gallery/index.php支持单个文件只需将其放入服务器上的任何目录即可。实时搜索和排序文件。高级列表和库布局，可以实时切换。预览 IPTC、EXIF 和 GPS 地图以查看您的照片。使用缓存机制和 CDN 快速加载。高级树菜单导航显示整个目录结构。美丽的代码荧光笔来查看和编辑代码格式。可选登录以保护访问。安装将下载得到的 index.php 文件放置到需要的网站目录，打开目录即可； PHP 版本需要5.5以上，PHP 扩展程序安装需求：GD`mbstringfileinfoexif宝塔面板安装 PHP 时已经默认安装了 GD 和 mbstring 扩展程序，所以无需额外安装。 如果没有别的需求也可以不用安装 fileinfo 和 exif` 扩展，程序依然可以正常使用。破解Files Photo Gallery 是完全开源的，免费版和授权版一致，没有任何区别。只是免费版每次会弹出授权窗口，点击一下 No thanks! 即可关闭。破解授权有两个方法：一是 JS 本地化，二是 JS 网络化，当然 JS 网络化会更加方便快捷。JS 本地化：打开 index.php 找到代码：<script src="<?php echo config::$assets ?>js/files.js"></script>将其替换为：<script src="js/files.js"></script>再在同目录新建名为 js 的文件夹，然后下载 files.js 文件放置在其中即可；files.js文件下载地址： [](https://cdn.jsdelivr.net/gh/sunpma/cdn/other/files.js)https://cdn.jsdelivr.net/gh/sunpma/cdn/other/files.jsJS 网络化：打开 index.php 找到代码：<script src="<?php echo config::$assets ?>js/files.js"></script>将其替换为如下代码即可：<script src="https://cdn.jsdelivr.net/gh/sunpma/cdn/other/files.js"></script>常用配置参数// 根目录配置 'root' => '', // 相对路径或者绝对路径，不填代表当前目录，二级目录无需 / 符号 'start_path' => false, // 分配加载到视图中的第一个目录，默认情况下，该目录与root目录相同 // 授权登录 'username' => '', // 用户账号（留空关闭） 'password' => '', // 用户密码（留空关闭） // 排除文件或者目录 'files_exclude' => '', // '/\.(png|jpe?g)$/i' / 解释：排除后缀png.jpeg.jpg 'dirs_exclude' => '', // '/\/AAA|\/doc|\/222(\/|$)/i' / 解释：排除目录AAA.doc.222 // 菜单 'menu_enabled' => true // 启用或禁用左侧文件夹菜单 'menu_show' => true // 文件夹菜单展开或折叠 'menu_sort' => 'name_asc' // 左侧文件夹菜单排序 / name_asc，name_desc，date_asc，date_desc // 布局 'layout' => 'rows' // 主视图区域布局，包括选项 列表，块，网格，行和列 'sort' => 'name_asc' // 主视图区域默认排序 / name_asc，name_desc，date_asc，date_desc使用插件（非必选）一、下载插件 下载地址：https://cdn.jsdelivr.net/gh/qiantigers/files.photo.gallery@1.1/\_files/plugins/tasks.php二、安置 tasks.php 将其放到 _files/plugins/三、使用方法?task= 放在链接后，举个例子：https://www.a.com/?task=create_cache / menu / folders / images / all / force / dir / ignore_max_depth / time_limit 缓存设置，比如缓存所有图片缩略图，举个例子：https://www.a.com/?task=create_cache&imagesclear_cache / menu / folders / images / all / force / time_limit 清除缓存，比如删除图片缓存，举个例子：https://www.a.com/?task=clear_cache&imagescreate_html 缓存 html，举个例子：https://www.a.com/?task=create_html使用完插件把插件文件进行改名或者删除，需要时再使用，否则小心被人恶意乱搞。文件 files.js，tasks.php 下载地址：「一个漂亮的单文件PHP目录程序.exe」 https://www.aliyundrive.com/s/Emg42mZL2Lc 提取码: xb84 https://www.123pan.com/s/Oy5RVv-gwXB.html 提取码:Arkb【END】

Nginx 配置文件在线生成工具 Nginx ConfigNginx Config 是知名服务器提供商 Digital Ocean 发布的开源免费 “图形化 Nginx 配置文件生成工具”，大幅降低了 Nginx 的配置难度和建站的效率。NginxConfig 默认提供了常用预设的 PHP、单页面应用、WordPress 等方案，也能很方便地根据需要配置 HTTPS (SSL 证书)、反向代理等功能。官网地址：https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCNGitHub 地址：https://github.com/digitalocean/nginxconfig.ionginxWebUI官网地址: http://www.nginxwebui.cnGitHub 地址：https://github.com/cym1102/nginxWebUI功能说明nginxWebUI 是一款图形化管理 nginx 配置的工具, 可以使用网页来快速配置 nginx 的各项功能, 包括 http 协议转发, tcp 协议转发, 反向代理, 负载均衡, 静态 html 服务器, ssl 证书自动申请、续签、配置等, 配置好后可一建生成 nginx.conf 文件, 同时可控制 nginx 使用此文件进行启动与重载, 完成对 nginx 的图形化控制闭环。nginxWebUI 也可管理多个 nginx 服务器集群, 随时一键切换到对应服务器上进行 nginx 配置, 也可以一键将某台服务器配置同步到其他服务器, 方便集群管理。视频教程: https://www.bilibili.com/video/BV18A4y1D7GZ 演示地址: http://test.nginxwebui.cn:7070 用户名: admin 密码: adminjar安装说明以Ubuntu操作系统为例,注意：本项目需要在root用户下运行系统命令，极容易被黑客利用，请一定修改密码为复杂密码安装 java 运行环境和 nginxUbuntu:apt update apt install openjdk-11-jdk apt install nginxCentos:yum install java-11-openjdk yum install nginxWindows:下载 JDK 安装包：https://www.oracle.com/java/technologies/downloads/ 下载 nginx：http://nginx.org/en/download.html 配置 JAVA 运行环境 JAVA_HOME：JDK安装目录 Path：JDK安装目录 \bin 重启电脑下载最新版发行包 jarLinux： wget -O /home/nginxWebUI/nginxWebUI.jar http://file.nginxwebui.cn/nginxWebUI-3.3.1.jar Windows： 直接使用浏览器下载 http://file.nginxwebui.cn/nginxWebUI-3.3.1.jar有新版本只需要修改路径中的版本即可启动程序Linux： nohup java -jar -Dfile.encoding=UTF-8 /home/nginxWebUI/nginxWebUI.jar --server.port=8080 --project.home=/home/nginxWebUI/ > /dev/null & Windows： java -jar -Dfile.encoding=UTF-8 D:/home/nginxWebUI/nginxWebUI.jar --server.port=8080 --project.home=D:/home/nginxWebUI/参数说明(都是非必填)server.port 占用端口, 默认以 8080 端口启动project.home 项目配置文件目录，存放数据库文件，证书文件，日志等, 默认为 /home/nginxWebUI/spring.database.type=mysql 使用其他数据库，不填为使用本地 h2 数据库，可选 mysqlspring.datasource.url=jdbc:mysql://ip:port/nginxwebui 数据库 urlspring.datasource.username=root 数据库用户spring.datasource.password=pass 数据库密码注意 Linux 命令最后加一个 & 号, 表示项目后台运行docker安装说明本项目制作了 docker 镜像, 支持 x86\_64/arm64/arm v7 平台，同时包含 nginx 和 nginxWebUI 在内, 一体化管理与运行nginx。安装docker容器环境Ubuntu:apt install docker.ioCentos:yum install docker拉取镜像docker pull cym1102/nginxwebui:latest启动容器docker run -itd \ -v /home/nginxWebUI:/home/nginxWebUI \ -e BOOT_OPTIONS="--server.port=8080" \ --privileged=true \ --net=host \ cym1102/nginxwebui:latest注意：启动容器时请使用 --net=host 参数, 直接映射本机端口, 因为内部 nginx 可能使用任意一个端口, 所以必须映射本机所有端口。容器需要映射路径 /home/nginxWebUI:/home/nginxWebUI, 此路径下存放项目所有数据文件, 包括数据库, nginx 配置文件, 日志, 证书等, 升级镜像时, 此目录可保证项目数据不丢失. 请注意备份。-e BOOT_OPTIONS 参数可填充 java 启动参数, 可以靠此项参数修改端口号。--server.port 占用端口, 不填默认以 8080 端口启动日志默认存放在 /home/nginxWebUI/log/nginxWebUI.log另：使用 docker-compose 时配置文件如下：version: "3.2" services: nginxWebUi-server: image: cym1102/nginxwebui:latest volumes: - type: bind source: "/home/nginxWebUI" target: "/home/nginxWebUI" environment: BOOT_OPTIONS: "--server.port=8080" privileged: true network_mode: "host"编译说明使用maven编译打包mvn clean package使用 docker 构建镜像docker build -t nginxwebui:latest .添加开机启动编辑 service 配置vim /etc/systemd/system/nginxwebui.service[Unit] Description=NginxWebUI After=syslog.target After=network.target [Service] Type=simple User=root Group=root WorkingDirectory=/home/nginxWebUI ExecStart=/usr/bin/java -jar /home/nginxWebUI/nginxWebUI.jar Restart=always [Install] WantedBy=multi-user.target之后执行systemctl daemon-reload systemctl enable nginxwebui.service systemctl start nginxwebui.service使用说明打开 http://xxx.xxx.xxx.xxx:8080 进入主页登录页面, 第一次打开会要求初始化管理员账号进入系统后, 可在管理员管理里面添加修改管理员账号在http参数配置中可以配置nginx的http项目,进行http转发, 默认会给出几个常用配置, 其他需要的配置可自由增删改查. 可以勾选开启日志跟踪, 生成日志文件。在TCP参数配置中可以配置nginx的stream项目参数, 大多数情况下可不配.在反向代理中可配置nginx的反向代理即server项功能, 可开启ssl功能, 可以直接从网页上上传pem文件和key文件, 或者使用系统内申请的证书, 可以直接开启http转跳https功能，也可开启http2协议在负载均衡中可配置nginx的负载均衡即upstream项功能, 在反向代理管理中可选择代理目标为配置好的负载均衡在html静态文件上传中可直接上传html压缩包到指定路径,上传后可直接在反向代理中使用,省去在Linux中上传html文件的步骤在证书管理中可添加证书, 并进行签发和续签, 开启定时续签后, 系统会自动续签即将过期的证书, 注意:证书的签发是用的acme.sh的dns模式, 需要配合阿里云的aliKey和aliSecret来使用. 请先申请好aliKey和aliSecret备份文件管理, 这里可以看到nginx.cnf的备份历史版本, nginx出现错误时可以选择回滚到某一个历史版本最终生成conf文件,可在此进行进一步手动修改,确认修改无误后,可覆盖本机conf文件,并进行效验和重启, 可以选择生成单一nginx.conf文件还是按域名将各个配置文件分开放在conf.d下远程服务器管理, 如果有多台nginx服务器, 可以都部署上nginxWebUI, 然后登录其中一台, 在远程管理中添加其他服务器的ip和用户名密码, 就可以在一台机器上管理所有的nginx服务器了.提供一键同步功能, 可以将某一台服务器的数据配置和证书文件同步到其他服务器中接口开发本系统提供 http 接口调用, 打开 http://xxx.xxx.xxx.xxx:8080/doc.html 即可查看 smart-doc 接口页面.接口调用需要在 http 请求 header 中添加 token, 其中 token 的获取需要先在管理员管理中, 打开用户的接口调用权限, 然后通过用户名密码调用获取 token 接口, 才能得到 token找回密码如果忘记了登录密码或没有保存两步验证，可按如下教程找回密码和关闭两步验证1.停止 nginxWebUIpkill java2.使用找回密码参数运行 nginxWebUI.jarjava -jar nginxWebUI.jar --project.home=/home/nginxWebUI/ --project.findPass=trueproject.home 为项目文件所在目录project.findPass 为是否打印用户名密码运行成功后即可打印出全部用户名密码并关闭两步验证。

【汇总：建站在线工具】 IP 查询工具全国DNS服务器IP地址大全 公共DNS大全：https://dnsdaquan.com/ip111.cn 全方位查询您的 IP 地址：http://ip111.cn/IP125.com 查询我的 IP 地址：https://ip125.com/ITDOG 在线ping：https://www.itdog.cn/IPIP 专业的IP地址库：https://www.ipip.net/ip.htmlComprehensive IP address data, IP geolocation API and database：https://ipinfo.io/ip.dog?，界面非常简洁实用的 IP 查询工具，只有 IP 和复制按钮：https://ip.dog/IPinfo，整合多接口的 IP 查询工具：https://ip.rss.ink/个人搭建的 IP 地址查询工具：https://ip.skk.moe/极强检测，快速查询域名的各种情况：https://user.urlzt.com/comdetPING0地址：https://ping0.cc/说明：高精度IP地址归属地查询，TRACE追踪，全球小鸡监控平台 网速测试测速网：https://www.speedtest.cn/检查访问丢包情况：http://ping.pe/站长工具 - 多个地点 Ping 服务器，网站测速：http://ping.chinaz.com/在线工具在线工具箱大全：https://awesome-toolbox-chinese.bestxtools.com/OSCHINA.NET社区在线工具：https://tool.oschina.net/脚本之家在线工具：http://tools.jb51.net/最强工具人在线工具箱：https://www.toolfk.com/程序员的工具箱在线工具：https://tool.lu/奇迹秀（工具箱、字体下载、设计工具下载）：http://www.qijishow.com/老董优惠码 - 站长工具：http://www.laodong.me/tools/在线 JSON 校验格式化工具（Be JSON）：https://www.bejson.com/开发者武器库：https://devtool.tech/HTML/URL To Markdown（html 转 Markdown）：https://devtool.tech/html-md微图 - 极速图片压缩工具：https://devtool.tech/tiny-imageTree 树形目录可视化生成器：https://devtool.tech/tree山炮工具箱：https://mtool.wpjam.com/松鼠 API地址：https://api.szfx.top/说明：提供免费、稳定、快速 API 服务平台。推荐使用：调用网站 ICON，示例代码：https://api.szfx.top/ico/?url=https://www.5iehome.cc首页地址：https://api.szfx.top API 文档：https://doc.szfx.top大米 API地址：https://favicon.qqsuu.cn/说明：获取网站的 favicon。示例代码：https://favicon.qqsuu.cn/https://www.5iehome.cc 或 https://favicon.qqsuu.cn/5iehome.cc 引用： <img src="https://favicon.qqsuu.cn/你的域名">Favicon 网站图标抓取 API 接口文章地址：https://www.iowen.cn/faviconwangzhantubiaozhuaquapijiekou/说明：只需要填写 URL 地址就可以自动获取 Favicon 图标了。示例代码：https://api.iowen.cn/favicon/www.5iehome.cc.png注意：不要填 http(s)://，且结尾填写 .png快速获取网站图标地址：https://favicon.vwood.xyz/说明：获取网站的 favicon。示例代码：https://favicon.vwood.xyz/?domain=5iehome.ccNOISE | 知识效率集地址：https://www.noisesite.cn/说明：效率集 + 知识库 + 收藏夹Paste.in地址：https://paste.in/说明：可以在一段时间内存储文本、源代码或敏感数据。无需付费，无需注册，无需广告！XAMPP下载地址：https://www.apachefriends.org/zh\_cn/download.html说明：XAMPP是一个易于安装的Apache发行版，其中包含MariaDB、PHP和Perl。W3Schools地址：https://www.w3schools.com/说明：Web开发在线学习网站学习CSS布局地址：https://zh.learnlayout.com/toc.html说明：网站布局领域的 CSS 基础。我们假设你已经掌握了 CSS 的选择器、属性和值。并且你可能已经对布局有一定了解，即使亲自去写的话还是会很苦恼。如果你想要从头开始学习 HTML 和 CSS，那么你可以看下这篇教程。 https://learn.shayhowe.com/html-css/Wix地址：https://zh.wix.com/说明：免费网页制作仿站小工具地址：https://smalltool.github.io/说明：下载网页模板软件、仿站工具、仿站软件