所有由崇远网站建设发布的文章

pdf文件、zip文件等浏览器访问链接会直接下载的文件,怎样防盗链呢?

帮客户小A做网站,客户有一些zip文件资源,可以提供给用户下载。

后来发现被同行网站抄袭了,可是下载链接还是从客户小A的服务器下载的。

= = = = = =

以往遇到过很多图片或视频被盗链的,那个只要在CDN的Referer 防盗链把自家网站域名加入白名单就可以了。因为图片和视频都是用src调用才能显示。

而pdf文件、zip文件等浏览器访问链接会直接下载的文件是用的a标签的href属性跳转,下载链接还是小A的域名,所以Referer 防盗链防不住了。但是这个下载链接放在同行抄袭网站的文章中,用户点击下载链接浏览器就直接开始下载文件了,用户此时还待在同行抄袭网站上。所以用户会误以为是同行抄袭网站提供的下载,但是我们知道实际文件是从小A的服务器上下载的。

这真是哑巴吃黄连,为敌人做嫁衣了。

彻底退出猪八戒之后,思考一下转型方向

毕业这几年一直在猪八戒接单,刚开始是兼职,后来转成全职。

2015年双创加上2016年猪八戒免佣金,算是猪八戒最好的一段时间了。

从2017年之后,各种名目的收费越来越多。可是订单却越来越少。

到了2019年初,不给猪八戒交钱已经很难拿到订单了。于是交了6000元会员费。头两个月还行,从4月份开始猪八戒就全身心投入到工场会员上面了,说白了就是房地产二房东。之后分给我的订单是越来越少。还不停的出台各种苛刻的规则,钓鱼执法式的扣保证金。

后来听说猪八戒要在科创板申请上市。过了一段时间猪八戒工场的效仿对象WeWork上市受阻市值缩水大半,这样的大环境下谁还敢买猪八戒的股票呢。去年沪江上市失败导致公司破产,不知道如果猪八戒上市失败会出现什么现象。

最近看明白了一个道理,在任何平台的创业到头来都是在为平台打工。滴滴、淘宝、猪八戒都是这个套路。刚开始给你一点补贴甜头,到后面一定会加倍搜刮回来。

于是果断选择彻底退出猪八戒。为了防止犹豫不决,专门把猪八戒店铺多年优化的文字图片全部删除了,说实话,还挺心疼的,猪八戒的每次变动我们开店的都要跟着优化文字图片,花费很多时间。

还有一点感悟:做定制真的不赚钱,做产品相对还好些。

= = = = = = 辞旧迎新 = = = = = =

最近打算把这几年积累的知识经验整理一下写出来。以后不会考虑在各种平台开店了。好好优化我的独立网站。

从Themeforest购买的WordPress主题或插件带了很多谷歌字体导致国内网站加载慢,怎么办?

Themeforest主题交易市场,WordPress爱好者应该都很熟悉了。


Themeforest上面的主题有很多优点:

1、大部分主题都带了Wpbakery page builder、Revolution slider这样的可视化编辑插件,对不懂代码而且希望作出足够复杂布局网页的人比较友好。

2、有持续更新维护。wordpress官网上有很多免费主题也很好,但是没有更新维护,一旦系统或插件升级导致主题出错,修复成本会很高。

3、demo效果精美,而且可选的样式足够多。琳琅满目挑花眼的感觉有木有。


但是做国内网站的小伙伴却经常对Themeforest上面的主题又爱又恨,

1、Themeforest上面很多主题带了谷歌字体,而国内是禁用谷歌字体的,因为网页无法加载谷歌字体导致网站整体打开速度非常慢。

2、Themeforest主题自带的谷歌地图在国内无法打开(也无法标注国内地址),必须换成百度地图或高德地图。

3、Themeforest主题自带的分享一般是facebook、twitter、pinterest这类国外社交网站,但是国内的标配是微信、微博、QQ等。


谷歌地图和分享的问题比较复杂,以后详述。

今天先说一下怎样禁用谷歌字体的问题。


