置顶信息：这些年来我们已经积累了几十家客户，两百多个由我们独立完成的项目案例。团队虽小，能量却很大。不同于个人的单打独斗，我们一直把JennyStudio作为一家正规公司运营着，把每一个项目当作自己的孩子一样培育。
我们尤其专长基于WordPress的各种类型的网站开发，和大部分靠WordPress吃饭的公司不同的是:
我们从不采用任何他人主题（无论免费还是收费主题），避免各种第三方不确定因素造成的技术困扰和侵权可能。
我们只做整站成品，为客户独立设计和开发定制自己的网站。因此我们出手的WordPress网站不存在打开慢、设置烦、操作难、不符合中国人使用习惯等常见问题，更不可能和任何一个网站“撞脸”。
长期承接外包项目，若你有WordPress相关的建站需求，微信小程序开发需求、H5页面设计制作需求，请移步JennyStudio上海网站建设。 查看详细
WP Super Cache是我一直以来都在使用的超级缓存插件，他可以帮我们的网站快捷的打开静态缓存，从而大大提高访问速度，节约服务器资源。本人切身感受，同一台服务器，在所有的WP网站都启用静态缓存，并且把图片视频字体等静态资源存入CDN后，服务器的利用率可以提高80%甚至更多。这款插件的设置技巧，搜索引擎上能找到一大堆，本文就不重复了。
本文讨论在某些应用场景下，如何有效地刷新单个页面的缓存。举个例子，一些博客网站有点赞功能，点赞的数据一般我们会作为一个文章自定义字段存储在数据库中，而页面上显示的赞数是在静态缓存页面里的，访客新点了一个赞，数据库里面的那个数字是+1了，但缓存过的页面并不会刷新这个数字，你按多少次F5都没用。
这时候我们就需要手动刷新一下显示这个赞数的页面静态缓存。访客不能进入网站后台，他自己如何刷新页面静态缓存呢？ 查看详细
WooCommerce产品数量的选项如图所示，这是一个HTML5的数字输入框，代码表现为
<input type="number" id="***" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" placeholder="" inputmode="numeric"> |
这样的输入框可以让用户输入任意数字，直接把一定数量的产品加入购物车。但在一些场合下，用户其实还是更希望有个下拉菜单形式的输入框，从而可以直接选择想要购买的数量。这种场合比较适用于购买数量不多，或者日常库存不多的产品，比如不超过20件的情况。因为如果数量一多，恐怕整个屏幕高度都不够下拉列表的数字显示，反而会对用户造成更大的不方便。
下来菜单其实就是一个select元素，替换掉原来的数字框，在商品页面的前后页面表现是这样的：
查看详细
给WooCommerce产品页面添加自定义字段，并使其影响价格，在很多电商的场景中会需要这个功能。注意这里强调的是用户自定义字段，而非我之前写的 博客 介绍的产品自定义字段，两者不是一个东西。
举几个例子：
WooCommerce产品用户自定义字段，英文翻译叫做“WooCommerce product add-on”，在产品页面上可以这样表现：
我们可以同时添加多个字段，也可以用select、radio、checkbox，datepicker，甚至是file uploader做自定义字段。
要实现这个功能，市面上已经有不少插件了，在官方插件市场上搜一下“WooCommerce product add-on”关键词，就能找到不少同类插件。我测试过过几款，发现功能都差不多，它们也都有免费版和收费版两个版本。一般来说，这类插件的免费版提供各种常规类型的自定义字段，收费版则提供一些特殊类型的自定义字段。另外如果你需要通过这些字段影响商品价格，这个功能我没有在免费版里见过，都需要购买付费版实现。付费版价格在39 – 69美元之间，看上去并不贵。但我的原则仍然是能不用插件就不用，需要用户自定义字段的场景，实际上字段都不多，这个功能不复杂，完全可以自己写出来。 查看详细
如果要阻止搜索引擎索引网站的某个页面，只要将此页面路径添加到robots.txt中。本文要讨论的不是这个，而是要让搜索引擎在收录该页面的时候，不收录这个页面上特定部分的内容。这样做有什么意义呢？举例说明：
比如在JennyStudio网站上，我们对案例页面增加了一段文字说明，这段文字呈现在正文之前，搜索引擎收录该案例页面的时候这段文字会被正文先读取，导致搜索结果的摘要部分显示了这段文字，影响收录效果。而且我们每个案例页面都有这段文字，大量重复段落内容的出现也在另一方面不利于搜索效果，所以我打算不让搜索引擎收录此段文字。
查看详细
唠点软话题，非技术范畴的。
以下图片是今年1月和8月的网站CMS市场份额对比图。这个统计是整个互联网的网站所使用的各家CMS（内容管理系统）的占比，简单拿排名第一的WordPress来说，就是在2021年8月，全网有42.4%的网站是基于WordPress搭建的，这是一个几千万的数量级。上下对比则可以看到WordPress在7个月内又多占了接近3%的份额，而3%已超过排名第三的Joomla当前的总份额了，WP的涨势仅用了7个月就吃掉了第三名以后任何一家的总份额，非常惊人。这不是一个野鸡统计表，它来自于w3techs.com，链接点此。
这对于一直在使用WordPress建站的我们来讲，也是有很大的激励作用的。虽然我们并不卖主题和插件，不怎么靠WordPress原生的生态吃饭，但每每看到有优秀的网站是使用WordPress搭建的时候，内心就很受鼓舞。
查看详细
最近发现去年安装LNMP1.7的两台云主机，无论是自动续期还是手动输入命令安装Let’s Encrypt SSL证书都不成功。输入lnmp ssl add命令后按提示操作，报错信息是这样的：
搜了一遍网络，原因应该是这个 https://github.com/acmesh-official/acme.sh/wiki/Change-default-CA-to-ZeroSSL
解决方式是运行以下命令后再安装证书即可：
/usr/local/acme.sh/acme.sh --set-default-ca --server letsencrypt
Jemalloc是一款服务器内存优化组件，在LNMP环境的安装包中可以选择安装。一般来说一台服务器上运行3-5个访问量不大的WordPress网站是绰绰有余的，所以很长一段时间里，我并没有特意研究过服务器内存优化，每次装LNMP的时候会选择不安装。
最近碰到一台服务器内存吃得很厉害，无论怎么调php-fpm配置都降不下来，不时还来个502报错。摆在面前的只有2个选项了，要么服务器升级加内存，要么试试内存优化工具再压榨一下服务器性能。于是抱着尝试心态试试Jemalloc。
安装jemalloc
yum install jemalloc
研究了一下项目运维中自动备份数据库到阿里云OSS的步骤，记录一下阿里云后台和服务器的一系列操作。
进入阿里云对象存储OSS后台，先开一个Bucket，命名为“brain-backup-db”。因只是做备份数据库用，所以存储类型选最便宜的“归档存储”即可，其他选项用不着的就都不开。关于费用，本文最后一节会做介绍。
然后进入这个Bucket的概览页面，找到外网访问的Endpoint，记录下来。
如果你的ECS和OSS是在同一地区的，也可以根据实际网络情况，这里的Endpoint选第二或第三个，存储速度飞快。特别说明，一般购买阿里云ECS，默认网络是经典网络，也就是说同区域的ECS数据备份到OSS上，大部分情况下可以选绿框圈出的那个；跨区域或者用的是非阿里云ECS服务器的，则选红框圈出的。
这又是一篇本人写于知乎问题的回答，自己博客再发布一下，文章略有修订。
原答链接：https://www.zhihu.com/question/459319142/answer/1884946869
从我能想到的几方面尽量回答这个的问题吧。
作为从业者，自然是欢迎客户找我咨询建站的问题，但如果一开始就咬定“简单”的几个页面，我们对接这个项目的兴趣一开始就会被打消…
首先，如果你说简单，我们听出的画外音是没有预算；
其次，你没有好好设想过自己要做的网站，没有给予充分思考的事情就会显得很简单。深入的想想需求，想想执行，想想自己要准备的内容，往往自己都觉得没那么简单。所以建议在咨询任何建站方的时候，都不要一上来就搬出“我的需求很简单”这种话语。倘若你以为的简单其实聊下来并不简单，但还是先入为主咬定了一个简单的预算，那这事就更加做不了了。所以不妨实际一点，你自己画几张草图，把网站要部署的内容写成文档，让做网站的人自己判断是不是简单。真的简单，我们不会瞎报价；倘若不简单，你自己心里也明白，拿着准备好的资料去货比三家，哪怕只是比比价，对行情自然也会越来越有数，或许就不会提出这种问题了吧。
从建站行业来说，把范围缩小到定制这个领域，那就把那些SaaS自助建站的先剔除。定制这种项目，是需要和客户一对一仔细对需求的；仅凭这点还不够，我经常还会帮客户分析他的竞争对手网站，给出自己的建议甚至是方案，怎样超越别人，让自己后做的网站能弯道超车。这背后的功夫又岂是几个“简单”的页面制作能涵盖的。 查看详细
先展示研究成果：
今天想研究一下CSS的 3D实现，但又不敢深入三角函数和线性代数的知识（多年前就已还给高数老师了），所以就浅浅地从translateX/translateY/translateZ这3个变换做一个立方体开始。这三个变换函数很简单，关键是要建立固定的坐标系，这样页面的元素就能通过这个坐标系获得立体感。
我的HTML结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="scene"> <!--方块--> <div class="cube"> <div class="cube-face cube-face-front">1</div> <div class="cube-face cube-face-right">2</div> <div class="cube-face cube-face-top">4</div> <div class="cube-face cube-face-left">3</div> <div class="cube-face cube-face-back">5</div> <div class="cube-face cube-face-bottom">6</div> </div> <!--坐标线--> <div class="line line-x"></div> <div class="line line-y"></div> <div class="line line-z"></div> </div> |