独书先生 Menu

WordPress入门零基础搭建网站：Elementor教程操作步骤

Elementor是目前最强大的页面构建器。完全拖放式可视化编辑，是WordPress中最快，最直观的编辑器。只需拖放即可自定义，对于新手非常友好，非常易于使用和掌握。无需编码; 生成的页面代码紧凑且针对每个设备进行了优化，Elementor有300多种精美的模板，从几十个小部件中进行选择，以创建你需要的任何内容：按钮，标题，表格，只要你能想到的，没有什么是你不能做的。

10月 27, 2021
分类:Web工具

很多人认为建站太难了，又要懂代码、网页设计，数据库，又要配置服务器等等，无从下手。那怎么办？曾经的不可能，现在可以轻易的去现实它，这里教大家如何零基础用页面构建器插件 Elementor主题（超轻框架） ，快速学会用 WordPress 建立你理想中的网站。

Elementor 页面编辑器

Elementor是目前最强大的页面构建器。完全拖放式可视化编辑，是WordPress中最快，最直观的编辑器。只需拖放即可自定义，对于新手非常友好，非常易于使用和掌握。无需编码; 生成的页面代码紧凑且针对每个设备进行了优化，Elementor有300多种精美的模板，从几十个小部件中进行选择，以创建你需要的任何内容：按钮，标题，表格，只要你能想到的，没有什么是你不能做的。

安装 Elementor 插件

在WordPress仪表板中，导航到“  插件”>“安装插件”。搜索Elementor并单击“  安装”。安装Elementor后，单击“  激活”。

免费版的功能不全，本教程是按专业版来操作，Elementor Pro才能充分发挥Elementor的价值。访问Elementor并购买该插件的专业版，然后以与上述相同的方式安装和激活它。安装Elementor Pro后，再通过转到的WordPress的仪表板并导航到Elementor>许可证来输入许可证。

 

创建网站页面

前面我们已经介绍了基本准备工作设置，并且你已准备好所有内容，现在我们开始创建页面。在本教程中，我们将构建一个简单的网站，其中包含主页，菜单页面，关于页面和联系我们页面。我们将在本教程的其余部分使用Elementor Pro  模板导入，让我们开始吧。

使用Elementor创建你的主页

安装插件后，现在我们开始创建主页。转到“页面”选项，然后单击“新建页面”。

我们把页面标题为“主页”，然后单击“保存草稿”按钮。一定要养成不断保存工作的习惯。如果发生紧急情况，我们可以恢复，这可以减少失去劳动成果的机会。

在标题下，单击“使用Elementor编辑”按钮以打开插件的编辑器。

导入Elementor模板

刚开始使用Elementor的最简单的方法就是套用模板库里的模板。这样你就可以找出这个效果是如何设置的并探索该工具在实时环境中可以执行的操作。

单击位于屏幕中心附近的“添加模板”按钮。

Elementor有多种模板可供选择。有免费的和付费Pro版本的插件。找到你喜欢的布局，然后单击“插入”按钮。

更改页面布局

将鼠标悬停在模板上时，你会看到一个浅蓝色控制面板。中间图标是该部分的编辑器。单击此图标左侧面板视图出现，编辑模板布局。布局下面可以看到内容宽度。单击将布局更改为全宽。

更改页面的内容

你可以开始自定义页面的内容。这可以通过插入各种工具来完成。要编辑页面的任何元素，只需单击它们，左侧面板将更改为该特定部分的编辑器。

你可以更改字体，颜色，大小甚至每个标题标签在页面上的显示方式。

更改背景图像

另一个重要的部分是自定义背景图像。按照自己的意图来更改背景。

返回“编辑部分”屏幕，然后单击“样式”。

删除那里的图像后，选择一个你想要的图像。

在更改背景时，有多个选项。在Elementor中背景可以使用渐变，和视频内容。

更改字体颜色

如果要更改页面的字体颜色，单击要更改的元素，然后单击“样式”选项卡。从这里，你可以使用颜色选择器修改文本颜色，或者输入十六进制代码（如果有）。还可以访问各种字体供你选择。

选择字体外观时，最好不要包含太多不同颜色设置。过多的色往往会分散注意力，并可能导致访客几乎立即离开。

完成更改后，单击左下角的“保存”按钮。

在Elementor保存页面后，单击左下角的的“全局设置”选项。

将状态下拉菜单切换为“已发布”。

单击左上角的“菜单”图标退出到仪表板。

将页面设置为你网站的主页

现在页面已创建并发布，是时候将其设置为主页了。转到WordPress的“设置”菜单，然后单击“阅读”。

