分类 建站

• 
  为什么网站加载速度总是那么不尽如人意呢？（网站优化篇） 那些年，但凡一得空，便会去逛逛公园、爬爬山，让那颗浑浊的心灵，能在这大自然中洗涤。 公园树荫下，总是有那么多人，他们或坐于石凳与好友畅聊，或是往那石桌上摆下棋盘，你总能遇到对手。 既然选择放空自己，不管是与好友们闲聊，抑或是棋逢对手，就不要把生活中的不如意或当下的困境说出来，因为这里并不是宣泄消极情绪的好地方。 然而，快节奏生活的当下，鲜有人会在公园逛那么一个下午了。 快节奏的生活，逐渐使人们失去了耐心，同时也让人变得很容易烦躁。 即便是当下人手一部智能手机（更有甚者多达好几部），也不愿花几秒钟来等待访问某个网站，页面却一直处在加载中。用户会毫无犹豫的关掉这个网站。 因为等待让人觉得烦躁，这便是时下快节奏的生活所导致的！ 用户评判一个应用（APP）、网站的体验效果好坏，其中很重要的一点便是，产品的响应速度是否能控制在用户接受的范围之内（除非你的应用或网站是知名的，如：阿里云、腾讯云等网站响应速度何止是慢。） 网站优化方案 无论是简单的企业门户网站，还是看似复杂的博客网站，它们总是由html、javascript、css、图片文件等构成的，而呈现在用户眼前，便是通过这些文件拼凑而来的一个页面。 提升服务器带宽 在你访问网站时，网站文件所在的服务器在接受到你的指令后，是要将服务器上相对应的html、javascript文件等响应给你，也就是浏览器请求这些资源（可以说从服务器下载这些资源）。 我们深知，但凡从网络上下载任何文件，它总是跟你的网速有关的，若你带宽是100M的话，那么下载那是很快。当然咯，网站所搭载的服务器带宽若不是很好，网站加载慢那是再所难免的！这便是网站优化的方案之一，关于这一块，是需要花费的成本的。 使用 CDN 有没有那么一种可能，那就是你把服务器的带宽提升上去了，可用户访问你的网站，依旧是页面处于正在加载中。那可能是浏览器访问你的网站，需要请求很多javascript、css文件等资源，虽然用户与你的网站服务器同属在国内，但不免由于地域的缘故。 为了解决用户在不同地域访问你的网站，能以用户所能承受的加载时间范围内，渲染出网站页面出来，那么，这样对用户来说，你的网站算是一个用户体验不错的网站。 我们既然知道了，导致网站加载慢的症结是javascript等资源，那么，我们可以将这些文件托管在距离用户较近区域的节点上，让用户在访问你的网站，不再是请求服务器的javascript等资源，而是从歫用户较近的节点上读取这些文件，从而使得用户所在的区域访问你的网站便快了。 没错，这便是内容分发（CDN）。它不单是在国内每个区域设有节点，还遍布全球，你可以把原先放在服务器上的javascript等文件，迁移到CDN上，这样一来，继而减轻了服务器的”压力“，又能让你的网站在用户眼前加载起来快如闪电。当然咯，这也需要你额外付出成本的！ 压缩静态资源 若你不想再额外花钱的话，那么，就要从javascript、css等文件大小上来考虑，相对于网络传输来讲，当然是文件小一些，它自然快于大文件的传输速度了。 虽然，市面上有公共CDN，但那也都是些知名的第三方library，自己的网站，总是离不开自定义的javascript、css等文件。 对于压缩方式可以选择，网上在线压缩，前提是你只定义了那么一两个javascript、css文件。 可若是你为你的网站自定义了好些个javascript、css，那么，在线压缩就不适合了，一来文件多了，处在起来还是比较麻烦的，二来文件一多，处理起这些繁杂的工作，总是让人很是烦躁。 既然在线压缩，处理多个文件，委实使人力不从心，那么，我们可以借助程序来实现文件压缩啊。 Gulp 压缩静态资源 至于gulp是什么呢？ https://www.gulpjs.com 介绍说它是自动化构建你的项目，减少你浪费的时间，从而创造出更大的价值。（虽然口气有点大） 首先，你的确保你的电脑是否安装了node.js，如果没有，那么可以去 https://nodejs.com 进行下载安装。安装nodejs还是比较简单的，一路Next。 若你的电脑已安装过nodejs的话，那么，你可以使用以下命令来检查，你电脑安装的nodejs版本。 node --version 在nodejs高版本，都会在你安装了nodejs之后，同时默认的安装了npm（用于管理nodejs的library，就像java的maven、gradle，PHP的composer，golang的module等一样），和npx，同样的话，可以使用以下命令来检查npm、npx的版本。 npm --version npx --version 随后，我们通过以下命令来全局安装gulp。 npm install --global gulp-cli 创建项目 我们可以在一个空文件下，再次新建一个空文件夹，而后通过npm init来初始化项目，这条命令能为我们在当前文件夹下自动生成一个package.json文件。 npm init 之后我们再项目安装gulp依赖，来为项目实现自动化构建。 npm install --save-dev gulp 创建 gulpfile.js文件来压缩静态资源 我们在项目根路径下，新建一个名为gulpfile的javascript文件，文件名必须叫gulpfile这个名称，若你问我为什么？那我只能回答你，那是因为gulp规定的，也就是gulp-cli会读取这个名为gulpfile的javascript文件，若你改成了其它名称，那么gulp-cli是无法找到名为gulpfile`文件的，那么也就无法进行下去了。 在编写gulpfile.js文件之前，我们的项目需要安装几个依赖，它们适用于压缩javascript、css文件的。 npm install --save-dev gulp-uglify npm install --save-dev gulp-minify-css 安装好library后，那么，我们可以对gulpfile.js进行编辑了。 const { src, dest, series } = require('gulp'); const uglify = require('gulp-uglify'); const minifyCss = require("gulp-minify-css"); //在 gulp 里 这就是一个任务 function miniCss () { return src('src/css/*.

  •   2024-09-14

     [建站]
