diff --git a/_config.yml b/_config.yml
index 49309d00e..1e5654f7e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,6 +1,6 @@
# Hexo Configuration
-## Docs: http://zespia.tw/hexo/docs/configuration.html
-## Source: https://github.com/tommy351/hexo/
+## Docs: https://hexo.io/docs/
+## Source: https://github.com/hexojs/hexo
# Site
title: Vue.js
@@ -78,8 +78,8 @@ pagination_dir: page
disqus_shortname:
# Extensions
-## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
-## Themes: https://github.com/tommy351/hexo/wiki/Themes
+## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
+## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: vue
exclude_generator:
@@ -136,7 +136,7 @@ offline:
origin: maxcdn.bootstrapcdn.com
# Deployment
-## Docs: http://zespia.tw/hexo/docs/deployment.html
+## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:vuejs/cn.vuejs.org.git
diff --git a/src/resources/partners.md b/src/resources/partners.md
new file mode 100644
index 000000000..2dfc5f711
--- /dev/null
+++ b/src/resources/partners.md
@@ -0,0 +1,87 @@
+---
+type: partners
+partners: true
+title: Vue Partners
+proficiencies_urls:
+ VueJs: https://vuejs.org
+ Laravel: https://laravel.com
+ Node: https://nodejs.org
+partners_list:
+ -
+ name: Vehikl
+ logo: vehikl.png
+ description:
+ Vehikl is a software consultancy specialising in PHP and JavaScript. We build best-in-class web applications written with popular frameworks such as Laravel, Express, NestJS, Vue, and React. Think of us as an extension of your team.
+ proficiencies:
+ - VueJs
+ - Laravel
+ - Node
+ - Team Augmentation
+ location: Ontario, Canada
+ languages:
+ - English
+ url_text: www.vehikl.com
+ url_link: www.vehikl.com?utm_source=vue_partners_page
+ hire_url: www.vehikl.com/contact/?utm_source=vue_partners_page
+ email: go+partner@vehikl.com
+ social_links:
+ -
+ name: Github
+ class: github
+ url: 'https://github.com/vehikl'
+ -
+ name: Twitter
+ class: twitter
+ url: 'https://twitter.com/vehikl'
+ -
+ name: Instagram
+ class: instagram
+ url: 'https://www.instagram.com/vehiklteam/'
+
+ -
+ name: Modus Create
+ logo: https://res.cloudinary.com/modus-labs/image/upload/v1533109874/modus/logo-vertical-black.svg
+ description:
+ "Modus Create is a digital product agency that supports clients with business and product strategy consulting, customer experience, cloud services, and Agile software delivery. Our official partnerships with Atlassian, AWS, InVision, Cloudflare, GitHub, Ionic Framework, and Vue.js reinforce our proven results with digital transformation with organizations from startups to the Fortune 100."
+ proficiencies:
+ - VueJs
+ - name: AWS
+ url: https://moduscreate.com/partners/aws/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Atlassian
+ url: https://moduscreate.com/partners/atlassian/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Ionic
+ url: https://moduscreate.com/partners/ionic/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Product Management
+ url: https://moduscreate.com/what-we-do/product-management/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Customer Experience
+ url: https://moduscreate.com/what-we-do/customer-experience/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Agile Transformation
+ url: https://moduscreate.com/what-we-do/agile-transformation/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ - name: Cloud Migration
+ url: https://moduscreate.com/what-we-do/cloud-migration/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ location: Reston, VA, USA / Los Angeles, CA, USA / Cluj, Romania / San José, Costa Rica
+ languages:
+ - English
+ - Global
+ url_text: moduscreate.com
+ url_link: moduscreate.com/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ hire_url: moduscreate.com/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
+ email: contact@moduscreate.com
+ social_links:
+ -
+ name: Github
+ class: github
+ url: 'https://github.com/ModusCreateOrg'
+ -
+ name: Twitter
+ class: twitter
+ url: 'https://twitter.com/ModusCreate'
+ -
+ name: LinkedIn
+ class: linkedin
+ url: 'https://www.linkedin.com/company/modus-create-inc'
+ -
+ name: YouTube
+ class: youtube
+ url: 'https://www.youtube.com/moduscreate'
+---
diff --git a/src/resources/themes.md b/src/resources/themes.md
new file mode 100644
index 000000000..c46e8c8f2
--- /dev/null
+++ b/src/resources/themes.md
@@ -0,0 +1,69 @@
+---
+title: Themes
+type: resources
+order: 804
+---
+{% raw %}
+
+
+
+
+ Want to feature your themes here?
+ Contact us!
+
+
在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验 2。
-
-
-## 另一个自定义校验的例子
-
-在第三个示例中，我们已经构建了一些你可能在一些调研类应用中见过的东西。用户需要花掉“预算”来为歼星舰模型装配一套部件。总价必须等于 100。先看 HTML。
-
-``` html
-
-```
-
-这组输入框覆盖了五个不同的部件。注意这里为 `v-model` 特性添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug，那就是当其值为空的时候，它会回到字符串格式，稍后你将会看到变通的办法。为了让用户使用起来更方便，我们添加展示了一个当前的总和，这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。
-
-``` js
-const app = new Vue({
- el: '#app',
- data:{
- errors: [],
- weapons: 0,
- shields: 0,
- coffee: 0,
- ac: 0,
- mousedroids: 0
- },
- computed: {
- total: function () {
- // 必须解析，因为 Vue 会将空值转换为字符串
- return Number(this.weapons) +
- Number(this.shields) +
- Number(this.coffee) +
- Number(this.ac+this.mousedroids);
- }
- },
- methods:{
- checkForm: function (e) {
- this.errors = [];
-
- if (this.total != 100) {
- this.errors.push('Total must be 100!');
- }
-
- if (!this.errors.length) {
- return true;
- }
-
- e.preventDefault();
- }
- }
-})
-```
-
-我们将总和设置为了一个计算属性，从那个我们解决掉的 bug 外面看上去，这已经足够了。我的 `checkForm` 方法现在只需要关注总和是不是 100 了。你可以在这里试用：
-
-在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验3。
-
-
-## 服务端校验
-
-在我们最终的示例中，我们构建了一些用到 Ajax 的服务端校验的东西。这个表单将会问你为一个新产品起名字，并且将会确保这个名字是唯一的。我们快速写了一个 [OpenWhisk](http://openwhisk.apache.org/) 的 serverless action 来进行这个校验。虽然这不是非常重要，但其逻辑如下：
-
-``` js
-function main(args) {
- return new Promise((resolve, reject) => {
- // 不好的产品名：vista, empire, mbp
- const badNames = ['vista', 'empire', 'mbp'];
-
- if (badNames.includes(args.name)) {
- reject({error: 'Existing product'});
- }
-
- resolve({status: 'ok'});
- });
-}
-```
-
-基本上除了“vista”、“empire”和“mbp”的名字都是可以接受的。好，让我们来看看表单。
-
-``` html
-
-```
-
-这里没有任何特殊的东西。接下来我们再看看 JavaScript。
-
-``` js
-const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
-
-const app = new Vue({
- el: '#app',
- data: {
- errors: [],
- name: ''
- },
- methods:{
- checkForm: function (e) {
- e.preventDefault();
-
- this.errors = [];
-
- if (this.name === '') {
- this.errors.push('Product name is required.');
- } else {
- fetch(apiUrl + encodeURIComponent(this.name))
- .then(res => res.json())
- .then(res => {
- if (res.error) {
- this.errors.push(res.error);
- } else {
- // 在成功的时候重定向到一个新的 URL 或做一些别的事情
- alert('ok!');
- }
- });
- }
- }
- }
-})
-```
-
-我们从一个运行在 OpenWhisk 的 API 的 URL 变量开始。现在注意 `checkForm`。在这个版本中，我们始终阻止了表单的提交 (当然，它也可以通过 Vue 在 HTML 中完成)。你可以看到一个基本的校验，即 `this.name` 是否为空，然后我们请求这个 API。如果名字是无效的，我们就添加一个错误。如果是有效的，我们就不做任何事 (只是一个 alert)，但是你可以引导用户去一个新页面，在 URL 中带上产品的名字，或者其它行为。接下来你可以体验这个 demo：
-
-在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验4。
-
-
-## 其它替代模式
-
-这份秘笈专注在“手动”校验表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试且保持日常更新的代码。其中包括以下 Vue 的表单校验库：
-
-* [vuelidate](https://github.com/monterail/vuelidate)
-* [VeeValidate](https://logaretm.github.io/vee-validate/)
+---
+title: 表单校验
+type: cookbook
+order: 3
+---
+
+## 基本的示例
+
+
+
+表单校验是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持，你也还是有很多时候需要进行自定义的校验。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。
+
+给定一个表单，包含三个字段，其中两个是必填项。我们先来看看 HTML：
+
+``` html
+
+```
+
+我们从头到尾看一遍，这个 `
+```
+
+尽管这里的不同点很小，注意顶端的 `novalidate="true"`。但是这很重要，因为浏览器会尝试在 `type="email"` 的字段校验邮件地址。坦白说在这个案例中浏览器的校验规则是值得信任的，不过我们想要创建一个自定义校验的例子，所以把它禁用了。以下是更新后的 JavaScript。
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ email: null,
+ movie: null
+ },
+ methods: {
+ checkForm: function (e) {
+ this.errors = [];
+
+ if (!this.name) {
+ this.errors.push("Name required.");
+ }
+ if (!this.email) {
+ this.errors.push('Email required.');
+ } else if (!this.validEmail(this.email)) {
+ this.errors.push('Valid email required.');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
+ e.preventDefault();
+ },
+ validEmail: function (email) {
+ var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(email);
+ }
+ }
+})
+```
+
+如你所见，我们添加了一个新方法 `validEmail`，它将会在 `checkForm` 中被调用了。我们现在可以这样运行示例：
+
+在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验 2。
+
+
+## 另一个自定义校验的例子
+
+在第三个示例中，我们已经构建了一些你可能在一些调研类应用中见过的东西。用户需要花掉“预算”来为歼星舰模型装配一套部件。总价必须等于 100。先看 HTML。
+
+``` html
+
+```
+
+这组输入框覆盖了五个不同的部件。注意这里为 `v-model` 特性添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug，那就是当其值为空的时候，它会回到字符串格式，稍后你将会看到变通的办法。为了让用户使用起来更方便，我们添加展示了一个当前的总和，这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data:{
+ errors: [],
+ weapons: 0,
+ shields: 0,
+ coffee: 0,
+ ac: 0,
+ mousedroids: 0
+ },
+ computed: {
+ total: function () {
+ // 必须解析，因为 Vue 会将空值转换为字符串
+ return Number(this.weapons) +
+ Number(this.shields) +
+ Number(this.coffee) +
+ Number(this.ac+this.mousedroids);
+ }
+ },
+ methods:{
+ checkForm: function (e) {
+ this.errors = [];
+
+ if (this.total != 100) {
+ this.errors.push('Total must be 100!');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
+ e.preventDefault();
+ }
+ }
+})
+```
+
+我们将总和设置为了一个计算属性，从那个我们解决掉的 bug 外面看上去，这已经足够了。我的 `checkForm` 方法现在只需要关注总和是不是 100 了。你可以在这里试用：
+
+在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验3。
+
+
+## 服务端校验
+
+在我们最终的示例中，我们构建了一些用到 Ajax 的服务端校验的东西。这个表单将会问你为一个新产品起名字，并且将会确保这个名字是唯一的。我们快速写了一个 [OpenWhisk](http://openwhisk.apache.org/) 的 serverless action 来进行这个校验。虽然这不是非常重要，但其逻辑如下：
+
+``` js
+function main(args) {
+ return new Promise((resolve, reject) => {
+ // 不好的产品名：vista, empire, mbp
+ const badNames = ['vista', 'empire', 'mbp'];
+
+ if (badNames.includes(args.name)) {
+ reject({error: 'Existing product'});
+ }
+
+ resolve({status: 'ok'});
+ });
+}
+```
+
+基本上除了“vista”、“empire”和“mbp”的名字都是可以接受的。好，让我们来看看表单。
+
+``` html
+
+```
+
+这里没有任何特殊的东西。接下来我们再看看 JavaScript。
+
+``` js
+const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
+
+const app = new Vue({
+ el: '#app',
+ data: {
+ errors: [],
+ name: ''
+ },
+ methods:{
+ checkForm: function (e) {
+ e.preventDefault();
+
+ this.errors = [];
+
+ if (this.name === '') {
+ this.errors.push('Product name is required.');
+ } else {
+ fetch(apiUrl + encodeURIComponent(this.name))
+ .then(res => res.json())
+ .then(res => {
+ if (res.error) {
+ this.errors.push(res.error);
+ } else {
+ // 在成功的时候重定向到一个新的 URL 或做一些别的事情
+ alert('ok!');
+ }
+ });
+ }
+ }
+ }
+})
+```
+
+我们从一个运行在 OpenWhisk 的 API 的 URL 变量开始。现在注意 `checkForm`。在这个版本中，我们始终阻止了表单的提交 (当然，它也可以通过 Vue 在 HTML 中完成)。你可以看到一个基本的校验，即 `this.name` 是否为空，然后我们请求这个 API。如果名字是无效的，我们就添加一个错误。如果是有效的，我们就不做任何事 (只是一个 alert)，但是你可以引导用户去一个新页面，在 URL 中带上产品的名字，或者其它行为。接下来你可以体验这个 demo：
+
+在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验4。
+
+
+## 其它替代模式
+
+这份秘笈专注在“手动”校验表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试且保持日常更新的代码。其中包括以下 Vue 的表单校验库：
+
+* [vuelidate](https://github.com/monterail/vuelidate)
+* [VeeValidate](https://logaretm.github.io/vee-validate/)
diff --git a/src/v2/examples/themes.md b/src/v2/examples/themes.md
deleted file mode 100644
index 33611cb66..000000000
--- a/src/v2/examples/themes.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 主题
-type: examples
-is_new: true
-order: 13
----
-> 通过合作伙伴 [Creative Tim](https://creative-tim.com?affiliate_id=116187) 创建的例子，你可以在一个真实的应用中看到它是如何构建起来的，它背后的技术栈以及你学到的大部分概念。
-
-{% raw %}
-
-
-
- ![]()
-
-
{{product.title}}
- {{product.price}}$
-
-
{{product.description}}
-
-
-