在“首页显示”选项下，你将看到一个显示静态页面的单选按钮。这告诉WordPress你要使用特定页面作为你网站的主页。单击“静态页面”旁边的单选按钮。

现在可以更改首页和帖子页面选项。现在，单击下拉窗口，然后单击刚才创建的“主页”页面。

拉到设置页面的底部，然后单击“保存更改”按钮。

现在我们完成了在Elementor中创建主页。

创建其余的网站页面

接下来我们用同样的方法创建“关于我们”或“联系我们”页面。

自定义你的网站

上面我们在讲创建主页时有讲到自定义，下面我们以另一个模板做一个补充。

编辑区域部分

当你将鼠标悬停在某个区域部分上时，你会看到一个蓝色边框，其中包含一个句柄，可让你编辑该部分，添加新区域部分或完全删除该区域页面。>你也可以从那里右键单击手柄和访问区域控件，如下面的屏幕截图所示。

单击+图标可以在现有区域上方添加新部分。然后，你必须单击粉红色+或文件夹图标以创建部分的结构或选择预制模板。

编辑内部部分小部件或列元素

以类似的方式，你可以单击灰色边框和相应的手柄来编辑内部部分。您可以修改列的宽度并更改列之间的间距。右键单击句柄，可以添加更多列，复制现有列，删除它们等。

编辑小部件

最后，你可以通过单击窗口小部件句柄中的铅笔图标或右键单击它来编辑现有窗口小部件。你可以更改它的内容以及访问样式控件，复制窗口小部件，删除它们等。

还可以通过从屏幕左侧拖动它们并将它们放到页面上来添加新的小部件。

自定义颜色

你可能最想要做的自定义是调整模板的颜色。调整为符合你的业务或品牌颜色，并使用自己的风格个性化模板。你可以在全局级别和单个窗口小部件级别修改颜色。在全局级别编辑颜色意味着你使用Elementor创建的任何新页面都将继承这些样式，因此你只需创建结构并输入内容即可。要修改全局颜色设置，请单击页面编辑屏幕上的左汉堡菜单。然后，单击“样式”菜单下的“默认颜色”链接。你也可以通过输入自己的十六进制颜色代码来调整默认颜色方案，或者如果你没有自己的颜色方案，则可以应用预先制定的颜色方案。可以通过单独自定义每个窗口小部件来覆盖全局样式设置。要自定义单个窗口小部件的颜色，请选择要设置样式的窗口小部件，然后单击小部件编辑屏幕上的“样式”选项卡

自定义排版

与颜色类似，你可以在全局级别和单个窗口小部件级别编辑站点的排版。

在全局范围内，你可以为主要和次要标题，正文和重音文本设置字体系列和字体粗细。

要设置单个窗口小部件的排版样式，请单击要编辑的窗口小部件，然后单击样式。从Family旁边的下拉菜单中，可以选择上百种Google字体，也可以选择默认，并应用在全局设置下设置的默认字体。

自定义图像

上面我们讲了自定义颜色和字体，图像替换也一样的简单。单击要换的部分。在这种情况下，我想更改“精选菜单”部分中的图像。我点击了Kiwi Bliss列，然后转到Style选项卡。首先，你需要通过单击“ 删除”删除现有图像，然后单击“ +”以上载您自己的图像。加载媒体库后，单击“上载文件”，然后单击“ 选择文件”按钮。然后，你将选择所需的图像，然后单击“ 插入媒体”按钮。还可以更改其位置并控制其大小。还可以选择更改背景覆盖或完全删除它，以及设置图像文本的颜色。如果你使用常规图像而不是背景图像，则选项会略少。例如，要更改和自定义主页的“膳食定价”部分中的图像，您将按照删除现有图像然后上传自己的图像的相同步骤进行操作。然后，你可以更改图像不透明度并添加各种CSS滤镜，例如“模糊”，“亮度”等。你可以为图像悬停状态应用不同的样式，并且一旦访问者用鼠标悬停在图像上，这些样式将可见。要自定义网站上的其他图片，发布以保存它们。

自定义页面布局

根据自己的喜好配置所有样式后，就可以开始调整布局了。例如，我们正在使用的主页有3列，但如果你的企业有4个服务怎么办？在这种情况下，您需要添加另一列。

要执行此操作，请右键单击内部区域手柄，然后选择“  添加”列。将创建一个新列，然后你可以继续添加所需的小部件。或者，你可以复制现有列以节省时间。复制完列后，将内容替换为你自己的内容。