• 
  个人站点迁移之gitlab.com pages 绑定自定义域名 前言概要 能浏览本文的你，想必是在gitlab.com上创建了Repository（仓库），并将本地代码push（推送）到该Repository（仓库）中了，开启了Pages服务，然而，gitlab.com并不会像github.com那样，给你生成以username.gitlab.io这样的子域名（二级域名/subdomain），而是生成了以你的的Repository（仓库）名称（比如我创建的Repository名称是qiucode.gitlab.io）加上-你的username，再加上一串由字母、数字组成的字符串，像是UUID一般的字符串，最后则拼接上gitlab.io,最后便如我的这般：https://qiucode-gitlab-io-qiucode-aee06712da2e10b24ab5079f6b5a4a09c943b.gitlab.io/ 这也就是我在上一篇 不要你掏腰包，就能搭建个人网站之 gitlab.com Pages 托管服务 所遗留的问题，之所以会产生那么一长串的domain（子域名），那是由于gitlab.com给你生成URL时，默认是开启了unique domain（唯一域），这也是我查看了官方文档方才知道的，其实，稍微注意一下，在Pages当前页滚动页面，就会看到那个unique domain（唯一域）的开关了。 既然知道了gitlab.com默认开启了unique domain（唯一域），那么，我们只要把它关闭了，不就可以了嘛！是的，那么在当前Repository（仓库）左侧选项中找到Deploy（部署）中的子选项Pages，会看到下方settings属性，有个checkbox（复选框），它就是是否Use unique domain（使用唯一域）的开关，我们只需点击它，checkbox也就处于未选中（Uncheck）状态，点击底下的save changes（保存更改）就可以了。 配置自定义域名 如果你不想花钱去购买域名，而使用username.gitlab.iol来作为你的站点的域名，是可以的，没有任何毛病，毕竟很多博主、站长也都是这么干的。既省去了购买域名的费用（当然也有免费的二级域名，但那还不如使用username.gitlab.io呢！），又省去了SSL的困惑。这才是真正意义上的不要你掏腰包，就能搭建一个个人网站的最终完结篇。 可有些博主、站长（比如： qiucode.cn）还是希望能自定义域名。 要想自定义域名，还是在当前Repository中找到Deploy，选择它的子选项Pages 滚动页面找到Domain属性，点击右侧的New domain（新域名/添加新的域名） 当你添加完了域名后，来到了Pages Domain新页面，它便是要求你在你的域名 DNS 添加下列Record（记录），以此来验证你添加的域名所有权。 可以看出，我们需要在域名 DNS添加两条记录，然而，第一条记录中ALIAS（别名），却没在我的域名 DNS选项里，你说这，是不是在为难我啊！ 这么着吧，还是看官方文档，看看该如何配置自定义域名。 官方文档关于如何配置自定义域名：https://docs.gitlab.com/ee/user/project/pages/custom_domains_ssl_tls_certification/index.html 。 按官方文档来看，分为三种情况： root domain（根域名/主域名，如： qiucode.cn） DNS添加一条A记录并指向gitlab.com Pages服务器IP地址（gitlab.com上的IP是35.185.44.232）。 再添加一条TXT记录用来验证你的域名所有权。 主机记录 记录类型 记录值 @ A 35.185.44.232 _gitlab-pages-verification-code.qiucode.cn TXT gitlab-pages-verification-code=00112233445566778899aabbccddeeff subdomain（子域名：如：lab.qiucode.cn） DNS添加一条ALIAS 或 CNAME 记录，并指向Pages服务器 再添加一条TXT记录用来验证你的域名所有权。 主机记录 记录类型 记录值 lab.qiucode.cn ALIAS/CNAME qiucode.gitlab.io _gitlab-pages-verification-code.lab.qiucode.cn TXT gitlab-pages-verification-code=00112233445566778899aabbccddeeff 可按照官方文档来配置自定义域名，那个Verification status（验证状态）却一直都是Unverified，当然你在域名DNS添加纪录之后，得点击旁边的刷新按钮，其实它是将整个页面进行刷新，而不是页面局部更新数据。以至于修改DNS主机记录： 主机记录 记录类型 记录值 lab.qiucode.cn ALIAS / CNAME qiucode.

  •   2024-08-12

     [建站]
