前言

最近博客更新了一下主题，由之前的yilia主题更新成集成功能更齐全的next。借此也把搭建博客和优化主题的过程记录一下。

搭建博客

搭建环境

1. Node.js下载安装: https://nodejs.org/en/download/
2. git下载安装：https://git-scm.com/downloads
3. hexo下载安装，搭建博客：

4. 在桌面新建test目录，进入test目录右键选择git Bash Here在命令行界面初始化hexo（这里以test文件夹为例，文中后续都是以test文件夹作为根目录）

   1	$ hexo init

5. 更新下载依赖包

   1	$ hexo install

6. 启动本地服务

   1

   $ hexo s

   浏览器访问：http://localhost:4000
   可以看到博客已经搭建在本地。

前言

最近的一个项目要给到国外的运营人员使用，所以需要实现国际化。这里就简单介绍一下v-cli实现国际化的原理和需要注意的问题

实现原理

主要的实现原理是利用vue-i18n这个vue插件，配合官方文档可以帮助我们很方便的实现国际化。

实现步骤

安装vue-i18n插件

1

npm install vue-i18n --save

前言

平时做后台系统表格的时候总会遇到2种情况，一是表格中文字过长需要换行，也有客户希望表格高度一致，文字溢出隐藏显示…的要求。以往都是随便百度一下就写了。但是最近在做国际化的时候英文单词换行会出现单词被截断情况。借此我重新翻阅了下文档。本篇文章就介绍一下文字溢出的处理的方法和相关css属性。

相关属性

word-break

1. word-break: normal;
2. word-break: break-all;
3. word-break: keep-all;
4. word-break: break-word;

1. normal和keep-all：队尾放不下一个单词的时候，只能在半角空格或连字符处换行。否则超出的部分溢出显示。
   
2. break-all：队尾放不下一个单词的时候，先用单词前面的字母挤满这一行，多余的字母换行显示。
   
3. break-word：队尾放不下一个单词的时候，可以在半角空格或连字符处换行，没有半角空格或连字符处和break-all的规则保持一致。
   

word-wrap

1. word-wrap: normal;
2. word-wrap: break-word;

   对于non-CJK (non-CJK 指非中文/日文/韩文) 文本。这里以英文举例

3. normal：队尾放不下一个单词的时候，只能在半角空格或连字符处换行。否则超出的部分溢出显示。
   
4. break-word：队尾放不下一个单词的时候，可以在半角空格或连字符处换行，没有半角空格或连字符处先用单词前面的字母挤满这一行，多余的字母换行显示。
   

以上的6个css属性除了word-break: keep-all其它5个属性效果一致。

1. word-break: keep-all：只能在半角空格或连字符处换行，没有半角空格或连字符处超出部分溢出显示。
   
2. 其它5个属性：文字超出部分换行显示。
   

实现文字超过省略号

结语

这个方法可以用来实现禁止剪切和复制网页内容…

前言

上一篇做了一下数组的总结，在总结的过程中重新巩固了对数组的方法的使用，很多以前没记住的细节也一一捡了起来，这一篇Sring笔记也是为了重新复习下String的相关定义和用法。

原生对象String

1 JavaScript的原生对象String
关于String作为原生对象和构造函数的区别，上一篇数组有过详细的解析。这里就直接开始分析这两种情况下的String的使用。

前言

数组是我们平时编码中必不可少的一个重要，无论是数据的处理还是数据的传递，它都起到了至关重要的作用。无论是老版的JavaScript还是ES6都提供了大量的方法让我们来对数组进行处理。本文主要介绍Array对象的本质和它的相关属性，方法。

Array原型图

自定义菜单

最近的后台管理项目中使用到了右侧标签栏方便用户切换不同模块。但当标签栏过多时一个个关闭明显示是反人类的，所以参考了element admin后写了一个自定义指令来实现点击鼠标右键实现自定义菜单。

最终效果图:

前言

在之前的项目中，很多小的icon图片都是通过利用i标签的特性给它设置固定的宽高和背景来实现的。这种方法在项目大的时候一来需要依赖的图片会很多，二来css代码如果不规范的话也会出现很多问题。所以现在我在新项目中选择了阿里巴巴的矢量图标库来实现自定义IconFont图标。

可拖拽的弹窗

在刚刚重构完的项目中使用到了element ui框架，踩了不少坑也学到了不少的东西。其中比较麻烦的是它的dialog弹窗组件是无法移动拖拽的，然而客户又强烈的要求一定要有这个功能，所以就自己写了个可拖拽的弹窗组件。虽然拖拽起来不是很流畅，但是也算是满足要求了。

实现原理

主要的实现原理还是获取鼠标在div中的位置，获取位置后设置div的left和top来达到div跟随鼠标移动的效果。因为写的是vue，所以利用了vue的自定义指令来操作dom。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

hexo new page