你也可以在页面中添加其他部分，如前所述。以下是添加示例关于部分的分步过程：

  1. 单击菜单定价下方部分句柄中的+图标。
  2. 将结构设置为一列
  3. 将列调整为全宽
  4. 拖动标题窗口小部件并键入标题
  5. 拖动内部窗口小部件并选择两列
  6. 将图像添加到左列，并将文本小部件添加到右列
  7. 从计算机中选择一张图像并将其上传到图像小部件
  8. 在“文本”小部件中输入业务的简要说明
  9. 拖动文本小部件下方的按钮小部件
  10. 设置按钮以链接到“关于”页面。

完成所需更改后，单击绿色“  发布”按钮，更改就会马上生效。

添加社交媒体链接

如上图，我们正在使用的模板带有页脚中的社交媒体链接。单击图标并使用链接到首选社交媒体配置文件的图标替换它们来轻松编辑它们。单击“ 添加项目” 按钮添加更多链接。通过更改形状自定义图标，然后单击“ 样式” 选项卡以控制图标颜色，大小，填充等。从下面的屏幕截图中可以看出，我添加了一个Pinterest图标，并将图标更改为蓝色的方形。值得一提的是，拖动社交链接在页面的任何位置添加社交图标小部件。然后，选择要显示的图标，并更改形状，大小，颜色等来配置它们的显示方式。在此示例中，我已将图标添加到上一步中创建的“关于”部分。完成修改主页后，单击“ 发布” ，然后单击“ 退出到仪表板” 按钮。

自定义联系表单

到目前为止，大多数自定义都发生在主页上。让我们来看看如何调整联系我们页面上的联系表单等其他元素。首先返回“ 页面”>“所有页面” 并选择“ 联系我们” 页面。单击使用Elementor编辑。

单击表单小部件，然后开始修改信息。单击各个表单元素以添加电子邮件，电话号码，日期，文本，网站等字段。单击“ 添加项目” 按钮添加更多字段。

在这个例子中，我为座位选项添加了一个字段，以便潜在客户可以选择室内或室外桌子。

该表单还允许你选择将接收表单提交的电子邮件以及填写表单后应发生的情况。选择接收电子邮件通知，将访问者重定向到特殊的感谢页面，将其添加到您的电子邮件列表等。完成后，单击绿色“ 发布” 按钮，您的更改将在页面上生效。

自定义复制

直接编辑小部件并用你自己的文本替换文本。也可以从任何页面开始，转到“页面”>“所有页面” ，然后将鼠标悬停在要编辑的页面上。单击Edit with Elementor 。在下面的示例中，我正在编辑“关于”页面副本。

加载编辑屏幕后，单击要编辑的文本。你会注意到左侧显示的文本编辑器看起来像常规的WordPress帖子编辑器。然后，你可以编辑器里更改文本，添加图像，表单，链接，格式化文本等。

要编辑站点上的其他文本区域，只需重复上述步骤即可。单击文本，删除现有副本，然后输入你自己的内容。完成后，单击绿色的“  发布” 按钮，更改将在页面上生效。

在编辑文本时，你仍然可以对排版进行调整并调整文本的颜色，如前面所述。

添加页头和页脚模板

使用Elementor模块功能，你可以添加自定义或预制的页眉和页脚模板，并在网站的每个页面上使用它们，或者你可以为每个页面创建不同的标题。

添加页头

要创建页头，请单击任何页面上最顶部分的+ 图标，然后单击“  文件夹” 图标。加载模板库后，单击模块，然后从下拉菜单中选择Header 类别。

选择你喜欢的页头，然后单击“  插入” 按钮。然后，单击“  部分设置” ，在“  布局”设置下将HTML标记设置为页头。还可以将宽度设置为全宽，调整窗口小部件之间的间距，向其添加更多窗口小部件等。

在下面的截图中看到的，我删除了搜索图标并将其替换为社交图标。完成调整标题后，右键单击其句柄并选择另存为模板。然后，你可以在网站的所有页面上重复使用标头。

添加自定义页脚

以类似的方式，为页面创建页脚部分。首先单击页面上最后一部分下方的文件夹图标，然后从下拉菜单中选择“ 模块****”，然后选择“  页脚  ”。选择喜欢的页脚模块，然后单击“  插入”。可以使用与页面上任何其他部分和窗口小部件相同的方式设置页脚元素的样式。

完成页脚设计后，单击其句柄并按“  另存为”模板。为其命名并单击“  保存”，然后可以在你网站的任何页面上重复使用它。完成页眉和页脚元素的添加和样式设置后，只需单击“  发布”即可屏幕左侧的按钮，你的页面将完全自定义并在你的网站上生效。