• 
  不要你掏腰包，就能搭建个人网站之 gitlab.com Pages 托管服务 当你看到文章标题时，不会还以为我实在忽悠人吧！也难怪，这是我们身处的环境所造就的，这一点我倒是可以理解，毕竟，我们身边总是充斥着以免费、不要你一分钱……为噱头的各种声音，贪小便宜是人的天性，殊不知，他们因贪这小小地便宜，反倒是损失了更多。 人们在上当受骗了首次，也就对身边的“免费”东西不再感冒了。只有那么少部分人知晓这世上是不会有免费的午餐、天上也不会无缘无故的掉馅饼，倘若真掉馅饼了，并且还砸中了你，那是行骗之人瞄准了你的口袋而不去理会这些所谓的“免费”。 要是在互联网早期，你说，“不用你掏腰包，就可以搭建一个专属的个人网站。”那么，在别人眼中，此时的你就是个骗子。 而到了云计算兴起后，你再说同样的话，这时便有少部分人相信了。 可以参考：其实，低成本甚至免费的，也是可以搭建个人网站的哦！ 为何选择 gitlab.com pages 服务呢？ 但凡是代码托管平台，它都提供pages服务，如果没有，那它就是阉割版的代码托管平台。 享誉海内外知名的github.com、提供开源版和在线的gitlab.com、……等众多海外声名显赫的代码托管平台，都提供了pages 服务。 当然咯，国内也是有很多代码托管平台，诸如：gitee.com pages 已经光荣下线了，请不要试图在上面托管任何静态网站了！！！、coding.net pages 服务会在页面停留 5s（5秒），像是在检测你的静态站点、以及一些不知名小众的托管平台，也都提供了pages 服务，但是，这些国内托管平台对于个人想要开启pages是有要求（条件）的。 若不是github.com在国内的访问速度限制，以及时常出现该网站无法访问的种种原因，想必国内的coder（码农或程序员）是不会将站点托管在国内的coding.net等其他不知名小众托管平台上的，gitee.com就别提了，现在可以把gitee.com称为阉割版的托管平台了，因为它不再提供pages了。 你以为将站点托管在coding.net,你就会觉得在国内访问速度提升了嘛？你是否觉得它会比github.com托管站点访问来的快？若你是这么觉得，那你认为错了，正所谓：你以为的以为不是你的以为。coding.net pages 服务会在你托管在其上的站点提留5秒钟，这反倒没有github.com快了。 国内的gitee.com骤然下线了pages服务，使得众多托管在gitee.com上的众多站长纷纷迁往它处（github.com、gitlab.com等海外托管平台），而托管在国内的coding.net上，迟早也是会忍受不了那莫名其妙的5秒钟页面空白提留检测，改用其他托管平台的。 或许有人跳起脚来，指着我的鼻子，骂道，“你为何老是贬低国内互联网产品呢？而一味地夸耀海外的互联网产品呢？照这样下去，国内的互联网行业还这么能兴起呢？” “在你说这些话之前，烦请你在电子设备中使用浏览器访问国内的gitee.com,看看它的pages服务是不是下线了，以及coding.net是不是有在页面提留5秒中，还有些国内小众托管平台，如CSDN也有托管平台，它也提供了pages，对于个人来讲，是有条件限制的。” 对于国内的这些托管平台，gitee.com可谓是坐上了国内托管平台的“第一把交椅”，然而，它却没有任何形式的通知托管在其上的众多站长，以至于很多站长都蒙在鼓里，也只有在更新文章，推送到gitee.com上，方才知晓，自己托管在gitee.com上的站点出现了Timeout；coding.net给每个托管在它上面的站点停留 5 秒钟的时间，以此来检查你的站点；国内数一数二的托管平台都有这样或那样的限制，或者干脆下线了，那么，国内那些小众的、初出茅庐的托管平台岂不是对个人想要在该平台开启pages有了更多严苛`的条件了。 gittlab.com 创建 Repository（仓库） 在创建Repository之前，你得为你的gitlab.com配置好SSH Key，以便Repository的pull（拉取）和push（推送），至于该如何配置，可参考：国内 gitee.com Pages 下线了，致使众多站长纷纷改用其他托管平台 或在 CSDN上的 国内 gitee.com Pages 下线了，致使众多站长纷纷改用 github、gitlab Pages 托管平台 。 登陆gitlab.com官网，在左上角，点击账户头像旁边+按钮，进行创建一个新的project或repository。 随后，我们便在右侧看到，可以创建project或repository的各种“款式”。 我这里选择Create blank project（创建一个空白/白板项目）。 这里的项目名称取为username.gitlab.io是方便公网访问的。 假设project name为blog，那么你的project URL为：https://gitlab.com/username/blog/ 。一旦这个project启用了GitLab pages，并构建了站点，站点访问url为：https://uesrname.gitlab.io/blog/ 。如果你要创建一个user page，假设此时project name为qiucode.gitlab.io(qiucode为你的Gitlab username)，则你的project URL为：https://gitlab.com/qiucode/qiucode.gitlab.io 。一旦这个project启用了GitLab pages，并构建了站点，站点访问url为：https://qiucode.gitlab.io。 使用以下命令将创建好的project克隆到本地。 git clone git@gitlab.com:username/qiucode.gitlab.io.git 当然咯，你要在gitlab.

  •   2024-08-11

     [建站]
• 
  国内 gitee.com Pages 下线了，致使众多站长纷纷改用其他托管平台 作为一位IT或coder（码农、程序员），在日常工作中，多多少少都会有技术知识的积累（生产环境中所遇到的问题【亦可称为是坑】）。俗话说得好，好记性抵不过烂笔头。不管是前沿技术的研习后的心得，还是工作中所遇到的问题，亟需将这些笔记留存下来，为的是以备后续查看（未来有可能遇到类似的坑，也好该如何下手，以不至于手忙脚乱的），当然咯，在方便自己的同时，也分享给他人。 那既然只是为了留存笔记而已，又何必去搭建一个个人博客网站呢？国内在线攥写博客的平台多如牛毛，既“省时”又“省力”，又何必非要去为难自己来搭建一个专属于自己的个人博客网站呢？诸如CSDN、知乎、博客园、掘金、简书……，攥写文章都是免费的（如果这都不免费，那恐怕这些平台都要下线了），又何必花钱购买云服务器/VPS、域名，网站你可以自己编写（省去了这部分成本），或是可以使用github pages、gitee.com pages来免费托管静态网站，但至少比在大平台攥写文章时，多了一步，那是将写好的文章push（推送）到你的远程仓库，那不成大平台免费的，它不香么？ 回答上述“三个何必” 既然只是工作中的知识笔记，或是前沿技术的研习心得，国内有大把的博客、社区以供攥写，而缘何非得去搭建一个个人博客呢？的确，第三方平台有诸多的优点，但它的弊端也是显而易见的，就拿我2022-12-08在CSDN攥写的一篇关于如何注册 ChatGPT的文章，过了几个月后，居然被CSDN批注为未通过审核。 当我看到CSDN发来的站内通知，顿时懵圈了，不禁发问，“这是怎么回事？CSDN居然还有这波操作，着实令人费解啊！” 这就是你在第三方平台上攥写文章的困境，当然咯，你写的文章符合该平台的规则，那么一切将是风平浪静，反之，平台随时可以以审核未通过之借口，使得你热心分享知识给他人，却无形之中让人泼了一脚盆洗脚水，从头凉到脚。故而，搭建一个个人博客势在必行，而大三方平台照样会更新文章，而它只是作为更好地分享知识给他人，诸如 花了不到1块5，玩了下全网最火的ChatGPT 。 有人说，“你平常就写写知识笔记、以及你工作所遇到的问题解决方案，你就非得去花钱折腾出一个个人网站出来吗？难不成现成的大平台它不香吗？” “大平台它香，但也让瞬间挠着头发，在房间里踱来踱去。而现如今搭建一个人网站也可以是低成本，甚至免费。”可以参考： 其实，低成本甚至免费的，也是可以搭建个人网站的哦！ 。 github、gitlab、gitee（已经下线了）、coding.net（要结合腾讯云）等国内外知名代码托管平台，都有提供Pages服务，也就是可以托管你的静态资源，以此来搭建一个静态网站，然而，每次在本地编译生成好的静态资源 推送（push）到这些托管平台总是比较麻烦的，毕竟，这相较于在第三方平台上攥写文章，费力了很多。 对于每次更新文章，都要在本地编译生成静态资源，总让觉得很是枯燥。去这些托管平台看看有没有属于这套程序的CI/CD（持续集成）相关文档。 gitee.io（gitee pages）终究还是下线了 据将站点托管在gitee pages的站长称，2024-05-01假期回岗，却发现自己的站点出现了Timeout，一时间，他很是不解，不应该啊！只是托管个静态资源，既然也出现了Timeout。 随即，他去gitee.com咨询官方客服，到底是出现了什么问题？回复他的是，gitee pages光荣下线了。（这是我预料之中的，我也并不是看不好国内这些互联网平台） 当然咯，有些站长还是不死心，竟然跑到gitee官方账号下提issue，很显然，这个issue官方是不会回复的，犹如一封信，内容写好了，却在最后忘记把寄往何处的地址写上，最终信是无法到达彼处的，可谓是遥遥无期。 当初，那些站长之所以会选择gitee pages来建站，也是有原因的，毕竟github pages在国内访问速度，，真是一言难尽啊，如果光是访问速度慢些，到还是勉强接受，不幸的是，github pages时常在国内出现了无法访问该网站的情形，这还让你的站点怎么分享知识给他人呢？ 介于github pages在国内访问速度慢，还时常无法打开的缘故，很多站长终究还是勉为其难地选择了国内的托管平台（诸如：gitee.com pages、coding.net pages）。 gitlab.com pages托管站点 不同于github pages，gitlab pages是通过CI/CD来实现pages，也就是他没有像github那样的纯静态托管机制。当然咯，github也是可以通过CI/CD来实现站点的托管的。 要想在gitlab.com pages上托管站点，那么，毫无疑问的是，你得登陆 gitlab.com或注册一个新的gitlab.com账号（可以直接使用你的github账号），这里就不赘述gitlab.com账号的注册了。 在登陆gitlab.聪明·后，我们着手创建一个仓库（Repository`）,名称随你意，只要你欢喜。 通常，我们都是使用SSH来远程操作的，那么，就需要配置gitlab的SSH Key，关于key的配置，之前，我也是有相应的文章来介绍配置github和gitee的SSH Key，如果不是很清楚的话，在这里，我将再次讲解如何配置gitlab SSH Key。 我们本地使用以下命令来生成SSH公私钥. ssh-keygen -t rsa -f ~/.ssh/gitlab.com/id_rsa -c "邮箱地址" # -f SSH私钥文件地址 随后，我们将生成好的公钥复制到gitlab.com上，可以使用以下命令。 cat 以 .pub 后缀的文件 当你git clone时，却出错了。 然而，你以为这样就好了嘛，可gitlab却还不行，还需再生成SSH 公私钥的文件位置下，编辑config文件，加入以下内容。 # GitLab.com Host gitlab.

  •   2024-08-10

     [建站]
