文章

发布于

Bootstrap笔记

来源:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

开头包含下面的代码段

<!DOCTYPE html>
<html>
....
</html>

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

容器（Container）

<div class="container">
...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。

Bootstrap 网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

网格系统是通过指定您想要横跨的12个可用的列来创建的。

Bootstrap 网格系统如何跨多个设备工作：

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px
（一个列的每边分别 15px）		 30px
（一个列的每边分别 15px）		 30px
（一个列的每边分别 15px）		 30px
（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

col-md-offset-3（在左侧补充3列）
col-md-push-8（从左侧往右侧推8列）
col-md-pull-2（往左侧拉2列）

 

 

 

 

 

 

 

 

 

 

发布于

FRP实现https访问内网网站的方法

通过服务端配置nginx即可。

需提前申请好对应的域名证书（可以用宝塔申请好，然后把对应的文件拷贝出来使用）

其中yun.domain.com为域名

 

nginx配置

server
{
listen 80;
listen 443 ssl http2;
server_name yun.domain.com;
location / {
proxy_pass http://$host:8080;
proxy_set_header Host $host:80;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_hide_header X-Powered-By;
}

#代码拷贝自宝塔面板部署证书后的网站配置

ssl_certificate /frps/yun.domain.com/fullchain.pem;
ssl_certificate_key /frps/yun.domain.com/privkey.pem;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
error_page 497 https://$host$request_uri;

#SSL-END

#代码拷贝自宝塔面板部署证书后的网站配置

location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
{
proxy_pass http://$host:8080;#添加这一行
expires 30d;
}

location ~ .*.(js|css)?$
{
proxy_pass http://$host:8080;#添加这一行
expires 12h;
}
location ~ /.
{
deny all;
}
}

frps中配置不变。

其中vhost_http_port = 8080

frpc中配置http即可。

 

如果是nextcloud通过这种方式进行配置https的话，需要在nextcloud的配置文件中进行两项配置

'overwriteprotocol' => 'https',
'overwritehost' =>'域名',

这样配置后，可以解决一些小问题，我遇到了在APP登录时会无限循环无法登录。

发布于

CRMEB公众号H5前端修改nodejs打包教程

下载安装nodejs

WIN系统中

1. Win+R调出运行，输入cmd进入dos命令窗口

2. 然后复制解压后CRMEB源码中h5的路径

例如：C:UsersadminDesktopCRMEB_DT_v3.2.3h5

3. 在dos命令窗口中进入以上路径

输入cd C:UsersadminDesktopCRMEB_DT_v3.2.3h5

4.进行源码解压

输入命令

npm install

 

5.等解压完成后，

进行源码修改

6.进行源码压缩
如果已经关闭dos窗口，请重复以上1－3步，进入h5所以路径

输入命令

npm run build

7.拷贝打包后的文件

打开源码位置 h5/dist 复制目录下所有文件

C:UsersadminDesktopCRMEB_DT_v3.2.3h5dist

替换掉原来的即可。

8.然后如需修改logo和标题：

首页logo：h5publiclive-logo.gif

加载logo：h5srcassetsimageslive-logo.gif

首页标题：h5.env.production

发布于

PicUploader一个用php编写的图床工具

PicUploader 是一个用php编写的图床工具，它能帮助你快速上传你的图片到云图床，并自动返回Markdown格式链接到剪贴板。配置完成后，要获取一个可用于markdown的图片外链只需要：

  • 方式一： 右击电脑本地任意格式文件→点击你的自定义上传菜单→系统通知文件上传成功→到Markdown编辑器中粘贴！
  • 方式二： 截图并点击复制到剪贴板→按快捷键→系统通知图片上传成功→到Markdown编辑器中粘贴！
  • 方式三： 右击网页中的图片→点击复制图片→按上传快捷键→系统弹出上传成功通知→到Markdown编辑器中粘贴！
  • 方式四： 使用网页版上传，包括拖放上传(支持多文件)、复制本地图片文件后粘贴上传、截图后粘贴上传、复制网页上的图片后粘贴上传、点击上传按钮选择图片后上传(支持多文件)。