保存页眉和页脚后，返回并将其应用到其他页面。要执行此操作，请转到“  页面”>“所有页面”，然后选择要使用Elementor编辑的页面。然后，单击最上面部分上方的+图标，单击文件夹图标并转到我的模板。找到已保存的标题部分，然后单击“  插入” 按钮。要添加页脚，请滚动到页面底部，然后单击最底部的文件夹图标。单击我的模板，然后选择已保存的页脚块。单击更新  保存更改。

自定义WordPress

完成页面上的所有更改后，我们还需要在WordPress中进行一些最后的自定义。上传LOGO，创建导航菜单。

上传网站标志-LOGO

首先我们来上传一个LOGO。为此，在WordPress仪表板中转到“  外观”>“自定义”。加载定制程序后，单击“  站点身份”，然后单击“  选择图标” 。

加载媒体库时，单击“ 上传****文件****”，上传好后，单击“  发布”以保存更改。

创建一个导航菜单

转到外观>菜单，然后输入菜单名称。然后，单击“ 创建菜单”。从那里，检查创建并在屏幕右侧上方自定义的页面。

你可以拖动页面以自定义它们显示的顺序，并选择此菜单的位置。完成自定义菜单后，单击“ 保存菜单”。

最后，我们已经在教程中介绍了很多方法，但愿你已经成功的学会了从头开始为你的业务创建了一个站点。正如你所看到的，当你知道如何处理网站设计以及所涉及的内容时，你会发现，真的不难啊。

原文：https://blog.csdn.net/weixin_49617016/article/details/108979433，感谢

js颜色值按深浅排序 支持rgb/hex/hsl

9月 6, 2021
分类:Web工具

根据颜色深浅排序

需求

最近参照组件库的设计，获取常用的组件颜色，比如这样的一系列灰色值

#fafafc
#f8f8f8
#f5f5f5
#efefef
#e0e0e0
#d9d9d9
#cccccc
#cbcbcb
#bfbfbf

然后要给它们由浅到深排个序，便于使用时知道加深程度，有个对比。

解决方案

将获取到的颜色统一转化为rgb格式，用公式r*0.299 + g*0.587 + b*0.114计算得到每一个颜色的灰度值，从小到大进行由浅到深的排序。

其中还要解决颜色的转化，以支持识别各类颜色。

代码

转换十六进制色值为rgb格式

function hextoRgb(color) {
  color = color.slice(1);
  var rgb = "";
  for (var i = 0; i < color.length; i += 2) {
    var end = i + 2;
    rgb += parseInt(color.slice(i, end), 16).toString() + ",";
  }
  rgb = rgb.slice(0, rgb.length - 1);
  rgb = "rgb(" + rgb + ")";
  return rgb;
}

hsl格式 转rgb

function getMid(str) {
  var left = str.indexOf("(") + 1;
  var right = str.indexOf(")");
  return str.slice(left, right);
}
//  hsl格式 转rgb
function hslToRgb(color) {
  var arr = getMid(color).split(",");
  var r, g, b;
  var h = toNum(arr[0] / 360 + ""),
    s = toNum(arr[1]),
    light = toNum(arr[2]); // h(色相) s(饱和度) l(亮度)
  var temp2, temp1;
  if (s == 0) {
    r = g = b = light;
  } else {
    temp2 = light < 0.5 ? light * (1 + s) : light + s - light * s;
    temp1 = 2 * light - temp2;

    var h2rgb = function (p, q, t) {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    };
    r = h2rgb(temp1, temp2, h + 1 / 3);
    g = h2rgb(temp1, temp2, h);
    b = h2rgb(temp1, temp2, h - 1 / 3);
  }
  return (
    "rgb(" +
    Math.round(r * 255) +
    "," +
    Math.round(g * 255) +
    "," +
    Math.round(b * 255) +
    ")"
  );
}
function toNum(str) {
  var rex = /[0-9]+/g;
  if (str.indexOf("%") > 0) {
    return str.match(rex)[0] / 100;
  } else {
    if (typeof +str === "number") {
      return +str;
    }
  }
}

获取颜色灰色值

function grayLevel(color) {
  color = isRgb(color)
    ? color
    : isHex(color)
    ? hextoRgb(color)
    : hslToRgb(color);
  var arr = getMid(color).split(",");
  var r = arr[0],
    g = arr[1],
    b = arr[2];
  return r * 0.299 + g * 0.587 + b * 0.114;
}

各类颜色判断

// 是否为rgb颜色值
function isRgb(color) {
  return /^rgb/.test(color);
}
// 是否为十六进制颜色值
function isHex(color) {
  return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
}
// 是否为hsl颜色值
function isHsl(color) {
  return /^hsl/.test(color);
}

工具

小编直接做了一个颜色转换工具，方便直接使用

颜色排序

