Fix article display error, add article comment, user login, user add, post article, user center...

Author: crlang

README.md

@@ -20,6 +20,21 @@
 
 > 3. modify `src/utils/api.js` file, change youre config.  *「E.g: site url, site language, site protocol etc.」*
 
+> 4. After vueWPress 0.23 release, you need to install a plugin JWT Authentication for WP-API, Can be downloaded via background plugin search or [check here](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/)
+
+> 4.1 Modify the wp-config.php file in Wordpress root
+
+> 4.1.2 Find: `define('NONCE_SALT'`
+
+> 4.1.3 Add the following to the line under `define('NONCE_SALT'`
+
+``` bash
+define('JWT_AUTH_SECRET_KEY', 'you-64-secret-key');
+#the random key here https://api.wordpress.org/secret-key/1.1/salt/
+define('JWT_AUTH_CORS_ENABLE', true);
+```
+
+> 4.1.4 `you-64-secret-key` Is a 64-bit random key, more: [check here](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/)
 
 ## Build Setup
 
@@ -44,79 +59,89 @@ npm run build
 
 > 3. Show topic on the topic page. [jump](#topic) 「ver: 0.12」
 
-> 4. Show topic detail on the detail page. [jump](#page) 「ver: 0.12」
+> 4. Show topic detail on the detail page. 「ver: 0.12」
 
 > 5. Show tags on the tags page. [jump](#tags) 「ver: 0.16」
 
-> 6. Show tag detail on the detail page. [jump](#tag) 「ver: 0.16」
+> 6. Show tag detail on the detail page. 「ver: 0.16」
+
+> 7. Show All media on the gallery page. 「ver: 0.16」
 
-> 7. Show All media on the gallery page. [jump](#media) 「ver: 0.16」
+> 8. Show All comment on the comments page. 「ver: 0.19」
 
-> 8. Show All comment on the comments page. [jump](#comments) 「ver: 0.19」
+> 9. Show article on the articles page. [jump](#articles) 「ver: 0.23」
 
-> 9. Show article on the articles page. [jump](#Articles) 「ver: 0.19」
+> 10. Added comments on article page. [jump](#comment) 「ver: 0.31」
 
-> 10. More features are in development ...
+> 11. Increase article publishing capabilities.  [jump](#post) 「ver: 0.31」
+
+> 12. Added user center to display nicknames, avatars, and logouts. [jump](#member) 「ver: 0.31」
+
+> 13. Added login and registration functions. [jump](#login) 「ver: 0.31」
+
+> 14. More features are in development ...
 
 ## Preview Me
 ### Home
-![home](./previews/home.png)
+![home](./previews/home_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
 ### Articles
-![home](./previews/articles.png)
+![home](./previews/articles_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
 ### Article
-![home](./previews/article.png)
+![home](./previews/article_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
 ### Topic
-![topic](./previews/topic.png)
+![topic](./previews/topic_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### Page
-![page](./previews/page.png)
+### Tags
+![page](./previews/tags_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### Tags
-![page](./previews/tags.png)
+### Member
+![page](./previews/member_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### Tag
-![page](./previews/tag.png)
+### Login
+![page](./previews/login_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### Media
-![page](./previews/tag.png)
+
+### Post
+![page](./previews/post_en.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### Comments
-![page](./previews/comments.png)
+
+### Comment
+![page](./previews/comment_en.png)
 
 [Back Up](#vuewpress)
 

README_CN.md

@@ -19,6 +19,21 @@
 
 > 3. 修改 `src/utils/api.js` 文件, 修改成你的博客配置  *「例如: 你的站点地址, 你的站点语言, 你的站点协议等等」*
 
+> 4. vueWPress 0.23 版本以后，需要安装一个插件 JWT Authentication for WP-API ,可通过后台插件搜索或者[查看这里](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/)下载
+
+> 4.1 修改 Wordpress 根目录下的 wp-config.php 文件
+
+> 4.1.2 查找：`define('NONCE_SALT'`
+
+> 4.1.3 在 `define('NONCE_SALT'` 下方新增如下内容
+
+``` bash
+define('JWT_AUTH_SECRET_KEY', 'you-64-secret-key');
+#这里查看随机密钥 https://api.wordpress.org/secret-key/1.1/salt/
+define('JWT_AUTH_CORS_ENABLE', true);
+```
+
+> 4.1.4 `you-64-secret-key` 是64位的随机密钥，更多配置 [点击这里](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/)
 
 ## 使用步骤
 
@@ -45,19 +60,27 @@ npm run build
 
 > 3. 专题页显示页面专题。 [Jump](#专题中心) 「ver: 0.12」
 
-> 4. 专题详情页显示专题内容。 [Jump](#专题详情) 「ver: 0.12」
+> 4. 专题详情页显示专题内容。「ver: 0.12」
 
 > 5. 标签云页显示标签集合。 [Jump](#标签云) 「ver: 0.16」
 
-> 6. 标签页显示标签相关文章。 [Jump](#标签页) 「ver: 0.16」
+> 6. 标签页显示标签相关文章。「ver: 0.16」
+
+> 7. 图库页显示所有媒体文件。「ver: 0.16」
+
+> 8. 言论页显示所有评论。「ver: 0.19」
 
-> 7. 图库页显示所有媒体文件。 [jump](#图库中心) 「ver: 0.16」
+> 9. 文章列表页显示所有文章。 [jump](#文章列表) 「ver: 0.23」
 
-> 8. 言论页显示所有评论。 [jump](#言论中心) 「ver: 0.19」
+> 10. 文章页面新增评论。 [jump](#文章评论) 「ver: 0.31」
 
-> 9. 文章列表页显示所有文章。 [jump](#文章列表) 「ver: 0.19」
+> 11. 增加发布文章功能。  [jump](#发布文章) 「ver: 0.31」
 
-> 10. 更多功能正在开发中 ...
+> 12. 新增用户中心，可显示昵称、头像，退出登录。 [jump](#用户中心) 「ver: 0.19」
+
+> 13. 新增登录、注册功能。 [jump](#登录) 「ver: 0.19」
+
+> 14. 更多功能正在开发中 ...
 
 ## 预览界面
 ### 首页
@@ -88,36 +111,36 @@ npm run build
 
 ---
 
-### 专题详情
-![专题详情](./previews/page.png)
+### 标签云
+![page](./previews/tags.png)
 
-[返回](#vuewpress)
+[Back Up](#vuewpress)
 
 ---
 
-### 标签云
-![page](./previews/tags.png)
+### 用户中心
+![page](./previews/member.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### 标签页
-![page](./previews/tag.png)
+### 登录
+![page](./previews/login.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### 图库中心
-![page](./previews/tag.png)
+### 发布文章
+![page](./previews/post.png)
 
 [Back Up](#vuewpress)
 
 ---
 
-### 言论中心
-![page](./previews/comments.png)
+### 文章评论
+![page](./previews/comment.png)
 
 [Back Up](#vuewpress)
 

previews/article.png

@@ -89,7 +89,6 @@
 /* reset normal */
 
 * {
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -194,19 +193,17 @@ body {
 
 a,
 a:visited {
-  color: inherit;
+  /* color: inherit; */
   text-decoration: none;
   opacity: 1;
   outline: none;
-  -webkit-transition: all 0.15s linear;
-  -o-transition: all 0.15s linear;
   transition: all 0.15s linear;
 }
 
 a:hover,
 a:active,
 a:focus {
-  color: inherit;
+  /* color: inherit; */
 }
 
 blockquote,
@@ -262,45 +259,38 @@ img {
   height: auto;
 }
 
-input[type="text"],
+/* input[type="text"],
 input[type="password"],
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
-input[type="url"] {
+input[type="url"] { */
+input{
   display: block;
   width: 100%;
-  /* height: 2.0rem; */
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.5;
   color: #555;
   background-color: #fff;
   background-image: none;
   border: 1px solid #ccc;
-  -webkit-border-radius: 0.25rem;
-  border-radius: 0.25rem;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+  border-radius:0;
+  box-shadow: none;
 }
-
+/*
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
-input[type="url"]:focus {
+input[type="url"]:focus { */
+/* input:focus{
   border-color: #66afe9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0.5rem rgba(102, 175, 233, .6);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0.5rem rgba(102, 175, 233, .6);
-}
+  box-shadow: none;
+} */
 
 input::-webkit-input-placeholder,
 input::-moz-placeholder,
@@ -326,7 +316,6 @@ input[type="reset"] {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.5;
-  -webkit-border-radius: 0.25rem;
   border-radius: 0.25rem;
   border: none;
   cursor: pointer;