主要功能

  • 支持Mac和Windows(也可用于Linux服务器端)、理论上也支持Linux桌面版，只要你能添加右键菜单或者用快捷键调用上传命令的话；
  • 支持图片压缩后上传(支持jpg/png/webp，gif/bmp不支持压缩)；
  • 支持添加水印后上传(支持文字水印、图片水印、自定义水印颜色/透明度/角度/位置，支持jpg/png/bmp/webp，gif不支持水印)；
  • 返回的链接可自定义（如原始链接、Markdown格式链接、可点击的Markdown格式链接、完全自定义的链接）；
  • 完全自定义上传文件名(可选变量有当前年、月、日、当前时间戳，随机字符串(可调长度))；
  • 上传过的文件直接返回历史记录(防止重复上传，仅限在不添加水印不压缩的情况下)；
  • 可作为MWeb/Typora的API使用，可作为PicGo/ShareX/uPic等的自定义图床使用；
  • 支持快捷键上传剪贴板中的图片(配合Alfred/WinHotKey使用)；
  • 支持Web端拖放、粘贴、或直接选择上传图片；
  • 支持Web端设置所有参数；
  • 支持上传任意格式文件(除了图片，还可以上传任意格式文件，只要你的存储端支持就行)；
  • 目前支持的图床：七牛、腾讯、网易、百度、京东、阿里、又拍、sm.ms、Imgur、Ucloud、青云、Nextcloud、Github、Gitee(码云)、Cloudinary、Chevereto、Minio、Aws s3、金山、华为、DropBox、OneDrive、GoogleDrive、Azure、Gitlab、Coding.net、图速云、个人服务器(sftp)、本地(即PicUploader所在机器)。

作为PicGo自定义图床

右击顶部PicGo图标→打开详细窗口→插件设置→搜索web-uploader→点击安装，安装好后就能在左侧图床列表看到自定义图床。

点击自定义图床并填写配置：

  • url: http://你的PicUploader后台域名/index.php
  • paramName: picgo
  • jsonPath: data.url
  • customHeader: 如果nginx使用了Nginx添加密码认证，则填{"authorization":"Basic xxxxxxx"}
  • customBody: 暂时用不到，留空。

设置好之后，双如果你是远程部署的，一定要Nginx添加密码认证，添加了认证，customHeader，名称为authorization，值为Basic xxxxxxx，其中xxxxxxx这串值，需要你登录网页版后，在网页控制台→网络→找到任意一个链接→查看它的Request Headers，找到authorization就有这串值。

右击顶部工具栏PicGo图标→选择默认图床→自定义Web图床，然后使用PicGo上传图片就会自动通过PicUploader的接口上传了。

添加右键菜单

右击PicUploader/accessorys/add-right-click-menu.bat→以管理员身份运行→按提示填写最后输入y回车安装(注意复制路径如果开头有乱码字符请删掉)。

使用： 右击文件→点击自定义上传菜单→自动弹出黑框→黑框消失表示上传完成→去粘贴。

删除右键菜单： Win+R，输入regedit回车，进入注册表编辑器，找到HKEY_CLASSES_ROOT→*→shell，在这里就能找到你添加的菜单，删掉它，再重新按前面的步骤添加即可。

快捷键上传

下载WinHotKey，打开WinHotKey→New Hotkey...:

  • When I press these keys: 勾选Alt和Ctrl
  • Along with the key: U,这一步跟前一步加起来表示把快捷键设置为Ctrl+Alt+U
  • 点击右下角的Advanced...
  • Launch which application: D:phpstudy_proExtensionsphpphp7.3.4ntsphp.exe
  • Provide application parameters here: 固定填index.php --type=alfred
  • Start the application at this folder: D:phpstudy_proWWWPicUploader
  • Display the window: Minimized

记得所有路径都换成你电脑的路径，然后保存，因为我们没有勾选Windows键，所以保存时它会弹出个提示(不用看，点Yes就行)。

使用： 截图→复制到剪贴板→按快捷键→任务栏显示php图标(上传中)→任务栏图标消失(上传完成)→去粘贴。

注意： 如果是Win7，需要升级Windows Management Framework 5.1，请下载安装。

Nginx添加密码认证

使用宝塔面板直接可以设置

站点管理中网站目录开启密码访问

然后在配置文件中关闭图片文件密码访问，以支持其它网站引用
location ~ .*.(jpg|jpeg|gif|png|js|css)$
{
*****
auth_basic off;
}

然后开启防盗链功能即可。

 

 

发布于

腾讯云DNSPod 域名狂欢季

DNSPod 域名狂欢季
域名、DNS、SSL证书等豪华代金券，免费领取，新老用户同享

 

优惠一：续费代金券

域名续费券：10元代金券（满20元可用）

DNS 解析续费券：500元代金券（满1000元可用）

优惠链接：点击进入

 

优惠二：无门槛代金券

DNSPod 全产品代金券：5元无门槛直接用

 

更多优惠可点击优惠链接进入查看。

优惠链接：点击进入

 

 

发布于

[转载]nginx 之$proxy_host｜$host｜$http_host区别

proxy_set_header 允许重新定义或者添加发往后端服务器的请求头。value可以包含文本、变量或者它们的组合。 当且仅当当前配置级别中没有定义proxy_set_header指令时，会从上面的级别继承配置。 默认情况下，只有两个请求头会被重新定义：

proxy_set_header Host $proxy_host;