总结

主要代码也是参照网上大神来做的，小编觉得还有很多优化空间，包括各类颜色的转换，颜色的处理，颜色json的处理等。

参考

base64转blob并下载文件

2月 21, 2021
分类:Web工具

需求

支持文件转为base64，base64转blob，blob下载为文件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>base64 to file</h2>
    <textarea name="" id="text-area" cols="30" rows="10" style='width:100%;height: 200px;' placeholder="Paste base64 string here"></textarea>
    <button class="download-btn" style='width: 150px;height:50px;display: block;margin:10px auto;'>Download</button>
    <script>

            /**
            * 上传附件转base64
            * @param {File} file 文件流
            */
            const fileByBase64 = (file, callback) => {
                var reader = new FileReader();
                // 传入一个参数对象即可得到基于该参数对象的文本内容
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    // target.result 该属性表示目标对象的DataURL
                    console.log(e.target.result);
                    callback(e.target.result)
                };
            }
            /**
            * base64转Blob
            * @param {*} data 
            */
            const base64ByBlob = (base64, callback) => {
                var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                console.log(new Blob([u8arr], { type: mime }))
                callback(new Blob([u8arr], { type: mime }))
            }

            document.querySelector('.download-btn').addEventListener('click',function(e) {
                const base64 = document.querySelector('.text-area').inneerText;

                // fileByBase64(file, (base64) => {
                    base64ByBlob(base64, (blob) => {
                    // var url = window.URL.createObjectURL(blob)


                    const fileName = `${new Date().valueOf()}.txt`;
                    const link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = fileName;
                    link.click();
                    window.URL.revokeObjectURL(link.href);
                })
                // })

            })


    </script>
</body>
</html>

Typescript CSS module 问题，VSCODE提示 cannot find module ‘XXX.scss’ or its corresponding type declarations

1月 22, 2021
分类:Web工具

问题

在Typescript + Webpack + Sass项目中使用CSS Module，可以正常引入CSS模块使用，但是vscode总是提示 cannot find module ‘XXX.scss’ or its corresponding type declarations。

解决方案

方案一

1、首先要确保webpack和sass已经能够识别CSS Module，参考webpack官网配置即可 Separating Interoperable CSS-only and CSS Module features

2、配置d.ts
重点来了，这里要注意配置两个d.ts文件
一、主文件index.d.ts

    declare module '*.scss' {
        const content: { [key: string]: any }
        export = content
    }

二、同级目录再新增一个typings.d.ts文件

    declare module '*.scss';

这样配置后，已经解决了笔者的问题，VSCODE和Node命令行界面都不会报错，而且能正常匹配

方案二

网络推荐的解决方案是在css文件同级目录编写d.ts文件，通常使用插件来自动完成

以下插件选择其一即可
1. webpack插件 typings-for-css-modules-loader
2. webpacl插件 css-modules-typescript-loader
3. 可能需要的插件，Typescript插件 typescript-plugin-css-modules（笔者用了没有效果）

通常安装完插件自动生成每个css的声明文件后，就不会报错了，但是有两个缺点，一是项目文件太多，二是路径别名还是无法被VSCODE识别（Node命令行正常），这个必须是如上配置两个d.ts才能让VSCODE不提示错误。

参考

一些可能的scss文件声明写法

//写法一
declare module '*.scss';

//写法二
declare module '*.scss' {
    const content: any;
    export default content;
}

//写法三
declare module '*.scss' {
    const content: Record;
    export default content;
}

//写法三
declare module '*.scss' {
    const content: { [key: string]: any }
    export = content
}

一些回答 cant-import-css-scss-modules-typescript-says-cannot-find-module

master提交PR到main分支出现There isn’t anything to compare

12月 14, 2020
分类:Web工具

master提交PR到main分支出现：There isn't anything to compare.main and master are entirely different commit histories.

解决方案

以下操作会强制覆盖原有代码，所以需要将要保留的内容提前存下来，覆盖后再手动更新上去。

git checkout master
git branch main master -f
git checkout main
git push origin main -f

为何不能合并？

在git checkout main之后会提示你执行git pull，试验发现合并失败，提示：fatal: refusing to merge unrelated histories，应该是和master不允许提交PR到main分支一个意思，没有相同的关联记录，即使代码差不多。

删除不需要的分支

删除本地master分支

git branch -D master

删除远程master分支

git push origin --delete master

如何github commit记录全部清除？

解决

  1. 新建orphan分支
git checkout --orphan latest_branch
  1. 将需要的文件添加到暂存区
git add -A
  1. Commit
git commit -m "..."
  1. 删除main分支
git branch -D main
  1. 将当前latest_branch分支重命名为main分支
