Blog

验证 github 图床可用性滴滴滴

Melog，一个基于 jj.js (nodejs) 构建的简略轻量级 blog 零碎。代码极简，无需编译，不便二次开发。 我的项目地址： https://github.com/yafoo/melog码云镜像：https://gitee.com/yafu/melog 运行环境nodejs >= v12mysql >= v5.5个性速度极快轻量，前台无框架依赖，挪动优先，自适应pc简略，基于jj.js（类thinkphp）经典mvc框架，不便二次开发平安，后盾目录可自定义，明码重试次数限度反对更换导航格调（cms或blog）反对更换主题，自定义主题能够共用默认主题文件专题性能，能够定制共性页面Markdown编辑、实时预览，反对手机端，反对截图、图片文件粘贴上传v3.1.0 更新日志[新增] 新增 install 模块，不必再手工导入数据库文件了[新增] 新增 docker 部署，部署形式见 README.md[优化] 优化路由设置[优化] 优化专题页显示款式[优化] 优化前台 tips 函数逻辑[批改] 默认敞开调试模式[批改] 默认绑定 ip 改为 0.0.0.0[依赖] 更新依赖 jj.js 版本到 0.8.7[依赖] 更换依赖 jimp 为 jimp-compact，大幅减小程序体积 装置1、程序部署Docker形式部署 # 镜像拉取docker pull yafoo/melog# 容器运行docker run -p 3003:3003 --restart unless-stopped --name melog -d yafoo/melog# 容器运行（配置文件、站点数据保留到宿主机）docker run -p 3003:3003 --restart unless-stopped --name melog -d -v $PWD/melog/config:/melog/config -v $PWD/melog/upload:/melog/public/upload yafoo/melogGit形式部署 # 也能够间接到github或gitee上下载压缩文件git clone https://github.com/yafoo/melog.gitcd melognpm i# 运行程序，零碎默认运行在3003端口node server.js2、配置数据库浏览器关上网址 http://127.0.0.1:3003/install，配置并点击装置 ...

HUGO 是一套模版动态化的零碎，理解其目录构造有助于创立咱们的网站零碎 目录构造以Hyde主题为例，残缺的目录构造如下： iChochy├── archetypes 内容模版目录│   └── default.md 模版文件├── config.toml 配置文件├── content 内容目录├── data 数据目录├── layouts 网站模版目录├── static 动态文件目录└── themes 主题目录 └── hyde Hyde主题目录 ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── archetypes 内容模版 │   └── default.md ├── go.mod ├── images │   ├── screenshot.png │   └── tn.png ├── layouts 网站模版 │   ├── 404.html 404面目模版 │   ├── _default 默认模版目录 │   │   ├── baseof.html 根底模版 │   │   ├── list.html 列表页面模版 │   │   └── single.html 单页面模版 │   ├── index.html 首页模版 │   └── partials 模块模版目录 │   ├── head.html HEAD模块模版 │   ├── head_fonts.html │   ├── hook_head_end.html │   └── sidebar.html ├── static 动态目录 │   ├── apple-touch-icon-144-precomposed.png │   ├── css │   │   ├── hyde.css │   │   ├── poole.css │   │   ├── print.css │   │   └── syntax.css │   └── favicon.png └── theme.toml 主题配置文件archetypes内容模版目录，通过内容模版，应用hugo new命令创立新的内容文件 ...