以前我帮客户安装Themeforest上面的主题做国内网站,都是在浏览器的开发者工具中查看Network,查出哪些文件或插件带了谷歌字体之后,找到对应的文件删除对应代码。

但是每次主题升级更新之后,就要全部重新再改一次。

最近找到一个插件,可以针对Wpbakery page builder、Revolution slider等插件禁用谷歌字体:Hardcore Google Fonts Localizer

 

WPML4.3.1免费下载(含17个插件)

更新时间:2019年10月29日

遇到WPML问题可加QQ群讨论,WordPress+WPML QQ群号:598686967

下载链接:WPML-4.3.1

群文件中有WPML最新版,群主买的是永久更新、无限网站数量的版本;可以到群文件中下载;

WPML的版本更新,需要根据网址生成一个key,可以把网址(https和http不一样,带www和不带www不一样)发给群主,群主免费帮你注册之后你填写key之后就可以永久更新了。

= = = = = =

群文件中的zip压缩包下载解压之后,会发现三个文件夹,并不需要全部安装:

一、必须安装的

sitepress-multilingual-cms.4.3.1.zip-这个zip是WPML的核心组件,所以建议首先安装这个zip;这个插件的官方教程:https://wpml.org/documentation/getting-started-guide/

wpml-string-translation.3.0.1.zip-这个zip是必须安装的,官方教程:https://wpml.org/documentation/getting-started-guide/string-translation/

wpml-translation-management.2.9.0.zip-这个zip是必须安装的,官方教程:https://wpml.org/documentation/translating-your-contents/

wpml-media-translation.2.5.4.zip-这个zip是必须安装的,官方教程:https://wpml.org/documentation/getting-started-guide/media-translation/

二、用来翻译你插件的

woocommerce-multilingual.4.7.1.zip-这个zip是WPML用来翻译插件“WooCommerce”的,如果你没有安装插件“WooCommerce”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/woocommerce-multilingual/

gravityforms-multilingual.1.5.2.zip-这个zip是WPML用来翻译插件“Gravity Forms”的,如果你没有安装插件“Gravity Forms”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/gravity-forms-multilingual/

contact-form-7-multilingual.1.0.1.zip-这个zip是WPML用来翻译插件“Contact Form 7”的,如果你没有安装插件“Contact Form 7”,就不要安装这个zip;官方教程:https://wpml.org/documentation/plugins-compatibility/using-contact-form-7-with-wpml/

buddypress-multilingual.1.6.zip-这个zip是WPML用来翻译插件“BuddyPress”的,如果你没有安装插件“BuddyPress”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/buddypress-multilingual/

acfml.1.4.0.zip-这个zip是WPML用来翻译插件“Advanced Custom Fields”的,如果你没有安装插件“Advanced Custom Fields”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/translate-sites-built-with-acf/

wpml-all-import.2.1.1.zip-这个zip是WPML用来翻译插件“WP All Import”的,如果你没有安装插件“WP All Import”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/wpml-all-import-plugin-website-import-with-wpml/

wpml-mailchimp-for-wp.0.0.3.zip-这个zip是WPML用来翻译插件“MailChimp for WordPress”的,如果你没有安装插件“MailChimp for WordPress”,就不要安装这个zip;官方教程:https://wpml.org/documentation/related-projects/mailchimp-for-wordpress-multilingual/

wp-seo-multilingual.1.0.2.zip-这个zip是WPML用来翻译插件“Yoast SEO”的,如果你没有安装插件“Yoast SEO”,就不要安装这个zip;官方教程:https://wpml.org/documentation/plugins-compatibility/using-wordpress-seo-with-wpml/

三、可有可无的

types.3.3.6.zip-官方教程:https://toolset.com/home/types-manage-post-types-taxonomy-and-custom-fields/

wp-views.2.9.3-lite.zip-官方教程:https://toolset.com/home/views-create-elegant-displays-for-your-content/

toolset-module-manager.1.8.6.zip-官方教程:https://toolset.com/home/module-manager/