git branch -m main
  1. 最后，推送到远程仓库
git push -f origin main

参考

  • https://stackoverflow.com/questions/23344320/there-isnt-anything-to-compare-nothing-to-compare-branches-are-entirely-diffe
  • https://github.com/lishuhao/blog/issues/9

github clone很慢，github上不去，github.io无法访问

11月 15, 2020
分类:Web工具

问题

github 是程序员必备的代码仓库和学习网站，但是当你发现一个开源库并把它clone下来的时候，发现一直卡住不动，及时能下载也只有几k的速度。

并且，虽然能上github，细心的同学可以发现，大多数github站内图片也是打不开的。

还有的项目的博客或者文档是托管在github.io上的，这个网址也经常是访问不了。

有没有什么补救措施？

解决

首先参考众多网友的智慧，马上就有了方案

方案一：设置git config

修改下git的配置

git config --global http.postBuffer 524288000

有同学用了这个配置，速度就提升了，但是小编用了没有效果，可能还是要看网络原因。

方案二：cnpm镜像

国内大型镜像系统cnpm的服务又来啦！

操作很简单，只要我们将原本的网站中的https://github.com 进行替换为https://github.com.cnpmjs.org即可，比如，

git clone https://github.com/openHacking/vuepress-plugin-qrcode

可以改为

git clone https://github.com.cnpmjs.org/openHacking/vuepress-plugin-qrcode

笔者经过试验，速度确实有所提升，快的时候大概有500k的样子。但是因为镜像是有同步周期的，如果是对实时性要求比较高的小伙伴，需要注意下这个问题。

方案三：gitee同步

这是一个利用gitee.com（码云）的github仓库的一键同步服务，来做一个中转，实现快速下载github项目的目的。

具体操作：

1.注册【码云】

2.通过【码云】【从github导入已有项目】

3.git clone【码云】中的项目

注意：笔者试验过确实可以同步，而且码云的速度还挺快。但是有两个缺点：1.每看到一个库就同步再下载，有点麻烦 2.如果仓库太大，是同步不过来的。所以这个方案也不是万能的。

方案四：修改host文件

git clone特别慢是因为github.global.ssl.fastly.net域名被限制了。
只要找到这个域名对应的ip地址，然后在hosts文件中加上ip–>域名的映射，刷新DNS缓存便可。

具体操作：

  1. 在网站 https://www.ipaddress.com/ 分别搜索：
github.global.ssl.fastly.net
github.com

得到对于的ip地址

  1. 打开hosts文件

– Windows上的hosts文件路径在C:\Windows\System32\drivers\etc\hosts
– Linux的hosts文件路径在：sudo vim /etc/hosts

  1. 在hosts文件末尾添加两行(对应上面查到的ip)
151.101.185.194 github.global-ssl.fastly.net
192.30.253.112 github.com
  1. 保存更新DNS

– Winodws系统的做法：打开CMD，输入ipconfig /flushdns
– Linux的做法：在终端输入sudo /etc/init.d/networking restart

  1. 重新git clone试试

注意：建议多试验几家ip地址获取的服务，因为ip也有被污染的情况，通常一个ip不一定靠谱。笔者经过尝试，发现这种方法并不是很奏效，git clone还是龟速。

方案五：代理

通过本地代理软件，将github代理转发到可以高速访问的服务器上，代理技术有很多应用场景，现在就是一个。

大致步骤：
1. 大多数同学会推荐shadowsocks，加上免费白嫖的账户，就可以链接上了
2. 设置github代理

git config --global http.https://github.com.proxy https://127.0.0.1:1080
git config --global https.https://github.com.proxy https://127.0.0.1:1080

注意这是对https的仓库链接有效果。

小编试验完，发现这个代理并没有作用，已经显示连接上了，但是网速依然感人，不知道哪里出了问题。欢迎试验成功的小伙伴留言区告诉小编。

其实小编估摸着大家已经把所有的方案都试过一遍了，效果还是不如人意。饱含着一整个工作日的研究与心酸泪，小编最后终于发现了一个终极大招：EXPRESS。

因为小编想通了一件事情，作为一个合格的程（da）序（gong）猿（ren），没有一款能够稳定输出、坚挺硬刚的强力代理软件，是无法正常享受流畅开发体验的，现在都5G时代了，下个github代码还在5k的速度，内心再也不能接受。

可能有小伙伴对这块有所研究，或许已经成为大家的每日必（kan）备（pian）工（shen）具（qi）。如果有小伙伴对此有所疑虑，那么小编推荐大家仔细阅读下面这篇文章。小编仔细阅读了这篇推心置腹的文章之后，就迅速入手了，也解决了小编多年的上网烦恼。