Halo博客的百度定时页面提交前言好不容易搭建好博客，写了些自认为有点意思的文章，然而没人看！！因为没有提交到搜索引擎，所以基本没人能搜到嘛~。尽管Next主题提供了百度主动提交的配置，然而百度收录曾经不再提供推动收录的服务，所以Next主题的配置也没啥用了百度收录网站中提供了三种收录形式，其中API提交最快捷，因而思考应用Java实现将Halo博客文章推送到百度收录中 API提交sitemap提交手动提交Halo提供了用于获取文章列表的API，因而思路很简略：应用Java定时工作线程池依照固定的工夫距离从Halo API中获取全副的文章链接，而后调用百度收录API，向百度提交文章链接 百度收录对于频繁提交旧的链接有肯定的限度，如果常常反复提交旧链接，会下调配额，甚至可能会失去API推送性能的权限，如果常常提交新的文章链接，可能适当进步配额。因而须要建设一个简略的缓存，提交链接时滤除旧的曾经提交过的链接只管Google应用站点地图就曾经能很好地进行链接的抓取了，不必独自提交，然而Google同样举荐应用indexing API被动提交要收录的链接，具体可参考Halo博客的谷歌定时页面提交工程搭建建设Gradle工程，配置文件如下所示 plugins { id 'java' id 'application'}group 'xyz.demoli'version '1.0-SNAPSHOT'sourceCompatibility = 1.11mainClassName="xyz.demoli.Main"repositories { mavenCentral()}application{ applicationDefaultJvmArgs = ['-Duser.timezone=GMT+8']}dependencies { testImplementation 'org.junit.jupiter:junit-jupiter-api:5.8.1' testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.8.1' // https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp implementation group: 'com.squareup.okhttp3', name: 'okhttp', version: '4.9.3' implementation 'com.google.code.gson:gson:2.9.0' // https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-api implementation group: 'org.apache.logging.log4j', name: 'log4j-api', version: '2.14.1' // https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-core implementation group: 'org.apache.logging.log4j', name: 'log4j-core', version: '2.14.1' // https://mvnrepository.com/artifact/org.projectlombok/lombok compileOnly group: 'org.projectlombok', name: 'lombok', version: '1.18.22' annotationProcessor group: 'org.projectlombok', name: 'lombok', version: '1.18.22'}test { useJUnitPlatform()}annotationProcessor group: 'org.projectlombok', name: 'lombok', version: '1.18.22'保障gradle我的项目中lombok的注解能够被正确解析applicationDefaultJvmArgs参数的设置是为了解决后续服务部署在容器中时日志打印工夫不是东八区时区的问题配置文件如下： ...

VPS / 云服务器 的抉择能够抉择国内的服务器，也能够选国外的VPS，因为一些非凡起因我是应用国外的搬瓦工 VPS，这里简略讲讲两个国外的VPS，都是能够应用支付宝进行领取的。 Vultr，配置简略，能疾速备份，疾速复原备份，登录简略，基本上都是一键配好，价格偏高一丢丢，但性能是比拟好的，无论是国内还是国外拜访都是咻咻咻的。毛病，新配好的服务器须要 Ping 一下 IP 看看通信国内如何，有时候会 Ping 不通。 搬瓦工，配置也不是特地简单，然而页面 UI 设计偏旧，胜在价格便宜，比 Vultr 便宜一半不止。目前来说，我还没有遇到不能 Ping 通的 IP。毛病，最便宜的套餐，性能稍显有余，配置过程稍显简单，上手须要一点工夫。须要从新设置 SWAP 的大小。 域名 的抉择仍旧是用咱们的老朋友，Namesilo。 当然，你也能够应用 Freenom，我感觉只是它切实是有点难用。 一样，它俩也是能通过支付宝领取。 域名还须要应用 Cloudflare 进行解析，须要留神的是，{% emp Cloudflare 不反对二级域名的解析 %}（有可能是我没找到，有些博客说能够应用子域名，但我就是没整进去。） 前一篇 VPS 内配置工具 博客文章 {% wavy 筹备工作 %} 的 {% wavy 1-3 点 %}中有具体地讲到域名 & 域名解析的配置，请自行跳转进行查阅，此处不再赘述。 图床 性能的实现当然，你能够抉择应用 Github 进行贮存，或者是 七牛、腾讯云，甚至是 Bilibili，应用这些公开型网站是比较简单的。 然而又因为一些非凡的起因，我只能应用 VPS 自身实现图床性能，配置会偏简单一点。（我不心愿把图片上传到其它中央，我心愿将它们汇合在一个中央进行治理。） 这里举荐应用，我编写的基于 FastAPI 写的图片上传 API，举荐应用 Anacodna 创立一个虚拟环境给它，要应用的包都在库中的 Pipfile 文件中。（CentOS 7 中 Docker & Nginx & Anaconda & FastAPI 的具体配置可参考前篇博客 超具体装置配置） ...

前言回首过往从入行开发作为一个程序员，我就想要一个本人的blog了，我是一个比拟爱折腾的人，刚开始理解到时候是应用第三方建站blog零碎，如，WordPress ,Typecho,等来搭建本人博客，而后我开始购买阿里云服务器，注册域名，搭建零碎，抉择主题，甚至不惜付费购买，等所有折腾弄好后，刚开始我还保持写blog 前面就放弃了，不了了之了，！！！ 前面过了一段时间我又想起来想弄本人blog，开始感觉得动静blog节约，还要运维服务器很麻烦，于是又一顿度娘，发现能够搭建动态blog通GitHubpag 托管一个动态网站，通过hexo 等技术，又折腾了一番功夫，选主题，配置githubpage， 而后终于弄好了，后果怎么了！！你们应该也能猜到，我还是保持了一段时间就不了了知了， 我发现我陷入了一个自我的怪圈，想法每天很多，口头半途而费，或者始终就是个口嗨！！！！！！ 我甚至有点探讨我本人这种行为，给我带了很多负面情绪， 如不安焦虑等，------------ 然而我想有本人网站，记录本人这个想法始终都存在我心里，从未扭转 从新登程这次我觉定本人写一个Blog ，每天更新我的项目进度由大家监督，我置信这次我肯定能够胜利， 始终想要做一个本人齐全独立自主开发的博客，作为一个程序员，我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了！！！！这次我不会再给本人找任何借口！！ 性能需要剖析零碎次要实现以下几方面的性能： 用户治理：用户的注册和登录，发表博文和评论。博文治理：用户能够在网站中发表和设置博文。评论治理：用户能够评论博文和回复其余用户的评论。分类管理：增加和删除分类，给文章设置分类。标签治理：增加和删除标签，给文章设置标签。 零碎性能用户治理用户的相干信息如下：用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复，关注增加其余用户 博文治理博文的相干信息如下：博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论，但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下：评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下：分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类，还能够作为博客的菜单。 标签治理标签的相干信息如下：标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签，标签不仅能够将文章分类，还能够作为博客的菜单。 关注公众号猿小叔获取更多干货 前言回首过往从入行开发作为一个程序员，我就想要一个本人的blog了，我是一个比拟爱折腾的人，刚开始理解到时候是应用第三方建站blog零碎，如，WordPress ,Typecho,等来搭建本人博客，而后我开始购买阿里云服务器，注册域名，搭建零碎，抉择主题，甚至不惜付费购买，等所有折腾弄好后，刚开始我还保持写blog 前面就放弃了，不了了之了，！！！ 前面过了一段时间我又想起来想弄本人blog，开始感觉得动静blog节约，还要运维服务器很麻烦，于是又一顿度娘，发现能够搭建动态blog通GitHubpag 托管一个动态网站，通过hexo 等技术，又折腾了一番功夫，选主题，配置githubpage， 而后终于弄好了，后果怎么了！！你们应该也能猜到，我还是保持了一段时间就不了了知了， 我发现我陷入了一个自我的怪圈，想法每天很多，口头半途而费，或者始终就是个口嗨！！！！！！ 我甚至有点探讨我本人这种行为，给我带了很多负面情绪， 如不安焦虑等，------------ 然而我想有本人网站，记录本人这个想法始终都存在我心里，从未扭转 从新登程这次我觉定本人写一个Blog ，每天更新我的项目进度由大家监督，我置信这次我肯定能够胜利， 始终想要做一个本人齐全独立自主开发的博客，作为一个程序员，我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了！！！！这次我不会再给本人找任何借口！！ 性能需要剖析零碎次要实现以下几方面的性能： 用户治理：用户的注册和登录，发表博文和评论。博文治理：用户能够在网站中发表和设置博文。评论治理：用户能够评论博文和回复其余用户的评论。分类管理：增加和删除分类，给文章设置分类。标签治理：增加和删除标签，给文章设置标签。 零碎性能用户治理用户的相干信息如下：用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复，关注增加其余用户 博文治理博文的相干信息如下：博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论，但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下：评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下：分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类，还能够作为博客的菜单。 标签治理标签的相干信息如下：标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签，标签不仅能够将文章分类，还能够作为博客的菜单。

前言回首过往从入行开发作为一个程序员，我就想要一个本人的blog了，我是一个比拟爱折腾的人，刚开始理解到时候是应用第三方建站blog零碎，如，WordPress ,Typecho,等来搭建本人博客，而后我开始购买阿里云服务器，注册域名，搭建零碎，抉择主题，甚至不惜付费购买，等所有折腾弄好后，刚开始我还保持写blog 前面就放弃了，不了了之了，！！！ 前面过了一段时间我又想起来想弄本人blog，开始感觉得动静blog节约，还要运维服务器很麻烦，于是又一顿度娘，发现能够搭建动态blog通GitHubpag 托管一个动态网站，通过hexo 等技术，又折腾了一番功夫，选主题，配置githubpage， 而后终于弄好了，后果怎么了！！你们应该也能猜到，我还是保持了一段时间就不了了知了， 我发现我陷入了一个自我的怪圈，想法每天很多，口头半途而费，或者始终就是个口嗨！！！！！！ 我甚至有点探讨我本人这种行为，给我带了很多负面情绪， 如不安焦虑等，------------ 然而我想有本人网站，记录本人这个想法始终都存在我心里，从未扭转 从新登程这次我觉定本人写一个Blog ，每天更新我的项目进度由大家监督，我置信这次我肯定能够胜利， 始终想要做一个本人齐全独立自主开发的博客，作为一个程序员，我感觉领有有本人的一个Blog是一件很酷的事件。 然而因为很多起因我始终给耽误了！！！！这次我不会再给本人找任何借口！！ 性能需要剖析零碎次要实现以下几方面的性能： 用户治理：用户的注册和登录，发表博文和评论。博文治理：用户能够在网站中发表和设置博文。评论治理：用户能够评论博文和回复其余用户的评论。分类管理：增加和删除分类，给文章设置分类。标签治理：增加和删除标签，给文章设置标签。 零碎性能用户治理用户的相干信息如下：用户ID、、用户名、用户昵称、用户明码、用户邮箱、用户头像、注册工夫、用户生日、用户年龄、用户手机号。 用户注册时需提供用户名、用户明码、用户邮箱或用户手机号。 用户登录时能够采纳用户名或邮箱或手机号进行登录。 用户能够公布博文、发表评论、回复，关注增加其余用户 博文治理博文的相干信息如下：博文ID、公布日期、发表用户、博文题目、博文内容、点赞数、评论数、旅行量。 博文能够被普通用户公布、批改、删除和评论，但批改和删除仅限于本人发表的动静。 博文公布时须要设置分类、标签、是否置顶。 评论治理评论的相干信息如下：评论ID、评论日期、点赞数、发表用户、评论文章ID、评论内容、父评论ID。 评论能够被用户发表和删除以及被其余用户回复。 分类管理分类的相干信息如下：分类ID、分类名称、分类别名、分类形容、父分类ID。 只有管理员能够增加、删除、批改分类。 分类的作用不仅能够将文章分类，还能够作为博客的菜单。 标签治理标签的相干信息如下：标签ID、标签名称、标签别名、标签形容。 用户发表文章时能够设置标签，标签不仅能够将文章分类，还能够作为博客的菜单。 扫码关注公众号 猿人生 理解更多

始终游走在各大线上写作平台，csdn，博客园，简书，思否，等也在这些博客平台发表写过一些博客，然而始终没有保持下来，不晓得是本人自身懒惰成性还是平台不好用，明明工作之余或者不忙的时候本人是有大量工夫去学习，去积淀的，然而都节约了，然而我忽然觉的我当初不应该这么浪费时间了，可能是年纪大了，有了职业危机毕竟我都25岁了，我想积淀一下空虚一下本人，从当初开始我会不定时在平台每周更新1-2篇比拟有品质文章，记录学习工作中遇到的问题，先从本人的集体博客开始写吧。 我感觉作为一个开发者，领有一个齐全自主功能强大的本人开发的博客是一个很酷的事件 ！！！ nice 扫码关注公众号猿人生理解更多好文

http://www.tianxiaobo.com/arc...

背景Laravel 8 公布近一个月了,这次改变比拟吸引我的就是 Jetstream 全家桶。在没公布之前我没接触过 Livewire 以及前端的 Tailwindcss，alpinejs。然而我是一个比拟喜爱尝试新技术的人。在商业化的我的项目去实际显然是不可取的。所以我在国庆开始的时候就打算利用假期的工夫去折腾下博客试试，理解它的特点。再去我的项目中对应的去应用。通过一段时间的折腾我发现这玩意挺香的。当然也有一些坑,我也会分享进去。 Livewire-Bloggithub 代码地址 喜爱的请star????下 ????博客线上地址PC端界面成果 挪动端界面成果 功能分析搜寻案例Livewire 最大的长处的就是跟前端界面动静交互，比方我搜寻 Laravel 的时候他能够配合前端监听我的输出。实时通过 api 调用后盾的数据返回给前端。而这些 api 是毋庸你在编写的。它的外围文件 LivewireServiceProvider 曾经注册。有趣味的同学能够看下这个外围文件。 php artisan make:livewire search 生成 search.blade.php Search.php 文件search.blade.php Search.php 查看成果 评论案例评论外面会用到 Livewire 的组件全局事件互相通信 需要剖析 代码实现php artisan make:livewire AddComment php artisan make:livewire ShowComment AddComment<?phpnamespace App\Http\Livewire;use App\Models\CommentModel;use Illuminate\Support\Carbon;use Illuminate\Support\Facades\Auth;use Illuminate\Support\Facades\Cache;use Illuminate\Support\MessageBag;use Illuminate\Support\Str;use Illuminate\View\View;use Livewire\Component;class AddComment extends Component{ /** * @var string */ public $content; /** * @var int */ public $post_id; /** * @var int */ public $parent_id; /** * @var string */ public $comment_composing_box_id; /** * @var string */ public $preview_box_id; /** * @var string */ public $target_id; /** * @var array */ protected $rules = [ 'content' => 'required', ]; /** * @var array */ protected $messages = [ 'content.required' => '评论不能为空！', ]; public function mount(int $postId, CommentModel $comment, int $time = 0): void { $this->post_id = $postId; $this->parent_id = empty($comment->id) ? 0 : ($comment->parent_id ? $comment->parent_id : $comment->id); $this->target_id = empty($comment->id) ? 0 : $comment->id; $this->content = ($time > 0 && ! empty($comment->user)) ? '@'.$comment->user->name.'：' : ''; $this->comment_composing_box_id = 'comment-composing-box-'.Str::random(10); $this->preview_box_id = 'preview-box'.Str::random(10); } public function submit(): void { if ($this->check()) { $validatedData = $this->validate(); $data = [ 'content' => $validatedData['content'], 'user_id' => Auth::user()->id, 'parent_id' => $this->parent_id, 'post_id' => $this->post_id, 'target_id' => $this->target_id, ]; CommentModel::create($data); $this->reset('content'); $this->emitTo('show-comment', 'create', $this->post_id); session()->flash('message', '增加评论胜利！'); } } public function userCommentLimit(MessageBag &$messageBag): void { $time = Cache::get(user_comment_limit_key()) ?? 0; $limit_day_time = config('cache.user_comment_limit.day_time', 10); if ($limit_day_time < $time) { $messageBag->add('content', Str::replaceFirst('?', $limit_day_time, '用户每天最多只能回复 ? 评论')); } else { Cache::put(user_comment_limit_key(), $time + 1, Carbon::today()->addDay()); } } /** * @param MessageBag $messageBag */ public function mustLogin(MessageBag &$messageBag): void { Auth::guest() && $messageBag->add('content', '用户须要登陆！'); } /** * @return bool */ public function check(): bool { $messageBag = $this->getErrorBag(); $this->userCommentLimit($messageBag); $this->mustLogin($messageBag); return $messageBag->count() === 0; } /** * @return View */ public function render(): View { return view('livewire.add-comment'); }}ShowComment<?phpnamespace App\Http\Livewire;use App\Models\PostModel;use App\Repositories\BlogRepository;use Illuminate\Support\Collection;use Illuminate\View\View;use Livewire\Component;class ShowComment extends Component{ /** * @var int */ public $postId; /** * @var Collection */ public $comments; /** * @var int */ public $comments_count = 0; /** * @var array */ protected $listeners = ['create' => 'getCommens']; /** * @param $postIds */ public function mount(PostModel $post): void { $this->postId = $post->id; $this->comments = $post->comments; $this->comments_count = $post->comments->count() ?? 0; } /** * $params. */ public function getCommens(int $postId): void { $post = BlogRepository::getPostById($postId); $this->comments = $post->comments; $this->comments_count = $post->comments->count() ?? 0; } /** * @return View */ public function render(): View { return view('livewire.show-comment'); }}剖析外面比拟重要的是 emitTo 这个的意思,就是你这个组件解决实现了须要告诉到谁,比方告诉 ShowComment, 就是 $this->emitTo('show-comment', 'create', $this->post_id)；组件名称能够通过打印 ShowComment::getName()取得。 ...

这里介绍两种办法，应用 Blob对象 和 应用 js-file-download这两种办法下载的文件都不会乱码，然而 不论应用哪种办法，发送申请时都要设置 responseType如果不打算理解间接应用，请通过目录或者间接点击跳转 四、次要残缺代码 办法一：应用Blob对象Blob对象示意一个不可变、原始数据的类文件对象。Blob 示意的不肯定是JavaScript原生格局的数据。File接口基于Blob，继承了blob的性能并将其扩大使其反对用户零碎上的文件。 一、Blob() 构造函数摘自：Blob() 构造函数 语法var aBlob = new Blob( array, options );参数array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象形成的 Array ，或者其余相似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。options 是可选的，它可能会指定如下两个属性： type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。也就是设置文件类型。endings，默认值为"transparent"，用于指定蕴含行结束符n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适宜宿主操作系统文件系统的换行符，或者 "transparent"，代表会放弃blob中保留的结束符不变。 二、URL对象通过创立URL对象指定文件的下载链接。 // 创立新的URL示意指定的File对象或者Blob对象。let objectURL = window.URL.createObjectURL(blob); window.URL.revokeObjectURL(objectURL); // 开释内存在每次调用createObjectURL()办法时，都会创立一个新的 URL 对象，即便你曾经用雷同的对象作为参数创立过。当不再须要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL()办法来开释。浏览器会在文档退出的时候主动开释它们，然而为了获得最佳性能和内存应用情况，你应该在平安的机会被动开释掉它们。 三、利用a标签自定义文件名const link = document.createElement('a'); // 生成一个a标签。link.href = window.URL.createObjectURL(blob); // href属性指定下载链接link.download = fileName; // dowload属性指定文件名link.click(); // click()事件触发下载 download 属性设置文件名时，能够间接设置扩展名。如果没有设置，则浏览器将自动检测正确的文件扩展名并增加到文件 。四：次要残缺代码一般下载axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { // 创立Blob对象，设置文件类型 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) let objectUrl = URL.createObjectURL(blob) // 创立URL location.href = objectUrl; URL.revokeObjectURL(objectUrl); // 开释内存 }) 自定义下载后的文件名 ...

有时想写个自己的博客又苦于需要一堆堆的前置技能：既要先完成优雅而具备良好兼容性的界面设计，又要购买服务器和部署后台，这严重阻碍了大众踏出搭建网站第一步的积极性，于是 VuePress 横空出世，按照教程操作，从构建网站(包括完成第一篇文章)到在 Github Page 只需要短短 10 分钟不到的时间。不信？打开Visual Code和浏览器跟着文章来一遍吧~ 本文基于 VuePress 1.1.0 文档编写.0.前置本地安装好 Node.js（版本>=8.0）, 推荐安装 yarn.具备可运行命令的终端 Window: cmder、Git BashMac: Terminal、iTermLinux: 默认终端注册好 Github 账号1. 本地创建博客项目参(fan)考(yi): 官方教程-Getting Started1）打开终端mkdir blog # 本地创建 blog 项目cd blogyarn add -D vuepress # 或者 npm i -D vuepress, 安装 vuepress 依赖mkdir docsecho 'Hello, my first blog!' > docs/README.md # 编写第一篇文章（注意符号）2）在 package.json 中加入脚本命令{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }, "devDependencies": { "vuepress": "^1.1.0" }}3）尝试本地运行项目运行 yarn docs:dev 或者 npm run docs:dev ...

关于SSR的简介SSR，即服务端渲染，这其实是旧事重提的一个概念，我们常见的服务端渲染，一般见于后端语言生成的一段前端脚本，如：php后端生成html+jsscript内容传递给浏览器展现，nodejs在后端生成页面模板供浏览器呈现，java生成jsp等等。 Vuejs、Reactjs、AngularJs这些js框架，原本都是开发web单页应用(SPA)的，单页应用的好处就是只需要初次加载完所有静态资源便可在本地运行，此后页面渲染都只在本地发生，只有获取后端数据才需要发起新的请求到后端服务器；且因为单页应用是纯js编写，运行较为流畅，体验也稍好，故而和本地原生应用结合很紧密，有些对页面响应流畅度要求不是特别苛刻的页面，用js写便可，大大降低了app开发成本。 然而单页应用并不支持良好的SEO，因为对于搜索引擎的爬虫而言，抓取的单页应用页面源码基本上没有什么变化，所以会认为这个应用只有一个页面，试想一下，一个博客网站，如果所有文章被搜索引擎认为只有一个页面，那么你辛辛苦苦写的大多数文章都不会被收录在里面的。 SSR首先解决的就是这个问题，让人既能使用Vuejs、Reactjs来进行开发，又能保证有良好的SEO，且技术路线基本都是属于前端开发栈序列，语言语法没有多大变化，而搭载在Nodejs服务器上的服务端渲染又可以有效提高并发性能，一举多得，何乐而不为？ ps：当然，目前某些比较先进的搜索引擎爬虫已经支持抓取单页应用页面了，比如谷歌。但并不意味着SSR就没用了，针对于资源安全性要求比较高的场景，搭载在服务器上的SSR有着天然的优势。关于Nuxtjs这里是官方介绍，Nuxtjs是诞生于社区的一套SSR解决方案，是一个比较完备的Vuejs服务端渲染框架，包含了异步数据加载、中间件支持、布局支持等功能。 关于nuxtjs，你必须要掌握以下几点知识： vuejs、vue-router、vuex等nodejs编程webpack构建前端工程babel-loader如果想使用进程管理工具，推荐使用pm2管理nodejs进程，安装方式为：npm install -g pm2搭建一个blog准备好工具推荐下载 这里iview将作为一个插件在nuxtjs项目中使用。 注意几个配置：nux.config.js module.exports = { /* ** Headers of the page */ head: { title: '{{ name }}', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '{{escape description }}' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, plugins: [ {src: '~plugins/iview', ssr: true} ], /* ** Customize the progress bar color */ loading: { color: '#3B8070' }, /* ** Build configuration */ build: { /* ** Run ESLint on save */ extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } }}plugins文件夹下，加入iview.js ...

原文地址：Create an Hexo Theme - Part 3: Comments, Analytics and Widgets原文作者：Jonathan Klughertz在这个系列教程中，你将学习怎么从零开始制作一个 Hexo 主题。在 part1 和 part2 中，我们已经创建了博客的所有页面。在这篇文章中，我们将给博客添加 Disqus 评论系统，实现 谷歌分析以及完成侧边栏的小部件。 其它文章的链接：创建一个Hexo主题-Part1:首页创建一个Hexo主题-Part2:其他页面创建一个Hexo主题-Part3:评论、分析和小部件Disqus 评论系统我已经写了一篇关于如何在 Hexo 中使用 Disqus 评论系统的文章。请前往查看以了解更多信息，这里我只简单介绍一下怎么使用： 第一步是获取 Disqus UID 来测试评论功能，可以利用你的账号在这里获取：接下来需要完成三个部分：主题文件的 disqus 配置、评论占位区、Disqus 脚本。事不宜迟，我们开始吧。 主题配置我们希望 Disqus UID 是可以配置的，因此给主题的 config.yml 文件添加一个条目： # Disqus Comments Shortnamedisqus_shortname: klugjoTest评论占位区接下来我们给页面和文章详情页添加评论系统。和之前一样，创建一个局部视图文件 layout/_partial/comments.ejs，之后打开 layout/_partial/article-full.ejs 文件，把它插入到末尾。 /* layout/_partial/comments.ejs */<div class="blog-post"> [...] <!-- Comments --> <%- partial('comments') %></div>Disqus 需要 ID 为 disqus_thread 的 div 元素，因此我们这里复制官方文档提供的代码： <div id="disqus_thread"> <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>将上面的代码合并到 comments 文件中： ...

前言大约一个月前，微博的图片外链失效了，以及掘金因为盗链问题也于2019/06/06决定开启防盗链，造成的影响是：个人博客网站的引用了这些图片外链都不能显示。 目前微博和掘金的屏蔽，在CSDN和segmentfault都是可以正常显示的，只影响个人博客。 比如前段时间我的博客:http://obkoro1.com上引用的微博图片都不能显示了。 因为我写博客比较频繁，被屏蔽的图片不在少数，肯定不能一个个手动的替换，查了一番没有找到现成的解决方案，做了个脚本工具，并且写了文档把它开源出来了。 markdown-img-down-site-change(下载/替换markdown中的图片)搜索目标文件夹中的markdown文件，找到目标图片，提供下载图片，替换图片链接的功能-通常用于markdown 图片失效。简介这是一个极为轻量的脚本，引用包，设置好参数，通过API即可轻松上手。 解决什么问题？集中下载markdown文件中某个域名下的图片到一个文件夹下。用新的图片链接替换markdown文件中某个域名的图片链接。// 1. 下载这两个图片// // // 2. 替换成：github的链接安装:npm i markdown-img-down-site-change -S文档：Github API 更新日志 数据安全：刚上手可能不了解脚本的功能，需要调试一番，这时候万一把markdown文件给改坏了，岂不是要哭死？ 脚本有两种形式来防止这种情况发生： 脚本会默认备份你的文件。默认开启测试模式，等到调试的差不多了，可以关闭测试模式。建议：再不放心的话，可以先用一两个文件来测试一下脚本使用：20行代码不到在项目中有一个使用栗子，里面加了蛮多注释和空行的，实际代码20行都不到，可以说很简单了，如下： // npm i markdown-img-down-site-change -S const markdownImageDown = require('markdown-img-down-site-change'); // 文件模块// 传参： 这也是脚本的默认参数，根据情况可以自行修改let option = { replace_image_url: 'https://user-gold-cdn.xitu.io/', read_markdown_src: './source', // 要查找markdown文件的文件夹地址 down_img_src: './juejin', // 下载图片到这个文件夹 var_number: 3 // url前半部分的变量数量 比如上面的日期: /2019/5/20/、/2018/6/16/}// 初始化const markdownImage = new markdownImageDown(option)// 下载外链markdownImage.checkDownImg();// 上传下载下来的图片文件夹到云端 用户自己操作// 上传图片之后 // 脚本会把以前的外链替换成云端地址+拼接一个图片名markdownImage.updateOption({ new_image_url: 'https://xxx.com/目录地址/', // 图片上传的地址 add_end: '?raw=true' // github图片地址有后缀 直接进去是仓库})// 替换外链 // 把replace_image_url的字符串换成new_image_url字符串markdownImage.replaceMarkdown();运行：仔细阅读文本，配置好参数之后 ...

其实自己的博客上线没多久，之前闲时会写些乱七八糟的玩意儿，一来当作总结和备忘，二来分享一些个人经验，也是种很有趣的经历。然后几个月前，想着自己手里有个注册但闲置很久的域名，又正好有台服务器，就干脆折腾个博客。 不就是个博客嘛？能有多难？也没多想就用了之前使用过的 Hexo 撸了起来，只花了一晚上就弄上线了。不过上线一时爽，维护火葬场。之后花上它上面的时间要远多于此，因为 hexo 如果想要充分的自定义模板或者功能，还是很麻烦的，特别是因为模板用的 pug 以及写样式用的 stylus 都是自己不擅长且不太喜欢的语言。几番折腾下来总不得劲，终于心一横，不如重构吧。 重构时要比当初选择 hexo 时要谨慎多了，对比了下自己了解的一些工具，最终选择了 Nuxt.js。 为什么是 Nuxt.js？最主要的原因就是自己用 Vue 很久了，学 Nuxt 的成本也就小得多。Nuxt 可以让我用最熟悉的姿势来写代码，同时又能解决博客在静态化、SEO 等方面的一些要求，它的布局、自动路由、插件、中间件等特性让我大有相见恨晚的感觉。 其实在作决定之前也试过 Vuepress，但 Vuepress 的出发点是文档类的站，并不太适合写博客。虽然 1.0 版中加入了博客的支持，但目前仍在 alpha 阶段，体验不太好，更新进度又不理想，等到正式稳定可用的版本出来，估计黄花菜也凉了。 此外也考虑过用 hugo，甚至想过用 Laravel 来弄。但 hugo 基于 Go，自己完全不懂，而用 Laravel 写博客似乎大材小用了，毕竟我只需要一个静态的小站，也不会给服务器增加多少压力。 具体实施创建 nuxt 项目并进行基础配置首先当然是创建项目，根据 Nuxt 文档使用 yarn create nuxt-app 命令创建一个新项目，根据需要配置好 eslint、typescript 等。 确定目录结构（路由）、文章文件名命名规范 因为之前用 hexo 部署的也是纯静态的站，只要之前所部署的旧文件不删除，那么使用原来的链接仍然能访问旧版的文章。所以也不用太纠结重构后路由的变化。当然这并不意味着不需要进行规划。 为此，我新建了一个 posts 目录，用于保存 markdown 文件，文件夹内建与 markdown 文件同名的文件夹用来存文章中用到的图片等。 -| posts/----| hello-中国/----| hello-中国.md这里要注意一下的是，文件名将一些特殊字符和空格替换成了连词符，而实际访问用的路由是将文件名拼音化。为什么不直接用拼音化文件名或者英文呢？主要是方便日后管理。然后在 pages 目录下创建 psots/_slug.vue 页面。这样文章就可以用 https://tianyong90.com/psots/... 这样形式来访问了。 ...

原文链接：用 Travis CI 自动部署 Github Pages 前言Github Pages 不能运行动态程序，只能输出一些静态内容。因此 Github Pages 非常适合用于前端项目的展示。可用于存放项目介绍、项目文档或者个人博客。本文介绍了怎么用 Travis CI 自动化部署 Github Pages。 关于 CI持续集成（Continuous integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通常每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。目前 github 开源项目用的较多的 CI 主要是 Circle CI 和 Travis CI，两者都是利用容器技术来适配不同项目环境。 (图一 CIrcle CI，图二 Travis CI) 步骤1. 安装 Github App在 Github Market Place 安装 Travis CI。安装时选择你想要的项目权限。<img src="https://s2.ax1x.com/2019/05/0...; width="50%" alt="ENCylT.png" title="ENCylT.png" /> 2. 配置 Github Token配置 Github Token 用于 Travis CI 对你项目的访问权限，配置完了之后 不要刷新页面，先点一下 Token 后面的复制按钮，因为你只能看见这个 Token 一次，刷新了它就没了 不得不赞一下 Github 的安全性 :+1: ...

DeepAugment是一个专注于数据扩充的自动化工具。 它利用贝叶斯优化来发现针对您的图像数据集定制的数据增强策略。 DeepAugment的主要优点和特点是： 降低CNN模型的错误率(WRN-28-10显示CIFAR10的错误率降低了60%)通过自动化流程可以节省时间比谷歌之前的解决方案——AutoAugment——快50倍完成的包在PyPI上。你可以通过运行以下命令来在终端上安装它： $ pip install deepaugment你也可以访问项目的自述文件或运行谷歌Colab笔记本教程。要想了解更多关于我是如何构建这个的，请继续阅读! 引言数据是人工智能应用中最关键的部分。没有足够的标记数据常常导致过度拟合，这意味着模型将无法归纳为未发现的示例。这可以通过数据扩充来缓解，数据扩充可以有效地增加网络所看到的数据的数量和多样性。它是通过对原始数据集(如旋转、裁剪、遮挡等)应用转换，人为地生成新数据来实现的。然而，确定哪种增强对手头的数据集最有效并不是一项简单的任务。为了解决这个问题，谷歌去年发布了AutoAugment，它通过使用强化学习发现了给定数据集的优化增强。由于强化学习模块的存在，使用谷歌的AutoAugment需要强大的计算资源。由于获得所需的计算能力代价高昂，因此我开发了一种新的方法——DeepAugment，它使用贝叶斯优化而不是强化学习。 如何获得更好的数据努力改进数据质量通常比努力改进模型获得更高的投资回报。改进数据有三种主要方法:收集更多的数据、合成新数据或扩展现有数据。收集额外的数据并不总是可行的，而且可能很昂贵。GANs所做的数据合成是很有前途的，但也很复杂，可能与实际的例子有所不同。 另一方面，数据扩充简单且影响很大。它适用于大多数数据集，并通过简单的图像转换完成。然而，问题是确定哪种增强技术最适合当前的数据集。发现正确的方法需要耗时的实验。即使经过多次实验，机器学习（ML）工程师仍然可能找不到最佳选择。对于每个图像数据集，有效的增强策略是不同的，一些增强技术甚至可能对模型有害。例如，如果使用MNIST digits数据集，应用旋转会使模型变得更糟，因为在“6”上180度旋转会使它看起来像“9”，而仍然被标记为“6”。另一方面，对卫星图像应用旋转可以显著改善结果，因为无论旋转多少次，从空中拍摄的汽车图像仍然是一辆汽车。 DeepAugment：闪电般迅速的autoMLDeepAugment旨在作为一种快速灵活的autoML数据扩充解决方案。更具体地说，它被设计为AutoAugment的更快和更灵活的替代品。（2018年Cubuk等人的博客）AutoAugment是2018年最令人兴奋的发布之一，也是第一种使用强化学习来解决这一特定问题的方法。在本文发表时，AutoAugment的开源版本没有提供控制器模块，这阻碍了用户为自己的数据集使用它。此外，学习增强策略需要15,000次迭代，这需要巨大的计算资源。即使源代码完全可用，大多数人也无法从中受益。deepaugmented通过以下设计目标来解决这些问题:1.在保证结果质量的前提下，最小化数据扩充优化的计算复杂度。2.模块化和人性化。为了实现第一个目标，与AutoAugment相比，DeepAugment的设计具有以下差异： 使用贝叶斯优化代替强化学习(需要更少的迭代)(~100x加速)最小化子模型大小(降低每次训练的计算复杂度)(~20x加速)减少随机扩充搜索空间设计（减少所需的迭代次数）为了实现第二个目标，即使DeepAugment模块化和人性化，用户界面的设计方式为用户提供了广泛的可能性配置和模型选择(例如，选择子模型或输入自设计的子模型，请参阅配置选项)。 设计扩充策略DeepAugment旨在为给定的图像数据集找到最佳的扩充策略。增强策略被定义为五个子策略的总和，这两个子策略由两种类型的增强技术和两个实值[0,1]组成，决定了每种增强技术的应用能力。我使用imgaug包实现了增强技术，imgaug包以其大量的增强技术（见下文）而闻名。 当多样化和随机应用时，增强是最有效的。例如，与其旋转每个图像，不如旋转图像的某些部分，剪切另一部分，然后对另一部分应用颜色反转。基于这一观察，Deepaugment对图像随机应用五个子策略之一（包括两个增强）。优化过程中，每个图像被五个子策略之一增强的概率（16%）相等，而完全不被增强的概率为20%。虽然这个策略设计受到了autoaugmented的启发，但有一个主要的区别:我没有使用任何参数来应用子策略的概率，以便使策略的随机性更低，并允许在更少的迭代中进行优化。 这个策略设计为贝叶斯优化器创建了一个20维的搜索空间，其中10个维度是分类(增强技术的类型)，其他10个维度是实值(大小)。由于涉及到分类值，我将贝叶斯优化器配置为使用随机森林估计器。 DeepAugment如何找到最佳策略DeepAugment的三个主要组件是控制器（贝叶斯优化器），增强器和子模型，整个工作流程如下：控制器采样新的增强策略，增强器按新策略转换图像，子模型是通过增强图像从头开始训练。根据子模型的训练历史计算奖励。奖励返回给控制器，控制器使用此奖励和相关的增强策略更新代理模型(请参阅下面的“贝叶斯优化如何工作”一节)。然后控制器再次采样新策略，并重复相同的步骤。此过程循环，直到达到用户确定的最大迭代次数。控制器(贝叶斯优化器)是使用scikit- optimization库的ask-and-tell方法实现的。它被配置为使用一个随机森林估计器作为其基本估计器，并期望改进作为其获取函数。 贝叶斯优化是如何工作的贝叶斯优化的目的是找到一组最大化目标函数值的参数。 贝叶斯优化的工作循环可以概括为：1.建立目标函数的代理模型2.查找代理上执行得最好的参数3.使用这些参数执行目标函数4.使用这些参数和目标函数的得分更新代理模型5.重复步骤2-4，直到达到最大迭代次数有关贝叶斯优化的更多信息，请阅读高级的这篇解释的博客，或者看一下这篇综述文章。 贝叶斯优化的二维描述，其中x和y轴表示增强类型，点（i，j）处的颜色表示用增强i和j所增强的数据进行训练时CNN模型的精度。 贝叶斯优化的权衡目前用于超参数优化的标准方法有随机搜索、网格搜索、贝叶斯优化、进化算法和强化学习，按方法复杂度排序。在超参数优化的精度、成本和计算时间方面，贝叶斯优化优于网格搜索和随机搜索(参见这里的经验比较)。这是因为贝叶斯优化从先前参数的运行中学习，与网格搜索和随机搜索相反。当贝叶斯优化与强化学习和进化算法进行比较时，它提供了具有竞争力的准确性，同时需要更少的迭代。例如，为了学习好的策略，谷歌的AutoAugment迭代15,000次(这意味着训练子CNN模型15,000次)。另一方面，贝叶斯优化在100-300次迭代中学习良好的策略。贝叶斯优化的经验法则是使迭代次数等于优化参数的次数乘以10。 挑战及对策挑战1:优化增强需要大量的计算资源，因为子模型应该从头开始反复训练。大大减慢了我的工具的开发过程。 尽管使用贝叶斯优化使其更快，但优化过程仍然不够快，无法使开发变得可行。对策:我开发了两种解决方案。首先，我优化了子CNN模型(见下图)，这是该过程的计算瓶颈。其次，我以更确定的方式设计了增强策略，使贝叶斯优化器需要更少的迭代。 设计子CNN模型。它在AWS p3.2x大型实例(带有112 TensorFLOPS的Tesla V100 GPU)上以32x32图像在约30秒(120个周期)的时间内完成培训。 挑战2：我在DeepAugment的开发过程中遇到了一个有趣的问题。在通过一遍又一遍地训练子模型来优化增强期间，它们开始过度拟合验证集。当我更改验证集时，我发现的最佳策略表现不佳。这是一个有趣的例子，因为它不同于一般意义上的过度拟合，即模型权重过度拟合数据中的噪声。对策：我没有使用相同的验证集，而是将剩余的数据和训练数据保留为“种子验证集”，并在每次子CNN模型训练时对1000个图像的验证集进行采样（参见下面的数据管道）。这解决了增强过度拟合问题。 如何集成到ML pipeline中DeepAugment发布在PyPI上。你可以通过运行以下命令来在终端安装它： $ pip install deepaugment并且使用方便: from deepaugment.deepaugment import DeepAugmentdeepaug = DeepAugment(my_images, my_labels)best_policies = deepaug.optimize()通过配置DeepAugment，可以获得更高级的用法： from keras.datasets import cifar10# my configurationmy_config = { "model": "basiccnn", "method": "bayesian_optimization", "train_set_size": 2000, "opt_samples": 3, "opt_last_n_epochs": 3, "opt_initial_points": 10, "child_epochs": 50, "child_first_train_epochs": 0, "child_batch_size": 64}(x_train, y_train), (x_test, y_test) = cifar10.load_data()# X_train.shape -> (N, M, M, 3)# y_train.shape -> (N)deepaug = DeepAugment(x_train, y_train, config=my_config)best_policies = deepaug.optimize(300)有关更详细的安装/使用信息，请访问项目的自述文件或运行Google Colab笔记本教程。 ...

「搜云库技术团队」从事于Java相关领域多年，拥有Java语言技术丰富的从业经验，涉猎AI、Python、Java、Android、iOS、Golang、前端、后端、大数据、人工智能等，我们的目标也是致力于营造一个覆盖全栈的学习分享的技术社群。区块链、云计算以及微服务等技术近年来风靡全球，现如今如果说不知道区块链是什么的人，在这个行业中的感觉都会比人家低人一等。大家所熟知的公有链以太坊、联盟链Hyperledger Fabric，甚至是云计算必用的容器化技术docker，都是使用Go语言来实现的。借着这股技术浪潮，我们新开「Go技术栈」这个公众号，目的在于分享Go语言相关领域的学习过程，让更多的人能够了解区块链、云计算、微服务等前沿技术并能对其有一定程度的认知与掌握。能够向更高薪的岗位挑战。关注我们能获得什么「Go技术栈」不仅仅包含丰富的书籍和清晰明了的学习路线，内容丰富的4T学习资源视频，还有多个微信技术交流群（近4000人），供大家进行技术讨论，无论有没有相关经验都能轻松驾驭新技术。一线城市的工作内推群、北、上、广、深、杭、成、武、南、郑、西，工作内推群，帮助大家找到理想的工作，来体现各位的价值。关注我们，不仅能利用有限的时间学习无限的知识，还能在通往高薪未来的道路上少走弯路。公号后台回复关键字：「1024」可获得 4T 学习资源视频「2048」可获得 Golang 学习路线「内推」 可进群 一线城市内推群公众号的目标读者人群人生充满迷茫的小白不知道如何选择，又想要获得高薪？如果你自制力强、学习态度好、又能坚持，那「Go技术栈」非常适合你，我们会为你提供由浅入深的学习计划，小到Go工具集，大到区块链、云计算，我们都会涉及到。有一定经验的开发工程师有一定的开发经验，或许技术发展受限，想着多学习一门技术拓宽自己的未来发展，看好区块链、云计算等热门行业。那么选择「Go技术栈」，说明你找对地方了。运维人员常年从事运维工作，整天与服务器打交道，想着学习开发。那简直太好了，「Go技术栈」会涉及到容器化技术相关的知识，又会从基础做起。做运维开发，没问题。志向远大的全能型人才听说你想独立开发，自己搞定前端后端运维等一整套的工作？那Go语言简直太适合你了。偷偷告诉你，「Go技术栈」，这些技术都会涵盖到。加油吧少年就这么多？不，Go语言能做的还很多。「Go技术栈」能做的也很多。漫漫学习路，搜云库技术团队愿与您携手同行，踏向征服Go语言的仕途。关注我们的「微信公众号」

将自己的静态博客直接部署到七牛云存储，由七牛云托管运行，你说快不快，还没有注册七牛云的看这里，七牛云注册邀请：https://portal.qiniu.com/signup?code=3l7cpouzlru4y，哈哈！一、创建七牛云存储登录进入管理中心，菜单进入：对象存储=>新建存储空间，设置好空间名称就可以直接创建，完成后会分配一个测试域名，有效期只有30天，当然可以自定义域名，长期使用二、静态博客文件构建我使用的是jekyll管理博客， 通过命令jekyll build构建MacBook-Pro:iChochy mleo$ jekyll buildConfiguration file: /Users/mleo/Develop/GitHub/iChochy/_config.yml Source: /Users/mleo/Develop/GitHub/iChochy Destination: /Users/mleo/Develop/GitHub/iChochy/_site Incremental build: disabled. Enable with –incremental Generating… Jekyll Feed: Generating feed for posts done in 1.121 seconds. Auto-regeneration: disabled. Use –watch to enable.构建成功后，生成的静态文件都在_site目录中，直接上传到云空间就可以了三、同步静态博客文件到云存储这里使用到七牛云官方工具qshell工具介绍：https://github.com/qiniu/qshell工具下载：http://devtools.qiniu.com/qshell-v2.3.6.zip选择安装：文件名描述shell_linux_x86Linux 32位系统shell_linux_x64Linux 64位系统shell_linux_armLinux ARM CPUshell_windows_x86.exeWindows 32位系统shell_windows_x64.exeWindows 64位系统shell_darwin_x64Mac 64位系统，主流的系统1､安装以Mac为例，安装shell_darwin_x64运行复制命令：cp qshell_darwin_x64 /usr/local/bin/qshell，将shell_darwin_x64复制到 bin目录下，运行qshell -v检测是否安装成功MacBook-Pro:qshell-v2.3.6 mleo$ qshell -vqshell version v2.3.62､添加账号运行命令qshell accountqshell account <AK> <SK> <Your Name>参数说明<AK>、<SK>可以到个人中心 => 密钥管理中查看<Your Name>为用户的唯一标识，自定义，如iChochy3､同步文件 使用命令qshell qupload <LocalUploadConfig>其中LocalUploadConfig参数配制文件本人的LocalUploadConfig文件信息：MacBook-Pro:iChochy mleo$ cat .LocalUploadConfig{ “src_dir” : “/Users/mleo/Develop/GitHub/iChochy/_site”, “bucket” : “blog”, “ignore_dir” : false, “overwrite” : true, “check_exists” : true, “check_hash” : true, “check_size” : true, “rescan_local” : true, “skip_file_prefixes” : “test,demo,”, “skip_path_prefixes” : “hello/,temp/”, “skip_fixed_strings” : “.svn,.git,.log”, “skip_suffixes” : “.DS_Store,.exe”, “log_file” : “/Users/mleo/.qshell/upload.log”, “log_level” : “info”, “log_rotate” : 1, “log_stdout” : false, “file_type” : 0}主要参数说明：参数说明src_dir本地同步目录bucket云空间名称log_file日志文件命令参数详细说明：https://github.com/qiniu/qshell/blob/master/docs/qupload.mdMacBook-Pro:iChochy mleo$ qshell qupload .LocalUploadConfigWriting upload log to file /Users/mleo/.qshell/upload.logUploading /Users/mleo/Develop/GitHub/iChochy/_site/404.html => 404.html [1/67, 1.5%] ……………See upload log at path /Users/mleo/.qshell/upload.log通过日志查看详情cat /Users/mleo/.qshell/upload.log至此：文件已经同步到了云空间，修改文件后再次运行qshell qupload <LocalUploadConfig>命令及可完成同步四、自定义域名1､云空间绑定域名菜单进入对象存储=>空间概览=>融合 CDN 加速域名=>立即绑定一个域名 创建域名2､域名解析创建成功后七牛云会为每个域名分配一个CNAME，如：www.chochy.cn.qiniudns.com登录域名商的管理系统，将域名解析到CNAME五、设置存储空间菜单进入对象存储=>空间设置 设置空间信息如：开启默认首页index.html，自定义404页面等 现在可以通过域名直接访问自己的博客了，是不是非常快快快………………如：http://www.chochy.cn ...

我的博客将在CSDN上同步啦！欢迎各位关注我的CSDN博客号raledon。不关注的话本佛系博主也表示没关系！

原文见记一次Hexo迁移很久没有写过Blog了, 而且也把系统换成了Manjaro, 所以又要再配置一次Hexo的环境等等, 为了下次迁移的时候, 能更快的搞定, 所以记录一下这次迁移的过程.获取源文件Hexo如果需要迁移的话, 只需要保留以下几个文件即可:_config.ymltheme/source/scaffold/package.json.gitignore因为之前已经迁移过一次了, 所以我的源文件都已经保存在github上了, 在wuxiaobai24.github.io起了一个save分支来保存文件.所以获取源文件, 我只需要:$ git clone git@github.com:wuxiaobai24/wuxiaobai24.github.io.git安装Hexo这一步网上大多教程都写的很清楚了, 这里简略提一下, 主要是以下几个步骤:安装npm用npm安装hexohexo init blog把上面提到的源文件全部拷贝到blog文件夹中注意:这里的blog文件最好放在wuxiaobai24.github.io目录下, 这样利用backups.sh可以很快的把源文件拷贝到blog文件夹中, 但是记得把backups.sh里面最后三行关于git的删去或注释掉安装依赖首先先把主题安装下来先, 之前因为忘记了这个, 导致hexo generate失败$ git clone git@github.com:litten/hexo-theme-yilia.git themes/yilianpm install检测是否成功$ hexo g$ hexo s构建快速的写作环境将blog移到任何你想要放的位置, 然后把之前的wuxiaobai24.github.io文件夹删去在blog目录下, git clone git@github.com:wuxiaobai24/wuxiaobai24.github.io.git在vscode中安装vscode-hexo插件主要的工作流为:vscode中> hexo new生成新的文章写文章, 并> hexo generatevscode中> hexo deplot部署最后在命令行下切换到blog/wuxiaobai24.github.io中, 执行backups.sh备份源文件.PS: 个人建议把主题的config.yml也备份一下.

作为一个技术人，你是否喜欢创作，或是怀念过往又或是畅想未来，或是总结技术又或是记录生活？诚然，现在有很多平台或技术社区，里面有很多人每天都在分享，或是读书笔记又或是项目实践，或是面试经历又或是年终总结。技术社区或平台固然很热闹，但是有一些东西，又想记录在某个地方，只给有缘人。所以这正是个人博客存在的原因之一吧。你可以在自己的博客中记录各种各样的内容，电影影评、旅行日记、编程踩坑经历等等。基于此，你可能使用过或正在使用一些流行的工具如 Hexo、Jekyll 等静态博客网站生成器，又或者是 Gatsby 这种新型的 Web 构建工具。不过，你可能在寻找或者期待这样一种工具，可以更便捷地来管理博客和更舒适的编辑内容，于是今天的主角—— Hve Notes 诞生了！下面奉上介绍给各位喜欢创作的朋友???? 欢迎使用 Hve Notes ！ Github: Hve Notes 项目主页: Hve Notes 示例网站: 示例网站一 示例网站二 ✍️ Hve Notes 一个静态博客写作客户端。你可以用它来记录你的生活、心情、知识、笔记、创意… …特性???????? 你可以使用最酷的 Markdown 语法，进行快速创作 ???? 你可以给文章配上精美的封面图和在文章任意位置插入图片 ????️ 你可以对文章进行标签分组 ???? 你可以自定义菜单，甚至可以创建外部链接菜单 ???? 你可以在 ???????????????????????????? 或 ???????????????????? 设备上使用此客户端 ???? 你可以使用 ???????????????????????? ???????????????????? 或 Coding Pages 向世界展示，未来将支持更多平台 ???? 你可以进行简单的配置，接入 Gitalk 或 DisqusJS 评论系统 ???????? 你可以使用中文简体或英语 ???? 你可以任意使用应用内默认主题或任意第三方主题 ???? 当然 Hve Notes 还很年轻，有很多不足，但请相信，它会不停向前????未来，它一定会成为你离不开的伙伴尽情发挥你的才华吧！???? Enjoy~目前，Hve Notes 已经更新到了 v0.7.0 版本，基本已经可以满足日常使用。当然还有很大的成长空间，例如文章和标签的 slug 格式定制和可编辑，个性化的页面增加与配置，赋予用户更强的扩展能力，更丰富的主题等等。在此，也欢迎感兴趣的朋友可以加入我们，提出建议或共同开发，也欢迎加入我们的 Telegram 群组如果您觉得此项目还不错，欢迎 Star 支持作者，也欢迎体验之后提出您最宝贵的建议到 Issue ...

&00.上文回顾在上文 VuePress博客搭建笔记（一）简单上手 中，我简单阐述了VuePress博客搭建的过程，并对其中的一些问题进行分析记录，包括首页，侧边栏，导航栏，浏览器书签引入，挂载githubPage等等。本文将围绕着博客的个性化配置作一个整理。首先引用官网的原文重申一次VuePress博客搭建的过程：StartAs Easy as 1, 2, 3# installyarn global add vuepress@next # OR npm install -g vuepress@next# create a markdown fileecho ‘# Hello VuePress’ > README.md# start writingvuepress dev# build to static filesvuepress build&01.版本推荐VuePress的官网目前是存在两个版本的，分别为0.x版本和最新的1.x的alpha版本。在实际开发中，我经常因为混淆版本而导致一些插件不能正常引入，当然这也是因为我对VuePress的使用还不熟练。打开VuePress的官网，如果有下面绿色的Notice弹出，说明是1.x版本。0.x 的文档: v0.vuepress.vuejs.org1.x 的文档: v1.alpha.vuepress.vuejs.org如果是开发者，建议安装最新版VuePress，体验最新的轮子~yarn add vuepress -D # Install 0.x.x.yarn add vuepress@next -D # Install next.&03.Github链接与github关联的页脚链接和导航栏链接，/*** config.js* @type {{themeConfig: {lastUpdated: string, repoLabel: string, * docsDir: string, repo: string, editLinkText: string, * docsRepo: string, editLinks: boolean, docsBranch: string}}}/module.exports = { // … themeConfig: { // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL repo: ‘https://github.com/Mulander-J/Wiki1001Pro.git', // 自定义仓库链接文字。默认从 themeConfig.repo 中自动推断为 // “GitHub”/“GitLab”/“Bitbucket” 其中之一，或是 “Source”。 repoLabel: ‘GitHub’, // 以下为可选的编辑链接选项 // 假如你的文档仓库和项目本身不在一个仓库： docsRepo: ‘https://github.com/Mulander-J/Wiki1001Dev', // 假如文档不是放在仓库的根目录下： docsDir: ‘docs’, // 假如文档放在一个特定的分支下： docsBranch: ‘master’, // 默认是 false, 设置为 true 来启用 editLinks: true, // 默认为 “Edit this page” editLinkText: ‘博主通道__GitHub Private Repo ！’, // 文档更新时间：每个文件git最后提交的时间, lastUpdated: ‘Last Updated’ , }}&04.个性化主题主题修改下载默认主题npm install @vuepress/theme-default@next替换##复制node_modules/@vuepress/theme-default 文件夹##粘贴至.vuepress/ 下并更名为themeDev├─── docs│ └── .vuepress // 配置目录│ │ ├── public // 静态资源│ │ ├── theme // 主题│ │ │ ├── components // 组件│ │ │ ├── global-components // 全局组件│ │ │ ├── global-components // 全局组件│ │ │ ├── layouts // 布局(包括首页在内)│ │ │ ├── styles // 样式│ │ │ ├── util // 工具│ │ │ ├── index.js // 入口配置│ │ │ ├── noopModule.js // 依赖注入│ │ │ ├── package.json // 主题依赖│ │ │ ├── README.md // 主题说明│ │ └── config.js│ ├── FAQ // 求索模块│ ├── Store // 仓库模块│ ├── Thought // 随笔模块│ └── README.md // 博客首页└── package.json运行npm run dev关注控制台输出tip Apply theme located at G:\WorkSpace\WebStormWS\Wiki1001\Dev\docs.vuepress\theme…若果控制台能看到上面这句话或者页面能正常渲染的话，就表示主题引入成功"C:\Program Files\nodejs\node.exe" “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” run dev –scripts-prepend-node-path=auto> wiki1001@1.0.0 dev G:\WorkSpace\WebStormWS\Wiki1001\Dev> vuepress dev docswait Extracting site metadata…tip Apply theme located at G:\WorkSpace\WebStormWS\Wiki1001\Dev\docs.vuepress\theme…接下来就可以对这份theme项目作修改了，它就是载负你的博客的一个简单的VUe单页面项目。滚动条样式设置页面滚动条为渐变色&圆角样式参考CSS进阶篇–设置滚动条样式/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/::-webkit-scrollbar{ width: 8px; height: 8px; border-radius: 10px; background-color: #F5F5F5;}/定义滚动条轨道 内阴影+圆角/::-webkit-scrollbar-track{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}/定义滑块 内阴影+圆角/::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; / 线性渐变 / background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(60,186,146)), color-stop(0.72, rgb(253,187,45)), color-stop(0.86, rgb(253,187,45))); transition: 0.3s ease-in-out;}/定义滑块悬浮样式/::-webkit-scrollbar-thumb:hover{ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(253,187,45)), olor-stop(0.72, rgb(253,187,45)), color-stop(0.86, rgb(60,186,146))); transition: 0.3s ease-in-out;}渐变色标题h1{ background-image: -webkit-linear-gradient(left, #22c1c3, #fdbb2d 25%, #22c1c3 50%, #fdbb2d 75%, #22c1c3); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: myGradientChange 4s infinite linear; animation: myGradientChange 4s infinite linear;}.description,.card h2{ background-image: -webkit-linear-gradient(left, #fdbb2d, #22c1c3 25%, #fdbb2d 50%, #22c1c3 75%, #fdbb2d); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: myGradientChange 4s infinite linear; animation: myGradientChange 4s infinite linear;}@keyframes myGradientChange { 0%{ background-position: 0 0;} 100% { background-position: -100% 0;}}GoToEnd下载官方组件BackToTopnpm install @vuepress/plugin-back-top@next本地化BackToTop组件至Layout.vue中，包括首页在内都会生产该组件// 复制node_modules/@vuepress/plugin-back-top/BackToTop.vue// 粘贴至.vuepress/theme/components<template> <div> <BackToTop></BackToTop> </div></template><script>import BackToTop from ‘../components/BackToTop.vue’export default { components: { BackToTop},}</script>修改Back To Top 组件复制一个Back To Top DOM节点同时修改 transition 为 transition-group<template> <transition-group name=“fade”> <svg v-if=“topShow” class=“go-to-top” key=“goTop” @click=“scrollToTop” xmlns=“http://www.w3.org/2000/svg" viewBox=“0 0 49.484 28.284” > <g transform=“translate(-229 -126.358)"> <rect fill=“currentColor” width=“35” height=“5” rx=“2” transform=“translate(229 151.107) rotate(-45)”/> <rect fill=“currentColor” width=“35” height=“5” rx=“2” transform=“translate(274.949 154.642) rotate(-135)”/> </g> </svg> <svg v-if=“endShow” class=“go-to-top go-to-end” @click=“scrollToEnd” key=“goEnd” xmlns=“http://www.w3.org/2000/svg" viewBox=“0 0 49.484 28.284” > <g transform=“translate(-229 -126.358)"> <rect fill=“currentColor” width=“35” height=“5” rx=“2” transform=“translate(229 151.107) rotate(-45)”/> <rect fill=“currentColor” width=“35” height=“5” rx=“2” transform=“translate(274.949 154.642) rotate(-135)”/> </g> </svg> </transition-group></template>增加 变量 scrollEnd , endShow 方法 getScrollEnd() ,scrollToEnd()<script>import debounce from ’lodash.debounce’export default { props: { threshold: { type: Number, default: 300 } }, data () { return { scrollTop: null, scrollEnd: null } }, mounted () { this.scrollTop = this.getScrollTop() this.scrollEnd = this.getScrollEnd() window.addEventListener(‘scroll’, debounce(() => { this.scrollTop = this.getScrollTop() this.scrollEnd = this.getScrollEnd() }, 100)) }, methods: { getScrollTop () { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }, getScrollEnd () { return document.documentElement.scrollHeight || document.body.scrollHeight || this.threshold }, scrollToTop () { window.scrollTo({ top: 0, behavior: ‘smooth’ }) this.scrollTop = 0 }, scrollToEnd () { window.scrollTo({ top: this.scrollEnd, behavior: ‘smooth’ }) this.scrollTop = this.scrollEnd } }, computed: { topShow () { return this.scrollTop > this.threshold }, endShow () { return (this.scrollEnd - this.scrollTop) > 3this.threshold } }}</script>增加置底按钮样式，z轴旋转180度<style lang=‘stylus’ scoped>.go-to-top { cursor: pointer; position: fixed; bottom: 5rem; right: 2.5rem; width: 2rem; color: $accentColor; z-index: 1;}.go-to-end{ bottom: 2rem; transform: rotateZ(180deg);}.go-to-top:hover { color: lighten($accentColor, 30%);}@media (max-width: 959px) { .go-to-top { display: none; }}.fade-enter-active, .fade-leave-active { transition: opacity 0.3s;}.fade-enter, .fade-leave-to { opacity: 0;}</style>&05.插件-PWAyarn add -D @vuepress/plugin-pwa# OR npm install -D @vuepress/plugin-pwa//config,jsmodule.exports = {// … plugins: [ [’@vuepress/pwa’, { serviceWorker: true, //指向自定义组件 popupComponent: ‘MySWUpdatePopup’, updatePopup: { message: “新的风暴已经出现”, buttonText: “盘他” } }] ]}serviceWorker的作用大致就页面首次加载时会请求本地的serviceWorker.js去比对各个文件的版本号如果不一致则提示用户拉取更新不过这个popup的默认样式很丑????，所以官方也提供了自定义popup的接口和教程默认样式,这是原始的…eh这是官网给的模板 = = 阿咧？这是我的…emmm..可还行呢，凑合用了。这个vue的logo还会动的，不算侵权吧????…@Vue??P.S.这个popup 的内容是我自定义写的，不是官方在皮啊参考前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效前端每日实战：43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo注意v-if=“enabled” // 添加这一段指令，否则popup无法消失<SWUpdatePopup> <div v-if=“enabled” slot-scope=”{ enabled, reload, message, buttonText }” class=“my-sw-update-popup”> {{ message }}<br> <button @click=“reload”>{{ buttonText }}</button> </div></SWUpdatePopup>&06.插件-google-analytics首先你要有一个谷歌账号，然后有一个 google analytics（GA）账户然后…不用麻烦了不用麻烦了不用麻烦 不用麻烦了 不用麻烦了你们一起上 我在赶时间如何注册并设置google analytics（GA）账户GA-ID ゲットだゼーツ！安装并使用 google_analysisyarn add -D @vuepress/plugin-google-analytics# OR npm install -D @vuepress/plugin-google-analytics//config.jsmodule.exports = {… plugins: [ [’@vuepress/google-analytics’, { ga: ‘*********’//你的Google Analytics ID }], ]}google_analysis 会实时监控你的url，倘若一个页面有多个h2,h3标题，滑动滚动条导致url的变化也会被捕捉到。&07.评论系统-Valine参考Vuepress搭建带有评论系统的博客A fast, simple & powerful comment system. Valine获取APP ID 和 APP Key,请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用安装并使用 Valine# Install leancloud’s js-sdknpm install leancloud-storage –save# Install valinenpm install valine –save// Register AV objects to the globalwindow.AV = require(’leancloud-storage’);// Use importimport Valine from ‘valine’;// or Use requireconst Valine = require(‘valine’);new Valine({ el:’#vcomments’, // other config})//Page.vue<script>export default { mounted: function(){ // require window const Valine = require(‘valine’); if (typeof window !== ‘undefined’) { this.window = window window.AV = require(’leancloud-storage’) } new Valine({ el: ‘#vcomments’ , appId: ‘’,// your appId appKey: ‘’, // your appKey notify:false, //邮箱通知，可关闭 verify:false, //反人类的算术验证码，建议关闭 avatar:‘mm’, //头像，默认即可 visitor: true,//访问计数 placeholder: ‘just go go’ }); }}</script>Issue不管地址栏怎么变化，不管怎么切页面，评论内容不会随地址栏变化而变化，即无法同步。Valine实例与leancloud-storage实例 在每次页面加载时会向服务器发起带当前url参数的请求以获取评论数据，而这个url参数每次都是一样。首先Valine 实例与 leancloud-storage 实例都在 mounted 钩子中初始化或挂载至 window 对象上了，当页面 url 变化时，Page.vue 本身并没有变化，只是它身上的<Content/>内容变了，mounted没有重新触发，上面两个实例也没有改变。P.S.血的教训不要在 md 文件中直接写<Content/>,请用其他格式编译它，否则会被vuepress识别为组件而不断加载陷入死循环。[Vue warn]: Error in nextTick: “RangeError: Maximum call stack size exceeded"warn @ vue.runtime.esm.js?2b0e:601vue.runtime.esm.js?2b0e:1832 RangeError: Maximum call stack size exceededExp:只是它身上的<Content/>内容变了，只是它身上的&lt;Content/&gt;内容变了，如果重新 init 两个实例呢？通过 watch $route 重新 new 两个实例也不行。在每个页面单独写入 带 Valine 的.vue组件也不行。暂时无法解决…emmm,欲知后事如何，请听下回分解..欸，应该没有（三）了，等解决了直接写在评论里吧。 ...

VuePress博客搭建的简单教程&问题分析前奏较长，不墨迹的可直接跳转至 04.开始搭建博客 或者 博客预览00.契子偶尔的整理洁癖平常有收藏+书签的习惯github私有仓库免费开放翻看博文 ： 作为软件工程师，如何进行知识管理01.需求分析Ok，因为以上的四个契机，因缘巧合鬼使神差地 ，就做出了搭建一个 实用性 个人博客的想法。Well,那就来先分析下基本的需求吧。个人博客 => 博文产出&支持MarkDown格式&方便管理和维护知识库 => 知识归纳&习惯培养初步设定：将各应用中的书签导入到博客中，在博客中有一块区域负责对知识的消化与产出配合对云仓库和随笔这两个模块的管理来培养习惯02.可行性分析这时我想要的博客是能在 任意场所 任意时间 任意平台 都能打开即食用的，对所有的知识/书签/博文都能做一个快速的查询,而且不想花钱搭建云服务器和云数据库。正好我目前正在使用vue框架，那么就决定是你了，VuePress ！基于VuePress搭建的项目有很多，就举最近看到并在食用的这个，awesome-bookmarks为例，整体满足我的需求，感觉可以的。…程序员施工中…目前使用下来看，VuePress上手不算难也不算太简单，花了两天才正式撸出这个blog，还是费了些二虎之力的。使用的技术点：npmVuePressgithub追加技术点：vueRegex03.数据源和工具准备数据awesome-bookmarks前端最实用书签(持续更新)工具VuePress官方文档node.js>=8.0Yarn一个文本编辑器(比如webstorm,主要用来可视化执行命令)04.开始搭建博客安装 1.安装程序 node.js 或者 Yarn。VuePress支持使用Yarn和npm来安装，Node.js版本需要>=8才可以。此处选择熟悉的工具即可，博主这里用的是npm咯。2.打开cmd，在控制台输入以下代码：全局安装VuePressyarn global add vuepress # 或者：npm install -g vuepress## 或者也可以在已存在的项目中开发，将 VuePress 作为一个本地依赖安装，## 上下两条选择一个即可，博主选择上者，省点折腾。## yarn add -D vuepress # 或者：npm install -D vuepress创建新项目目录mkdir projectcd project初始化项目yarn init -y # 或者 npm init -y接着，在 package.json 里加一些脚本:{ “scripts”: { “docs:dev”: “vuepress dev docs”, “docs:build”: “vuepress build docs” /* docs:dev 键值可以自定义修改，此处是为了和一些项目中默认脚本中自带的 dev 区分开。 如果修改了这个doc:dev 为 mydev，那么下面执行vuepress dev docs的命令就变成了npm run mydev npm run mydev 等于在该项目的根目录下执行vuepress dev doc vuepress dev doc 做的就是调用安装的vuepress去根据你目录中的.vuepress配置项和docs下的所有.md/。html文件做一个项目的编译和打包 docs:build 同理 / }}然后就可以开始写作了:yarn docs:dev # 或者：npm run docs:dev要生成静态的 HTML 文件，运行：yarn docs:build # 或者：npm run docs:build默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上.不习惯命令行输入的也可以直接依靠windows可视化操作建立如下工程目录。project├─── docs│ ├── README.md└── package.json在README.md中输入一些内容，在package.json中注入脚本命令。并将命令挂载到webstorm的命令配置处。然后点击运行run dev ，run build 来自动生成.vuepress文件夹project├─── docs│ ├── README.md│ └── .vuepress│ ├── dist│ ├── public│ └── config.js└── package.json不管使用哪种方式，最终的项目结构应该和上面一样。docs文件夹是你的根目录，也是vuepress要去解析的文件夹，docs下的README.md可以理解为首页页面。docs下的.vuepress是一些配置文件，这里可以存放图片等静态资源，一些主题配置，自定义组件等等至此，一个基于docs文件夹下的README.md文件 生成的页面 就 制作完成了。????05.config.js基本配置module.exports = { title: ‘Wiki 1001’, // 页签标题 : A001_VuePress博客搭建的简单教程&问题分析 # | Wiki 1001 description: ‘金志相的 Wiki 1001 维基百科’, // meta 中的描述文字，意义不大，SEO用 // 注入到当前页面的 HTML <head> 中的标签 head: [ // 增加一个自定义的 favicon(网页标签的图标) // 这里的 ‘/’ 指向 docs/.vuepress/public 文件目录 // 即 docs/.vuepress/public/img/geass-bg.ico [’link’, { rel: ‘icon’, href: ‘/img/geass-bg.ico’ }], ], base: ‘/Wiki1001Pro/’, // 这是部署到github相关的配置 markdown: { lineNumbers: true // 代码块显示行号 }, }config.js中继续配置主题参数 顶部导航栏module.exports = { … themeConfig: { sidebarDepth: 4, // e’b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。 lastUpdated: ‘Last Updated’ ,// 文档更新时间：每个文件git最后提交的时间, // 顶部导航栏 nav:[ // 单项 text：显示文字，link：指向链接 // 这里的’/’ 指的是 docs文件夹路径 // [以 ‘/’ 结尾的默认指向该路径下README.md文件] { text: ‘求索’, link: ‘/FAQ/’ }, // http://localhost:8080/Wiki1001Pro/FAQ/ { text: ‘仓库’, link: ‘/Store/’ }, { text: ‘随笔’, link: ‘/Thought/’ }, // 多项，下拉形式 { text: ‘Concat’, items: [ // link：指向链接也可以是外网链接 { text: ‘Segmentfault’, link: ‘https://segmentfault.com/u/mulander’ }, ] }, { text: ‘GitHub’, items: [ { text: ‘GitHub首页’, link: ‘https://github.com/Mulander-J’ }, { text: ‘Island’, link: ‘https://mulander-j.github.io/island/code/html/index.html’ }, { text: ‘TimeWaster’, link: ‘https://mulander-j.github.io/timeWaster/demo/index.html#/’ }, ] }, ], }}config.js中继续配置主题参数 侧边栏module.exports = { … themeConfig: { … // 侧边栏菜单( 一个模块对应一个菜单形式 ) sidebar:{ // 打开FAQ主页链接时生成下面这个菜单 ‘/FAQ/’:[ //多级菜单形式 { // 菜单名 title: ‘消化堆’, // 子菜单 children: [ // [’’,’’]=>[路径,标题] // 或者写成 ‘路径’,标题自动识别为该地址的文件中的h1标题 // 不以 ‘/’ 结尾的就是指向.md文件 [’/FAQ/DigestionHeap/Digested’,‘消化过’], // ‘/FAQ/DigestionHeap/Digested.md’文件 [’/FAQ/DigestionHeap/Digesting’,‘消化中’], [’/FAQ/DigestionHeap/DigestWill’,‘待消化’] ] }, { title: ‘输出层’, children: [ [’/FAQ/Console/A001’,’#A001_VuePress’], [’/FAQ/Console/A002’,’#A002_插件清单’] ] }, [’/FAQ/’,‘百科首页’], [’/FAQ/Pool/SkillStack’,‘技术栈’], [’/FAQ/Pool/Review’,‘归去来’] ], // 打开Thought主页链接时生成下面这个菜单 ‘/Thought/’:[ [’/Thought/’,‘随笔首页’], { title: ‘游记’, children: [ [’/Thought/Travels/beiPing’,‘北平游记’], ] }, { title: ‘年终回顾’, children: [ [’/Thought/YearReview/2018’,‘2018年’], [’/Thought/YearReview/2019’,‘2019年’] ] }, ], // 打开Store主页链接时生成下面这个菜单 ‘/Store/’: [ [’’,‘仓库首页’], { title: ‘应用’, children: [ [’/Store/Apps/DownDoors’, ‘下载门户’], [’/Store/Apps/OwnTest’, ‘博主测评’] ] }, { title: ‘电影’, children: [ [’/Store/Films/’,‘收藏级电影’] ] }, { title: ‘动画’, children: [ [’/Store/Anime/’,‘收藏级动画’] ] }, ] },}注意事项和图标/图片等静态资源相关的 其 ‘/’ 默认指向的是 docs/.vuepress/public/和侧边栏/导航栏相关的地址配置 其 ‘/’ 默认指向的是 docs/侧边栏/导航栏指向.md文件的需要先建立相关.md文件，不然会报404或者页面空白06.基本目录结构本博客的工程目录结构-版本以编辑时间为准，可配合上文 config.js 关联配置Dev├─── docs│ └── .vuepress // 配置目录│ │ ├── public // 静态资源│ │ ├──── img│ │ ├────── geass-bg.ico // 图标│ │ ├────── logo.jpg // 首页logo│ │ └── config.js│ ├── FAQ // 求索模块│ │ ├── Console // 一级目录 输出层│ │ │ ├── img // 博文引用 的 相关图片│ │ │ │ ├── A001 // A001博文的图片库│ │ │ │ └──── 001.jpg │ │ │ ├── A001.md // 输出层│ │ │ └── A002.md // 输出层│ │ ├── DigestionHeap // 一级目录 消化堆│ │ │ ├── Digested.md // 二级目录 消化过│ │ │ ├── Digesting.md // 二级目录 消化中│ │ │ └── DigestWill.md // 二级目录 待消化│ │ ├── Pool // 静态池│ │ │ ├── SkillStack.md // 技术栈│ │ │ └── Review.md // 归去来│ │ └── README.md // 求索首页│ ├── Store│ │ ├── Anime // 一级目录 动漫│ │ │ └── README.md│ │ ├── Apps // 一级目录 应用│ │ │ ├── DownDoors.md // 下载门户│ │ │ └── OwnTest.md // 博主测评│ │ ├── Films // 一级目录 电影│ │ │ └── README.md│ │ └── README.md // 仓库首页│ ├── Thought│ │ ├── Travels // 一级目录 游记│ │ │ └── beiPing.md │ │ ├── YearReview // 一级目录 年终回顾│ │ │ ├── img // 博文引用 的 相关图片│ │ │ │ ├── 2018 // 2018博文的图片库│ │ │ │ ├──── 001.jpg │ │ │ │ ├─——─ 002.jpg │ │ │ │ └──── 003.jpg │ │ │ ├── 2018.md │ │ │ └── 2019.md │ │ └── README.md // 随笔首页│ └── README.md // 博客首页└── package.json07.博客首页—home: trueheroImage: /img/logo.jpgheroText: Wiki 1001tagline: Meet 1000 Books & Unit Them Into 1 WikiactionText: Get Wiki →actionLink: /FAQ/features:- title: Wiki - 求索 details: 基于书签对知识点进行 整理，吸收，吐纳，归档。吾将上下而求索…- title: Store - 仓库 details: 展望云仓库而归纳整理，方便行事&培养习惯。鱼和熊掌我全都要…- title: Thought - 随笔 details: 活着，是一件最能带来满足感的事。细细琢磨吧，人生啊，有意思的很…footer: MIT Licensed | Copyright © 2019.01.11-present Mulander-J—oops！ ???? footer 没截到 ，应该不用我多讲了吧。08.导入书签首先，从Chrome浏览器中出的书签是下面这个格式的 <DT><H3 ADD_DATE=“1547274523” LAST_MODIFIED=“1547274529”>myGits</H3> <DL><p> <DT><A HREF=“https://mulander-j.github.io/Wiki1001Pro/index.html" ADD_DATE=“1547274505”>Wiki 1001</A> <DT><A HREF=“https://mulander-j.github.io/timeWaster/demo/index.html#/" ADD_DATE=“1546489726” ICON=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACpElEQVQ4jT2Su29cZRDFfzPfd+8+/FrjKI4TiEAWiJcQ/AGUdPQpaBB/EhIFDR3/AEKyUAoKkNKBgUgUIGEFRzJ+xbte7+7de785FGs4zZFG8zhnZgzg20dfvNWH9ZIsqgpoWaGqVtz+F1ihi2KGyvHJ5e/286dfv+699AMwCiIwsMAwQLcVtiKBzIyIUD/V3kZ8lqveYGipbEnqmQwzIBkqgQ0yRYXUgG6bmBnuFr2qdnXdpoe6EBRJAgUQgVSaTvW9DZ0PG11Pr2VmEhFShFYiJEXxNtwQELAaD4YRpbD+8ksMHm5zdPGcprQk81VOCEnmDj70UFRm9N1ow0pbTI4pZPXuho0e3LGmbe345tRuFo1pGea9yuglonTmXXRGF4zTgnhlSH+0RswapKC9uGF2Nia5czO+5tKnpNc2meSGq+sxs2VLXlLTlxhO4PjqGTvvPeT+u/u8+PEILQvRBtWgZv+jDzDg6PCI9mrOzvoILPC6WhJAVfd4kHb4+/FTjucXbHz8BtPZDdF0vPPoQ/qjNY4ODimThlyvrtOWFqetb/cS5F7Fq5t77N3b4+TZc07OT1FbmD6/pF7rgSD3KkwgRARkKpAMwyjLjrW7I4S4//4+63dHmBmzf8bMzyas744o8xZPjptTvOC5ZJlJhskk+Xatp9880U+fH8hAucr65cvH+uvgUOu7WyIkd5NhZGXlliVuq7/1KjE/m5AbWMwafvvqe3JV0Y7nJJzZ6eR/C26uIMgWbigQUoSULOnOcMsJaX45JaVEdetfi07myQwLg5SyWQZvs5mnqvYSgZkxyDWD3OfFfMJy0TLsDXAMM8cNJNKg6rPomi6f//nrH7tvvv1JKdo2984oRkBlibU8oO1auhKkBElQBLjZomu6MuW7fwHKV31zU2eghQAAAABJRU5ErkJggg==">TWaster</A> </DL><p></DT>其次，我对markdown的语法其实不是很熟。对于链接的写法我直接复制过来的如下:[链接][3]emm…这样写我几百个书签岂不是要编号编到死哦。????于是我取巧了下，用下面这种vue写法替代<ul> <li v-for=“a in [ {title:‘让我帮你百度一下’,url:‘http://baidu.apphb.com/’}, {title:‘Kaspersky Cyberthreat’,url:‘https://cybermap.kaspersky.com/’}, {title:‘Breathingearth’,url:‘http://www.breathingearth.net/’} ]"> <a :href=‘a.url’ target=’_blank’>{{a.title}}<svg xmlns=“http://www.w3.org/2000/svg" aria-hidden=“true” x=“0px” y=“0px” viewBox=“0 0 100 100” width=“15” height=“15” class=“icon outbound”><path fill=“currentColor” d=“M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z”></path> <polygon fill=“currentColor” points=“45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9”></polygon></svg></a> </li></ul>这样写确实比编着号写方便，但是语义不强，阅读性和维护性不太好。直到我突然看到了这种写法链接WTF?!???? ????真的难受，我写了一半了欸。为了完整性和一致性，改回来！！！那么怎么把chrome的书签导入到markdown里呢？我是这样做的<DL><p> <DT><A HREF=“https://mulander-j.github.io/Wiki1001Pro/index.html" ADD_DATE=“1547274505”>Wiki 1001</A> <DT><A HREF=“https://mulander-j.github.io/timeWaster/demo/index.html#/" ADD_DATE=“1546489726” ICON=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACpElEQVQ4jT2Su29cZRDFfzPfd+8+/FrjKI4TiEAWiJcQ/AGUdPQpaBB/EhIFDR3/AEKyUAoKkNKBgUgUIGEFRzJ+xbte7+7de785FGs4zZFG8zhnZgzg20dfvNWH9ZIsqgpoWaGqVtz+F1ihi2KGyvHJ5e/286dfv+699AMwCiIwsMAwQLcVtiKBzIyIUD/V3kZ8lqveYGipbEnqmQwzIBkqgQ0yRYXUgG6bmBnuFr2qdnXdpoe6EBRJAgUQgVSaTvW9DZ0PG11Pr2VmEhFShFYiJEXxNtwQELAaD4YRpbD+8ksMHm5zdPGcprQk81VOCEnmDj70UFRm9N1ow0pbTI4pZPXuho0e3LGmbe345tRuFo1pGea9yuglonTmXXRGF4zTgnhlSH+0RswapKC9uGF2Nia5czO+5tKnpNc2meSGq+sxs2VLXlLTlxhO4PjqGTvvPeT+u/u8+PEILQvRBtWgZv+jDzDg6PCI9mrOzvoILPC6WhJAVfd4kHb4+/FTjucXbHz8BtPZDdF0vPPoQ/qjNY4ODimThlyvrtOWFqetb/cS5F7Fq5t77N3b4+TZc07OT1FbmD6/pF7rgSD3KkwgRARkKpAMwyjLjrW7I4S4//4+63dHmBmzf8bMzyas744o8xZPjptTvOC5ZJlJhskk+Xatp9880U+fH8hAucr65cvH+uvgUOu7WyIkd5NhZGXlliVuq7/1KjE/m5AbWMwafvvqe3JV0Y7nJJzZ6eR/C26uIMgWbigQUoSULOnOcMsJaX45JaVEdetfi07myQwLg5SyWQZvs5mnqvYSgZkxyDWD3OfFfMJy0TLsDXAMM8cNJNKg6rPomi6f//nrH7tvvv1JKdo2984oRkBlibU8oO1auhKkBElQBLjZomu6MuW7fwHKV31zU2eghQAAAABJRU5ErkJggg==">TWaster</A></DL><p>Ctrl+F 或者 Ctrk+R 唤出文档寻找和替换菜单输入 " ADD_DATE[^>]"> 替换为 )[输入 <DT><A HREF=” 替换为 (输入 <DL><p> 替换为 ‘‘输入 </DL><p> 替换为 ‘‘得到结果如下(http://alink.com)[链接]6.然后选中链接或者链接标题移动一下就可以了。这样所有的链接都出来了，只是要每个都去加回车换行和互换前后顺序。如果有其他更好的方法，可以给我留言~09.挂载GitHub因为这段时间github私有仓库免费开放了，我亲自试了下，公有私有互相切换是真的丝滑，真香！所以这个博客工程也就尝试性地放到了私有仓库里，又因为私有仓库不能创建github-page，所以我只好创建了一个对应的公有仓库用来存放dist静态站点。同时，也很好地区分开了开发环境与生产环境嗯，这么解释就舒服多了，一点也不麻烦????建立一个公有仓库 ： https://github.com/Mulander-J…在 setting 里设置好github-page属性docs/.vuepress/config.js 中配置 对应仓库名 Wiki1001Probase: ‘/Wiki1001Pro/’// 这是部署到github相关的配置将build获得的dist文件夹上传至github访问https://github.com/Mulander-J…10.其他配置详细的目前还没有试过就不继续写了，走到这里的话应该能搭建出和本博客一样的站点了。具体的可以去网上继续学习研究VuepPress官网使用VuePress搭建一个类型element ui文档 ...

8012年马上过去了，整理一下今年的博客内容。canvas烟花锦集时间：2018-01-15内容：了解canvas知识，不同烟火效果实现方式。链接：https://www.bestvist.com/p/49Skeleton Screen – 骨架屏时间：2018-01-19内容：用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验。链接：https://www.bestvist.com/p/50Fetch – http请求的另一种姿势时间：2018-02-05内容：传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据，不注重分离的原则。而Fetch API是基于Promise设计，专为解决XHR问题而出现。链接：https://www.bestvist.com/p/51JS中的async/await – 异步隧道尽头的亮光时间：2018-02-07内容：JS中的异步操作从最初的回调函数演进到Promise，再到Generator，都是逐步的改进，而async函数的出现仿佛看到了异步方案的终点，用同步的方式写异步。链接：https://www.bestvist.com/p/52mvvm-simple双向绑定简单实现时间：2018-04-17内容：mvvm模式解放DOM枷锁链接：https://www.bestvist.com/p/53JavaScript Promise查缺补漏时间：2018-04-23内容：Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。链接：https://www.bestvist.com/p/54鼠标移入移出效果 – jQuery/Vue版时间：2018-06-21内容：根据鼠标hover的方向弹出、收回遮罩层，分为jQuery和Vue版。链接：https://www.bestvist.com/p/56后管模版整理时间：2018-08-15内容：整理一些后管模版，包含bootstrap、vue、react、angular等主流框架。链接：https://www.bestvist.com/p/57花样形状 – CSS时间： 2018-08-27内容：只使用一个html元素绘制图形，部分图形需要浏览器支持。链接：https://www.bestvist.com/p/58UI酷炫交互效果时间：2018-10-08内容：多端交互效果，UI设计。链接：https://www.bestvist.com/p/59vue组件从开发到发布时间：2018-10-15内容：梳理一篇vue组件从开发到发布托管流程。链接：https://www.bestvist.com/p/60JWT - just what?时间：2018-12-07内容：初见JWT，不知所云，赶紧Google(百度)一下，原来是跨域身份验证解决方案。链接：https://www.bestvist.com/p/62原文地址：https://www.bestvist.com/p/63