wpml-sticky-links.1.5.0.zip-官方教程:https://wpml.org/documentation/getting-started-guide/sticky-links/

wpml-cms-nav.1.5.2.zip-官方教程:https://wpml.org/documentation/getting-started-guide/site-navigation/

Avada主题汉化简体中文语言包.mo免费下载

遇到Avada问题可到群里讨论, WordPress+Avada主题 群号:475525165

在QQ群里回答问题时,经常有人寻找Avada主题汉化简体中文语言包;

其实Avada主题官方自带的有各种语言的语言包,只需要你上传到指定位置就可以显示为中文了。

打开你购买的Avada主题,有一个“Languages”文件夹,里面有三个子文件夹“Avada”、“fusion-builder”、“fusion-core”,每个文件夹中都有一个以“-zh_CN.mo”结尾的文件,这就是指的简体中文。

Avada-zh_CN.mo-这是主题语言包,上传到:wp-content/languages/themes/

fusion-builder-zh_CN.mo-这是插件语言包,上传到:wp-content/languages/plugins/

fusion-core-zh_CN.mo-这是插件语言包,上传到:wp-content/languages/plugins/

参考Avada官方文章:https://theme-fusion.com/avada-doc/translations/included-language-files/

如果你拿到的主题中没有“Languages”文件夹,可以直接在这里下载,解压之后上传到上述文件夹中:

Avada-zh_CN.mo

fusion-builder-zh_CN.mo

fusion-core-zh_CN.mo

 

WordPress+Avada主题

手机移动端前端开发切图之head(meta、media query)

一、手机端必备meta

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

备注:我详细看过每个属性的含义,但在我遇到的项目中都没有修改属性值的必要,所以我一般都是直接复制粘贴;如果想刨根问底,点击http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

二、

怎样提高做前端开发切图的效率

前端开发作为网站建设中最有标准的一个流程,提高效率的可能性还是蛮大的;对于新兴的技术,这方面如果学习或者定制需要时间,这还可以理解;但是有大部分订单其实用到的知识点都是差不多的,如果把需要用到的都准备好,感觉应该能对切图速度有所改善;

一、把常用的jQuery库、jQuery插件库、CSS reset 全都整理好,放在约定的硬盘中;

二、熟练使用前端编辑软件(推荐sublime text)快捷键;熟练掌握emmet(对于emmet,从去年十一就嚷嚷着要学,到现在也没全学会,还自我安慰用处不大,其实就是太懒了,本周必须全过一遍)等有利于加快写代码速度的工具;

css画三角形边长宽高原理分析

css绘制三角形,已经有很多大神写过很详细的用法,在此不做赘述;http://www.jb51.net/article/42513.htm

最近一个项目需要用到精确到1px的三角形,但是查遍所有教程都只有用法,而没有对边长和宽高进行具体原理分析,导致此处修改数次耽误了挺长时间才做到让设计师同事满意;所以在项目结束后,通过chrome dev tool 详细分析下边长和宽高原理;

先看一段代码:

<div style="width:0;height:0;border-left:60px solid transparent;border-right:40px solid transparent;border-top:50px solid #ddd;"></div>

下面是这个代码在浏览器中的样子:

通过chrome dev tool 查看,这个三角形的宽是100px,高是50px;

由此可知:

此三角形的高(此处所说的高以中学课本定义为准:即顶点到底边的垂线)为有颜色的border(即#ddd)的border-width;

而底边被垂线分成两部分,分别是对应的border的border-width;

底边边长是两个transparent的border的border-width相加之和;

新闻内容页图片水平居中css

为新闻内容页切图的时候,经常会遇到图片居中的问题;

因为要考虑到用户从后台输入的时候不会用class;

解决方案一:点击后台编辑框的居中按钮,生成的代码如下

<div align="center">居中测试</div>

分析:好处是比较符合网站编辑的用户体验;缺点是如果图片多的话,这样点来点去也挺头疼的;

解决方案二:把img设置为块级元素

.news_con img{width:auto;display:block;margin:0 auto;}