程序员必备姿势

这是小编使用过的最稳定最快的代理服务，没有之一。

动手做起来，你就成功了一半。

彻底解决npm install卡住不动npm安装报错最全指南

11月 14, 2020
分类:Web工具

问题

在使用npm install安装某个npm依赖包时，比如安装vue

npm install vue

发现进度条一直卡住不动，或者一个包下载很久，相信很多朋友也遇到过。原因应该是国内的网络连接npm速度比较慢，甚至很多的依赖包都无法直接下载下来。那么如何解决这个问题呢？

写在前面：

本文的内容大致为笔者在使用很多方案没有很好的效果之后，还是选择了买付费vpn来解决，如果已经对这个npm安装问题有所了解的，建议直接开始使用VPN。推荐笔者用的一个很稳定的VPN：Express VPN

为什么推荐Express VPN

正文开始：

方案一:淘宝镜像

npm淘宝镜像源是淘宝出品的专为npm安装加速的国内镜像代理站，官方说明是每10分钟同步一次。国内代理也是用淘宝镜像最多，并且服务稳定。

代理的原理很简单，国外的服务器距离我们比较远，连接上去当然比较慢了，国内的淘宝服务器就多了，又近，当然你就比较快了。

使用淘宝的代理镜像有三种具体方案，下面给大家详细说明

  1. 一是当你是单个依赖无法安装的时候，可以简单的在安装命令后面加上--registry=https://registry.npm.taobao.org，将此次安装的npm源切换到淘宝的npm镜像站。比如安装vue
npm install vue --registry=https://registry.npm.taobao.org # 一次性使用淘宝镜像

这个方案的好处是，针对个别的依赖库操作即可，不需要安装额外的依赖或者修改配置。

  1. 二是切换npm源的方式。直接把npm安装时用的来源切换到淘宝npm.taobao.org，就不用每次输入后缀了。设置
npm config set registry https://registry.npm.taobao.org #  设置npm镜像源为淘宝镜像

之后安装依赖还是正常的npm命令就行。

后续如果不想使用npm.taobao.org作为源了，可以重新切换回来

npm config set registry http://registry.npmjs.org # 设置npm镜像源为淘宝镜像

npm config get registry  # 查看npm当前镜像源
  1. 三是采用cnpm的安装方式，本质是也是切换镜像源。先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org # 目的是安装cnpm这个库，也是采用一次性使用淘宝镜像的方式

再在安装npm包时把npm 改为cnpm即可，比如安装vue

cnpm install vue

这个方法的好处是，同时支持cnpm和npm两种方式安装npm包，而不用像前面两个方法一样，要么加后缀要么重新切换源。

注意点：淘宝镜像源的方案也不是一劳永逸的，因为有小伙伴反馈说用了淘宝镜像安装后的依赖库有问题，但是用npm安装的就没问题，这种情况很少出现，但是一旦遇到，就是大坑，小伙伴们注意防范。

方案二：yarn

yarn是新一代替代npm安装依赖包的方案，更好的处理依赖树，所以有些npm安装失败的问题，换成yarn可能就好了。

这里简要列出各个系统环境下的安装方法，如有疑问，可以访问yarn中文网参考详细教程
1. windows环境下，需要去官网下载yarn软件

yarn下载
2. macOS推荐直接使用brew安装 

brew install yarn
  1. CentOS也是命令安装
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

sudo yum install yarn

安装完后，使用以下命令测试yarn是否安装成功

yarn --version

然后我们就可以使用yarn来安装npm包了，这里贴出常用的一些命令对比。

npm Yarn
npm install yarn add
npm install [package] –save yarn add [package]
npm install [package] –save-dev yarn add [package] –dev
npm install [package] –global yarn global add [package]
npm update –global yarn global upgrade
npm rebuild yarn add –force
npm uninstall [package] yarn remove [package]
npm cache clean yarn cache clean [package]
rm -rf node_modules && npm install yarn upgrade
npm version major yarn version –major
npm version minor yarn version –minor
npm version patch yarn version –patch

同样的如方案一，yarn可能也需要配合切换镜像源使用。如下可以参考

yarn config get registry  #  查看yarn当前镜像源

yarn config set registry https://registry.npm.taobao.org/  #  设置yarn镜像源为淘宝镜像

另外，现在一些大型第三方库也在推荐使用yarn安装依赖库，比如vue，这个可以作为重要的参考。但也不是绝对，因为也有小伙伴反馈用yarn出了问题，但是用npm是正常的。