proxy_set_header Connection close;

nginx对于upstream默认使用的是基于IP的转发，因此对于以下配置：

upstream web {

server abc.com;

}

server {

listen 80;

server_name www.hehe.com;

location /front {

proxy_pass http://web;

proxy_set_header Host $proxy_host;

}

}

当匹配到/front时，使用web处理，到upstream就匹配到abc.com，这里直接转换成IP进行转发。假如abc.com是在另一台nginx下配置的，ip为10.10.10.10，则$proxy_host则对应为10.10.10.10。此时相当于设置了Host为10.10.10.10。如果想让Host是abc.com，则进行如下设置：

proxy_set_header Host abc.com;

如果不想改变请求头“Host”的值，可以这样来设置：

proxy_set_header Host $http_host;

但是，如果客户端请求头中没有携带这个头部，那么传递到后端服务器的请求也不含这个头部。 这种情况下，更好的方式是使用$host变量——它的值在请求包含“Host”请求头时为“Host”字段的值，在请求未携带“Host”请求头时为虚拟主机的主域名：

proxy_set_header Host $host;

此外，服务器名可以和后端服务器的端口一起传送：

proxy_set_header Host $host:$proxy_port;

如果某个请求头的值为空，那么这个请求头将不会传送给后端服务器：

proxy_set_header Accept-Encoding "";

来源：https://blog.51cto.com/gyj110/2079981

 

nginx配置中$http_host、$host、$host:$proxy_port 简单区别

1、 proxy_set_header Host $http_host;
不改变请求头 。
2、proxy_set_header Host host;如果客户端请求头中没有携带这个头部，那么传递到后端服务器的请求也不含这个头部。这种情况下，使用host;如果客户端请求头中没有携带这个头部，那么传递到后端服务器的请求也不含这个头部。 这种情况下，使用host;如果客户端请求头中没有携带这个头部，那么传递到后端服务器的请求也不含这个头部。这种情况下，使用host变量它 的值在请求包含“Host”请求头时为“Host”字段的值，在请求未携带“Host”请求头时为虚拟主机的主域名；
3、proxy_set_header Host host:host:host:proxy_port;
服务器名可以和后端服务器的端口一起传送：
4、如果某个请求头的值为空，那么这个请求头将不会传送给后端服务器：
proxy_set_header Accept-Encoding “”;
5、用户真实的ip地址转发给后端服务器
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;

来源：https://blog.csdn.net/Sw_Pro/java/article/details/99679534

 

发布于

mysql排序过滤特定值或范围

有一个网站需要进行排序，添加了一个字段，在未设置排序序号的情况下，默认设置为0，在进行排序时要把序号为0的排到后面，这样就可以通过序号进行升序或降序排序。

相应的SQL语句可以这样写

SELECT * FROM wdja_product ORDER BY p_order=0, p_order ASC

这里的p_order＝0是排除值为0的数据，然后再进行排序操作。

相应的也可以设置p_order>=0或p_order<=0或p_order>99等

 

 

发布于

CSS背景图设置宽度100%，高度自适应的方法

两种方法

1.通过设置background-size和:before进行实现

.newcenter{
        width: 100%;
        background: url('../../assets/img/newcenter.png') no-repeat;
        background-size: 100% auto;
    }
.newcenter:before{content: ""; display: block; padding-top: 100%;}

 

2.通过设置padding-top或padding-bottom实现，值是背景图片的宽高比。高度设置为0.

   .newcenter{
        width: 100%;
        max-width:1200px;
        background: url('../../assets/img/newcenter.png') no-repeat;
        background-size: 100% auto;
        padding-top: 13%;
        height: 0px;
    }

 

当然，还有其它方法，例如利用position进行层叠实现，通过一个图片宽度自适应作为底层。

 

参考：https://www.jianshu.com/p/894dbab72f95

 

 

发布于

Nextcloud通过FRP搭建私有网盘进行Joplin同步笔记的配置

正常情况下可以使用FRP绑定过的域名进行配置。

但在使用Joplin通过webdav进行配置时，使用域名则会一直报403错误（只有同步时才会报错，配置中检查同步配置时则不会）。

后经过测试发现。需要带上frp配置的服务器端的端口才可以。

正常情况下：

http://域名/remote.php/dav/files/用户名/Joplin

而Joplin同步则需要：

http://域名:8080/remote.php/dav/files/用户名/Joplin

其中8080为FRP服务器端的端口，在服务端已经通过nginx进行了配置，实现直接通过80端口（http://域名/）进行访问nextcloud.

而Joplin配置webdav则需要带上端口。不然Joplin则会一直报403错误。

如果情况同我的一样，则可以尝试进行操作，Joplin进行同步403报错，也有可能是其它原因，请自查。