• 
  canvas绘制文本时，该如何处理首行缩进、自动换行、多内容以省略号结束、竖排的呢？ 实现如标题所示的这些文本效果，在css看来，不就是一两行css属性。然而，对于canvas来讲，要想呈现这样的文字样式，就没css那么轻松简便了。 既然如此，那为何还要使用对文本支持度不友好的canvas来绘制文字呢？而不是采用对文本天然支持的css呢？ canvas 绘制文本的场景 在给为何弃对文本天然支持的 css而不用，拣起了文本支持度不友好的canvas的答复之时。不妨先来看看，究竟是在什么样的场景下，需要用到canvas去绘制文本呢？ 常逛商场的，总会不时地看到一些商家为了吸引客流而制作出的一张精美海报；再看艺术展前，也总能在大门看到本次参展的“艺术家”们最为得意的艺术及简介，所绘制的一张海报；去电影院观看的，大都是被该片前期在各大商场及公共场合宣传的那张海报而吸引来的。…… 是咯，照这样看来，海报的确可以作为事物的重要途径，虽然海报承载的内容有限，但一张足够优美的海报，总是能把人们的目光给吸引过来的，好比去书店买书，总是会翻到书的背面。 甭管对前沿技术的学习，抑或是为了解决问题而去搜寻资料，你总免不了在各大博客（如：秋码记录 ）、论坛、社区以及生活类情感博客等网站游离，那些博文、贴文等总能解决你的燃眉之急的问题，而你也会在兴奋之余随手将该文分享给朋友。 很显然，文章分享功能可以说是各大网站的基础功能，网站运营者也热衷于你把文章分享出去，从而悄无声息的向你朋友推荐了该网站。所以，网站运营者是绝不会错失这样一个向用户宣传网站媒介之一的机会。然而，社会分享组件（第三方分享：诸如 QQ、微信、微薄……）并不能很好的推介网站，基于这种状况，一张既有文章的概要，又有网站的简介的海报便应运而生了。（秋码记录 便能为文章生成一张精美的海报）。 网站生成海报的几种方案 无论是线下的，还是线上的海报，它都是一张图。对于线下，想要制作出一张海报，只需将事先做好的海报图打印出来即可，但就线上而言，网站页面结构主要由html、css、javascript构成，而文章内容及文章封面图都是不一样的，那么，在这样的情况下，又该如何为文章生成一张海报呢？ 既然知道了，海报是一张图，而文章页面结构又是html，那么只需将html转变成图不就成了吗？ 没错，要想为文章生成海报，只需把html转成图片即可，而且还有开源的第三方实现。 1、html2canvas.js：从其命名上来看，一眼便能知晓，它是将页面的html转成canvas。这也是众多网站生成海报的首选之一。它的便捷在于你想要为海报生成什么款式的，你只需像修改你网站那样去修改就好。（目前 秋码记录 是采用这种方式来为文章生成海报） 2、dom-to-image.js:与html2canvas.js大致差不多。 3、canvas：直接使用canvas绘制而生成的海报，基于wordpress的很多主题也都使用它来生成海报。（ 秋码记录 即将采用这种方案） canvas绘制文本 在使用canvas绘制文本之前，有必要了解下什么是canvas？ 其实，canvas也是作为html标签而存在于html结构中，而它常常被用来绘制图形及图形动画。 在现实生活中，艺术家想要画出一张画，有两样东西是必不可少的——素描纸（写生纸）、HB铅笔。 而在canvas中，同样需要设置画布的大小——width、height。 canvas绘制文本API CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); text ： text是需要绘制的文本。 x ： x是文本绘制的水平参考点坐标。随着CanvasRenderingContext2D.textAlign的设置不同，x的坐标位置也不同。可以表示这段文字内容左侧坐标，或水平中心坐标，或右侧坐标。 y ： y是文本绘制的垂直参考点坐标。随着CanvasRenderingContext2D.textBaseline的设置不同，y的坐标位置也不同。支持多种基线类型（CSS中也有对应概念），MDN上有一张图可以很好地表示文本基线和文本垂直位置的关系。 **maxWidth**： maxWidth表示文本内容占据的最大宽度。这里的maxWidth概念和CSS中的max-width差别很大，其最终的文本表现是：当文本占据宽度超过maxWidth的后，所有的文本自动变窄以适应这个最大宽度限制。表现类似这样： canvas 如何实现文本首行缩进、自动换行、内容过多省略号呢？ 虽然到目前为止，canvas API中还并没有提供文本首行、自动换行、内容过多以省略号结束等的支持，但还是可以通过计算X Y偏移量来实现的。 首行缩进 对于文本首行缩进，也就是在首行空出相对应的字符个数的空白位置，从而使得与其它行在视觉上达到了缩进的效果。 那么，canvas要想绘制出如css那样的首行缩进的文本样式效果，只需将X水平向右偏移相应的像素（pixel）即可。 内容过多以省略号结尾 无论是海报，还是书本的封面，总不肯多写几个字，倒像是一个惜字如命的家伙，生怕自己写多了，给自个儿带来了寿命减少几秒钟的担忧。那么，这时候，省略号这时候便闪亮登场了，很好地诠释着这一足够吸引用户眼球的重要任务。 而在canvas绘制文本时，只需判断是否绘制到文本的最后，若是，便在最后给原有文本追加上...即可。 自动换行 相对于首行缩进来讲，canvas要想实现文本自动换行，不单单只是计算X水平偏移量那么简单咯！ 而还要计算Y纵向（垂直）偏移量，为了让你能够理解Y纵向偏移，我举个通俗的例子，我们平时不管是拿笔在纸上写字，还是在电子设备上敲击着文字，文本内容无不是由上而下、自上而下、从上而下的顺序呈现在我们的面前。由于纸或电子设备的宽度所限制，文本不得不另起一行，而这另起一行与之前的一行，就存在着纵向关系——另起一行是在之前的一行的下面（下方/ under），而之前的一行则就在另起一行的上方（上面 / upper）。 在实现自动换行这一效果时，我们应考虑到canvas该如何知道绘制当前在哪个位置（X水平位置）确需另起一行呢？这一点很重要，也是实现canvas自动换行的核心所在。 还是拿我们在纸张上写字或在电子设备上敲击文本时，我们知道换行（那是由于在纸张写的字大小差不多，一行只能容纳这么多文字）或电子设备设定好了字体大小，以此来推算出你写到哪个文字时，让你另起一行。 那么，canvas实现自动换行可以通过计算文字字体大小`及纵向（Y）偏移量的。 canvas提供了CanvasRenderingContext2D.measureText(text)这个API，它可以用来计算字符的宽度。 canvas 是以左上角为原点，也就是说，X轴 水平向右是`正数`，反之亦然；Y 轴纵向则是以向下为`正数`，反向则负。 要让canvas知道该在哪个位置自动换行，只需将文本的每个字符宽度进行累加，判断总字符宽度是否达到了canvas所设定的画布宽度，若是，则另起一行继续绘制剩余的文本字符，当然咯，在另起一行时，纵向 Y偏移量是要往下移动。

  •   2024-08-03

     [前端 建站]
• 
  其实，低成本甚至免费的，也是可以搭建个人网站的哦！ 在日新月异的互联网浪潮下，想要搭建一个网站，已不再需要花费高昂的IDC 服务器费用以及人员维护等其他费用（相对于公有云来讲）。 身为一名IT、Coder（码农或程序员），对于搭建一个网站的过程，是在清楚不过的了。那就是搭建网站所需的三要素（三兄弟）——服务器、一套程序、域名。 云计算的崛起，致使越来越多的人上云体验了一把，与此同时，个人网站如雨后春笋般拔地而起，网站类型可谓是五花八门。（当然咯，云计算没出现之前，也是有人搭建个人网站，只是那高昂的IDC服务器，并不是每个人都愿意花那高昂的IDC服务器费）。 虽然云计算的云服务器对IDC服务器造成了巨大冲击，但摆在你我眼前的云服务器费用，着实不低啊！（国内各大云厂商为了抢占用户，不惜打起了价格仗，你我索性从中薅起了羊毛，虽然你我深知这羊毛终究是出自羊身上的）。 服务器（云服务器） 想要搭建一个网站，服务器（云服务器）是少不了的。毕竟网站也是程序编写出来的，而程序是需要编译 、运行的，很显然，服务器正扮演着运行这套网站程序的角色。 你我都知道，在云计算之前，想要搭建一个网站，光是租用IDC服务器的费用，就可能让你望而却步了。 可当云计算的到来，个人拥有一个网站，已不再是那么遥不可及（虽然，在这之前，个人也是可以搭建起网站的），毕竟，云服务器费用相比于IDC服务器费用不知便宜了多少（至少在搭建网站的预算降低），促使大多数人蜂拥而上云。 国内的云厂商，诸如，阿里云、腾讯云、华为云、京东云、百度云等（还有很多没列出来的小众云厂商），对新用户都有优惠活动（毕竟，他们为了抢用户，豁出去了），反之，老用户就享受不了那优惠活动了，虽然有吧！但显然优惠力度不是很大。 也正是由于国内各大云厂商领进新用户，而在该云厂商平台但凡购买了新用户优惠活动的云计算产品（如：云服务器）之后，你的身份自然而然地由新用户转变成老用户。可当你云服务器到期时（云服务器到期是指：云计算产品分 按时计费、按量计费，而云服务器是属于按时计费，它又细分为按月、按年），想要续费，那费用瞬间翻了好几倍啊！你一度怀疑，同等配置的云产品为什么在续费时会如此高昂呢？该不会是云厂商想要从新用户变为老用户身份的你，补足当初以优惠力度让入驻该云厂商平台的款项呢？ 这也就是为什么，你常常点开一个个人网站（个人博客网站）时，不是出现了网站正在维护中……，便是该网站无法访问的情形。无非是数据迁移到新的服务器上去，或是不再为服务器续费，也不去其他新的云厂商购买云服务器了。 云服务器续费让人望而兴叹，纵使在其他云计算厂商以新用户的优惠价格买到了心仪的云服务器，将网站数据迁移到新服务器上，使得网站得以续命生存下去，虽然这不失为一种办法（薅云厂商的羊毛）。 但绝大多数人的做法是，云服务器到期了，便不再续费了（当然咯，这其中就包括 秋码记录），也没到新的云计算厂商购买新云服务器。而是去购买价格低廉的VPS（虚拟主机）。 由于VPS配置不高，空间不大等，在价格方面，足以碾压云服务器。故而成了很多站长的“首选”，从而解决了站长在云服务器续费与不续费之间、不续费与到其他云计算厂商购买新云服务器之间左右摇摆的困惑。（国内VPS有 帮瓦工……，国外倒是有很多，Hosting、freehost，还可以申请免费的VPS）。 虚拟主机的低配置、小空间，迫使了它只能运载些体量不是很大的网站程序（诸如个人博客、论坛、社区等）。 serverless 谈到serverless或许你会陌生，可一讲到github pages，想必你是知道的了。（github pages可以托管你的静态网站，如 秋码记录 )。 serverless相对于服务器而言，它便是无需服务器。 纵使github在国内访问速度不佳，也鲜有人去使用国内gitee pages（gitee.com提供的pages服务）、coding.net pages(腾讯旗下的代码托管平台)等，这其中的原因，不用我说，你自然也会懂得，这就好比，家楼下有生鲜超市，可你却不愿在那里买，宁愿去十公里外的大型商场买（这里包括但不限于顾客的口碑、以及以次充好等小伎俩，蒙骗顾客）。 网站程序 无论你是买了云服务器，还是选择了低廉的VPS，亦或是采用了serverless这种模式，搭建网站的程序你总该要有的吧（这时你迫不及待的大声嚷道：”谁说搭建网站，就非得需要程序了，一键云建站了解下，不但不需要什么网站程序，就连部署网站的运维人员也省了……“。这里我不禁打断你的话，指出了其中要害，”没错，一键云建站确实给你带来了便利，但你有没去考察过，使用云模板一键建站的都是些企业门户网站，个人博客、论坛、社区是不能用这个，第一，模板风格老套、重叠，第二，在费用方面觉不亚于云服务器“） 也不是说云模板建站有什么不好，可千篇一律的模板终将不适合来搭建个人博客、论坛、社区网站，虽说这些网站也在套用同一个程序，而使得网站又是千人一面，但他们却都不去使用云模板一键建站（其中缘由你该是懂得，若你不懂，执意要云模板一键建站，那就去试一试吧，也只有在试过了，你才会长大、明白）。或许你会问，”为什么你知道这些呢？你是不是使用过云模板一键建站呢？“在这里，我可以很肯定的对你说，”有些事情，并不是需要去试验才会明白的，而是靠理性的判断，以及绝大多数人为何不去使用它的思虑“。 即便网上充斥着大量的个人博客、论坛、社区等的开源程序，然而身为Coder（码农或程序员）的你，总是喜欢使用自己常用的编程语言（program language）从头开始编写，或是在开源程序的基础上进行二次开发，增加些自己独特的想法。 网站程序从头开始编写，不单单是Coder为了在他人面前炫技外，更重要的是Coder想把编程知识巩固起来。 而那些非Coder的外行人，是不会什么编程的，也就谈不上什么从头开始编写网站程序了，他们大多去找些既好看又开源的主题（theme）来构建自己的网站。 闻名于海内外的wordpress就是一个强大的开源程序，使用它可以任何形式的网站，如：电商网站、视频网站、企业门户、新闻网站、个人博客、论坛、社区等，主要还是取决于主题（theme）的搭配。 除了大名鼎鼎的wordpress外，还有国内的typecho、Zblog等，都是可以搭配主题（theme)。 无独有偶，秋码记录 则是使用海外知名的Hugo构建，而主题（theme）则是使用了开源的 Hugo-theme-kiwi ,托管于github pages上。 域名 其实，搭建一个网站，域名并不是必选项，那是因为可以使用ip进行访问，可一大推数字总没有 qiucode.cn 来的好记吧，这使得域名作为公网ip的别名而存在。 在上面讲诉了服务器、网站程序都有免费方案，那么域名是否也有呢？没错，域名也是有的，但都是些二级域名，诸如海外的js.org、eu.org等（如你网站想叫qiucode，那么免费二级域名便是qiucode.js.org`qiucode.eu.org`)。 国内免费的二级域名也是有的，同样也是很少人去使用的，正如serverless一样，人们宁愿去使用github pages，也不肯去国内那些serverless上。 也不是刻意的贬低国内这些互联网，而是他们的那些做法寒了人们的心。就拿百度搜索来说吧，先前我可是百度搜索的忠实用户啊！然而现在却再也不用百度搜索了，改用必应。（其中原有不细说，你总该是明白的）。 综上所诉，想要搭建一个网站，低成本甚至免费的方案都有的。 低成本方案一：虚主机（VPS) + 开源程序 + 免费的二级域名，费用用在了租用虚拟主机（VPS)上。 低成本方案二：虚拟主机（VPS）+ 开源程序 + 顶级域名，费用花在了虚拟主机（VPS）和购买域名上。 低成本方案三： serverless + 开源程序 + 顶级域名，费用花在了购买顶级域名上（秋码记录 就是选用这个方案）。

  •   2024-07-26

     [建站]