因为每个人做的项目不同，npm依赖间的关系错综复杂，很多时候还要看点运气，或者你测出了别人没遇到的bug，毕竟，这些底层工具也是代码写的，代码写的就可能有bug，找到自己最适合的工具就好。

方案三：专线链接

如果前两个方案都不太奏效，小编只能推荐一个终极大招了，彻底解决npm卡住不动，npm下载慢，npm安装报错等各种网络问题–科学上网专线直连。为什么是大招，小编你是不是忽悠我？

理由有两个，

  1. 一是虽然我们用了淘宝镜像源，但是第三方依赖包各种各样，奇葩的是还有的第三方库在下载的时候需要临时去别的网址下载它自己的依赖，而这个它自己的依赖咱们淘宝是没有代理的，或者说即使有的网址可以代理，那么多第三方库的额外网址，你也不可能都能帮你代理下载。最典型的依赖库如node-sass、node-gyp等（node-sass和node-gyp的坑不止一个，这个等小编哪天再出详细教程）
  2. 二是小编之前遇到过这类坑，无论采用cnpm，换镜像源，换yarn，各种删除依赖重新安装，都不行，最后还是采用更科学的方式，才得以节约宝贵的开发时间。毕竟，各种工具要为我们的工作效率服务才行，不然就不是好工具。如果我们为了节省资金，但是耗费了大量的时间研究踩坑而没有结果，那岂不是浪费了更多的资金了，时间比资金更贵。

好了，不卖关子了，明白这类工具的好处的小伙伴，自然明白时间和好工具的重要性，请直接到小编推荐的专业网站操作

排名第一的VPN: Express VPN

专线直连最直接的方案就是购买服务 —鲁迅（误）

如果对此工具还有疑问的小伙伴，请参考这篇解读欣赏下小编的踩坑辛酸泪。。。

为什么我会推荐Express VPN

参考

提交main主分支后接着提交gh-pages分支

10月 19, 2020
分类:Web工具

需求

我们在github建立的项目，有时候需要发布GitHub pages，有两种方案，1是源码一个仓库，打包后代码放到另一个仓库的gh-pages分支，2是源码一个仓库main分支，打包后代码还是放在本仓库的gh-pages分支。我们这里采用第二种方式

步骤

我们以线上开源项目vuepress-template为例，这一个vuepress 模板项目，打包后生成的dist文件夹在docs/.vuepress文件夹目录下

第一步：打包文件

npm run docs:build

第二步：dist提交git

git add docs/.vuepress/dist
git commit -m "Initial dist subtree commit"

第三步：push dist

git subtree push --prefix docs/.vuepress/dist origin gh-pages

The operation was rejected by your operating system.

7月 25, 2020
分类:Web工具

问题

npm install报错:

The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

解决

  1. 查看是否有程序占用项目文件夹,比如:
    • git bash打开了项目
    • github desktop打开了项目
    • 另外的cmd窗口打开了此文件夹/项目文件夹
    • 开启了本地服务器/vscode等编辑器软件打开了项目
  2. 在项目中已管理员身份运行cmd(如何以管理员身份运行cmd)

node-gyp node-sass安装指南

7月 22, 2020
分类:Web工具

问题

npm install --global --production windows-build-tools报错

MSI (s) (14:10) [20:36:04:711]: Product: Python 2.7.15 (64-bit) -- Installation failed.

MSI (s) (14:10) [20:36:04:712]: Windows Installer 已安装产品。产品名称: Python 2.7.15 (64-bit)。产品版本: 2.7.15150。产品语言: 1033。制造商: Python Software Foundation。安装成功或错误状态: 1603。

安装时发生严重错误
C:\Users\14145\.windows-build-tools\python-2.7.15.amd64.msi

解决

1.自行下载python2.7.15版本的重装
淘宝镜像站快速下载地址:https://npm.taobao.org/mirrors/python/2.7.15/

2.设置多python
https://blog.csdn.net/qq_27474589/article/details/72583014

3.重新 npm install --global --production windows-build-tools

可能搭配的命令

  1. npm config set msvs_version 2012 --global
  2. npm config set msvs_version 2017
  3. npm install node-pre-gyp -g
  4. 有的依赖比较大，但是国内的网络环境收到了限制，可以参考此篇教程采用更科学的方式
    > 强烈推荐：彻底解决npm下载问题

其他解决思路

一、重新安装
1. npm cache clean --force
2. 删除项目中的 node_modules (如何快速删除node_modules)
3. 删除 package-lock.jsona
4. 重新 npm install

二、node-sass换成sass
1.先卸载node-sass: npm uninstall node-sass -g
2.再安装sass: npm install sass -g

node-gyp

教程链接:https://github.com/nodejs/node-gyp