diff --git a/app/Http/Controllers/TopicsController.php b/app/Http/Controllers/TopicsController.php
index 01187e7..e1f0714 100644
--- a/app/Http/Controllers/TopicsController.php
+++ b/app/Http/Controllers/TopicsController.php
@@ -38,7 +38,7 @@ class TopicsController extends Controller
         $topic->fill($request->all());
         $topic->user_id = Auth::id();
         $topic->save();
-        return redirect()->route('topics.show', $topic->id)->with('message', 'Created successfully.');
+        return redirect()->route('topics.show', $topic->id)->with('success', '添加成功！.');
     }
 
     public function edit(Topic $topic)
@@ -75,7 +75,7 @@ class TopicsController extends Controller
         $this->authorize('update', $topic);
         $topic->update($request->all());
 
-        return redirect()->route('topics.show', $topic->id)->with('message', 'Updated successfully.');
+        return redirect()->route('topics.show', $topic->id)->with('success', '编辑成功！.');
     }
 
     public function destroy(Topic $topic)
diff --git a/app/Observers/TopicObserver.php b/app/Observers/TopicObserver.php
index 3ef99d1..c1f1259 100644
--- a/app/Observers/TopicObserver.php
+++ b/app/Observers/TopicObserver.php
@@ -16,6 +16,7 @@ class TopicObserver
 
     public function saving(Topic $topic)
     {
+        $topic->body = clean($topic->body, 'user_topic_body');
         $topic->excerpt = make_excerpt($topic->body);
     }
 
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index c2a65dc..3d89c32 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,8 @@
 
 namespace App\Providers;
 
+use App\Models\Topic;
+use App\Observers\TopicObserver;
 use Carbon\Carbon;
 use Illuminate\Support\ServiceProvider;
 
@@ -15,6 +17,8 @@ class AppServiceProvider extends ServiceProvider
     public function boot()
     {
         Carbon::setLocale('zh');
+        Topic::observe(new TopicObserver());
+
     }
 
     /**
diff --git a/composer.json b/composer.json
index 4596b88..22bf8c1 100644
--- a/composer.json
+++ b/composer.json
@@ -16,6 +16,7 @@
     "laravel/framework": "5.5.*",
     "laravel/tinker": "~1.0",
     "mews/captcha": "~2.0",
+    "mews/purifier": "~2.0",
     "overtrue/laravel-lang": "^3.0"
   },
   "require-dev": {
diff --git a/composer.lock b/composer.lock
index 449405c..e8e3a06 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "73e54cd6d859f37c0a770ee17406a293",
+    "content-hash": "0623f829dd1042d2c133664fd6525faa",
     "packages": [
         {
             "name": "caouecs/laravel-lang",
@@ -659,6 +659,53 @@
             ],
             "time": "2017-11-14T20:44:03+00:00"
         },
+        {
+            "name": "ezyang/htmlpurifier",
+            "version": "v4.9.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ezyang/htmlpurifier.git",
+                "reference": "95e1bae3182efc0f3422896a3236e991049dac69"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ezyang/htmlpurifier/zipball/95e1bae3182efc0f3422896a3236e991049dac69",
+                "reference": "95e1bae3182efc0f3422896a3236e991049dac69",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.2"
+            },
+            "require-dev": {
+                "simpletest/simpletest": "^1.1"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-0": {
+                    "HTMLPurifier": "library/"
+                },
+                "files": [
+                    "library/HTMLPurifier.composer.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL"
+            ],
+            "authors": [
+                {
+                    "name": "Edward Z. Yang",
+                    "email": "admin@htmlpurifier.org",
+                    "homepage": "http://ezyang.com"
+                }
+            ],
+            "description": "Standards compliant HTML filter written in PHP",
+            "homepage": "http://htmlpurifier.org/",
+            "keywords": [
+                "html"
+            ],
+            "time": "2017-06-03T02:28:16+00:00"
+        },
         {
             "name": "fideloper/proxy",
             "version": "3.3.4",
@@ -1348,6 +1395,81 @@
             ],
             "time": "2017-09-11T14:59:20+00:00"
         },
+        {
+            "name": "mews/purifier",
+            "version": "2.0.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/mewebstudio/Purifier.git",
+                "reference": "85af9a2a932583b2c78a0ed762b46cb19399a0a9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/mewebstudio/Purifier/zipball/85af9a2a932583b2c78a0ed762b46cb19399a0a9",
+                "reference": "85af9a2a932583b2c78a0ed762b46cb19399a0a9",
+                "shasum": ""
+            },
+            "require": {
+                "ezyang/htmlpurifier": "4.9.*",
+                "illuminate/config": "5.*",
+                "illuminate/filesystem": "5.*",
+                "illuminate/support": "5.*",
+                "php": ">=5.5.9"
+            },
+            "require-dev": {
+                "graham-campbell/testbench": "^3.2",
+                "mockery/mockery": "0.9.*",
+                "phpunit/phpunit": "^4.8|^5.0",
+                "scrutinizer/ocular": "^1.3"
+            },
+            "suggest": {
+                "laravel/framework": "To test the Laravel bindings",
+                "laravel/lumen-framework": "To test the Lumen bindings"
+            },
+            "type": "package",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Mews\\Purifier\\PurifierServiceProvider"
+                    ],
+                    "aliases": {
+                        "Purifier": "Mews\\Purifier\\Facades\\Purifier"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Mews\\Purifier\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Muharrem ERİN",
+                    "email": "me@mewebstudio.com",
+                    "homepage": "https://github.com/mewebstudio",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Laravel 5 HtmlPurifier Package",
+            "homepage": "https://github.com/mewebstudio/purifier",
+            "keywords": [
+                "Purifier",
+                "htmlpurifier",
+                "laravel5 HtmlPurifier",
+                "laravel5 Purifier",
+                "laravel5 Security",
+                "security",
+                "xss"
+            ],
+            "time": "2017-09-11T15:02:51+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "1.23.0",
diff --git a/config/purifier.php b/config/purifier.php
new file mode 100644
index 0000000..1d262e4
--- /dev/null
+++ b/config/purifier.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Ok, glad you are here
+ * first we get a config instance, and set the settings
+ * $config = HTMLPurifier_Config::createDefault();
+ * $config->set('Core.Encoding', $this->config->get('purifier.encoding'));
+ * $config->set('Cache.SerializerPath', $this->config->get('purifier.cachePath'));
+ * if ( ! $this->config->get('purifier.finalize')) {
+ *     $config->autoFinalize = false;
+ * }
+ * $config->loadArray($this->getConfig());
+ *
+ * You must NOT delete the default settings
+ * anything in settings should be compacted with params that needed to instance HTMLPurifier_Config.
+ *
+ * @link http://htmlpurifier.org/live/configdoc/plain.html
+ */
+
+return [
+    'encoding' => 'UTF-8',
+    'finalize' => true,
+    'cachePath' => storage_path('app/purifier'),
+    'cacheFileMode' => 0755,
+    'settings' => [
+        'user_topic_body' => [
+            'HTML.Doctype' => 'XHTML 1.0 Transitional',
+            'HTML.Allowed' => 'div,b,strong,i,em,a[href|title],ul,ol,ol[start],li,p[style],br,span[style],img[width|height|alt|src],*[style|class],pre,hr,code,h2,h3,h4,h5,h6,blockquote,del,table,thead,tbody,tr,th,td',
+            'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,margin,width,height,font-family,text-decoration,padding-left,color,background-color,text-align',
+            'AutoFormat.AutoParagraph' => true,
+            'AutoFormat.RemoveEmpty' => true,
+        ],
+    ],
+];
diff --git a/public/css/app.css b/public/css/app.css
index ae85cc0..b43563a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -8491,3 +8491,468 @@ body {
   border-top: 1px solid #dcebf5;
 }
 
+.simditor-body,
+.topic-body {
+    font-size: 15px;
+    line-height: 1.3;
+    overflow: hidden;
+    line-height: 1.6;
+    word-wrap: break-word;
+}
+
+.simditor-body a,
+.topic-body a {
+    background: transparent;
+}
+
+.simditor-body a:active,
+.simditor-body a:hover,
+.topic-body a:active,
+.topic-body a:hover {
+    outline: 0;
+}
+
+.simditor-body ol li,
+.topic-body ol li {
+    margin: 8px 0;
+}
+
+.simditor-body pre[class*=language-],
+.topic-body pre[class*=language-] {
+    margin: 1.2em 0 !important;
+}
+
+.simditor-body strong,
+.topic-body strong {
+    font-weight: bold;
+}
+
+.simditor-body h1,
+.topic-body h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+.simditor-body img,
+.topic-body img {
+    border: 0;
+}
+
+.simditor-body hr,
+.topic-body hr {
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+.simditor-body table,
+.topic-body table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.simditor-body td,
+.simditor-body th,
+.topic-body td,
+.topic-body th {
+    padding: 0;
+}
+
+.simditor-body *,
+.topic-body * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.simditor-body a,
+.topic-body a {
+    text-decoration: none;
+}
+
+.simditor-body a:hover,
+.simditor-body a:focus,
+.simditor-body a:active,
+.topic-body a:hover,
+.topic-body a:focus,
+.topic-body a:active {
+    text-decoration: none;
+}
+
+.simditor-body hr,
+.topic-body hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.simditor-body hr:before,
+.simditor-body hr:after,
+.topic-body hr:before,
+.topic-body hr:after {
+    display: table;
+    content: " ";
+}
+
+.simditor-body hr:after,
+.topic-body hr:after {
+    clear: both;
+}
+
+.simditor-body blockquote,
+.topic-body blockquote {
+    margin: 0;
+}
+
+.simditor-body ul,
+.simditor-body ol,
+.topic-body ul,
+.topic-body ol {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.simditor-body ol ol,
+.topic-body ol ol {
+    list-style-type: lower-roman;
+}
+
+.simditor-body dd,
+.topic-body dd {
+    margin-left: 0;
+}
+
+.simditor-body code,
+.simditor-body pre,
+.topic-body code,
+.topic-body pre {
+    font-family: monaco, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 1em;
+}
+
+.simditor-body pre,
+.topic-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow: auto;
+}
+
+.simditor-body .topic-body > *:first-child,
+.topic-body .topic-body > *:first-child {
+    margin-top: 0 !important;
+}
+
+.simditor-body .topic-body > *:last-child,
+.topic-body .topic-body > *:last-child {
+    margin-bottom: 0 !important;
+}
+
+.simditor-body .anchor,
+.topic-body .anchor {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    padding-right: 6px;
+    padding-left: 30px;
+    margin-left: -30px;
+}
+
+.simditor-body .anchor:focus,
+.topic-body .anchor:focus {
+    outline: none;
+}
+
+.simditor-body h1,
+.simditor-body h2,
+.simditor-body h3,
+.simditor-body h4,
+.simditor-body h5,
+.simditor-body h6,
+.topic-body h1,
+.topic-body h2,
+.topic-body h3,
+.topic-body h4,
+.topic-body h5,
+.topic-body h6 {
+    position: relative;
+    margin-top: 1.0em;
+    margin-bottom: 16px;
+    line-height: 1.4;
+}
+
+.simditor-body h1,
+.topic-body h1 {
+    padding-bottom: 0.3em;
+    font-size: 2.25em;
+    line-height: 1.2;
+    border-bottom: 1px solid #eee;
+}
+
+.simditor-body h2,
+.topic-body h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.3em;
+    line-height: 1.225;
+    border-bottom: 1px solid #eee;
+}
+
+.simditor-body h3,
+.topic-body h3 {
+    font-size: 1.2em;
+    line-height: 1.43;
+}
+
+.simditor-body h4,
+.topic-body h4 {
+    font-size: 1.1em;
+}
+
+.simditor-body h5,
+.topic-body h5 {
+    font-size: 1.0em;
+}
+
+.simditor-body h6,
+.topic-body h6 {
+    font-size: 0.9em;
+    color: #777;
+}
+
+.simditor-body p,
+.simditor-body blockquote,
+.simditor-body ul,
+.simditor-body ol,
+.simditor-body dl,
+.simditor-body table,
+.simditor-body pre,
+.topic-body p,
+.topic-body blockquote,
+.topic-body ul,
+.topic-body ol,
+.topic-body dl,
+.topic-body table,
+.topic-body pre {
+    margin-top: 0;
+    margin-bottom: 0px;
+    line-height: 30px;
+}
+
+.simditor-body hr,
+.topic-body hr {
+    border: 2px dashed #F0F4F6;
+    border-bottom: 0px;
+    margin: 18px auto;
+    width: 50%;
+}
+
+.simditor-body ul,
+.simditor-body ol,
+.topic-body ul,
+.topic-body ol {
+    padding-left: 2em;
+    padding: 10px 20px 10px 30px;
+    color: #7d8688;
+}
+
+.simditor-body ol ol,
+.simditor-body ol ul,
+.topic-body ol ol,
+.topic-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.simditor-body li > p,
+.topic-body li > p {
+    margin-top: 6px;
+}
+
+.simditor-body dl,
+.topic-body dl {
+    padding: 0;
+}
+
+.simditor-body dl dt,
+.topic-body dl dt {
+    padding: 0;
+    margin-top: 6px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+}
+
+.simditor-body dl dd,
+.topic-body dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+
+.simditor-body blockquote,
+.topic-body blockquote {
+    font-size: inherit;
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+}
+
+.simditor-body blockquote > :first-child,
+.topic-body blockquote > :first-child {
+    margin-top: 20px;
+}
+
+.simditor-body blockquote > :last-child,
+.topic-body blockquote > :last-child {
+    margin-bottom: 20px;
+}
+
+.simditor-body blockquote,
+.topic-body blockquote {
+    margin: 20px 0 !important;
+    background-color: #f5f8fc;
+    padding: 1rem;
+    color: #8796A8;
+    border-left: none;
+}
+
+.simditor-body table,
+.topic-body table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    margin: 25px 0;
+}
+
+.simditor-body table th,
+.topic-body table th {
+    font-weight: bold;
+}
+
+.simditor-body table th,
+.simditor-body table td,
+.topic-body table th,
+.topic-body table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+}
+
+.simditor-body table tr,
+.topic-body table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+}
+
+.simditor-body table tr:nth-child(2n),
+.topic-body table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+}
+
+.simditor-body img,
+.topic-body img {
+    max-width: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.simditor-body img,
+.topic-body img {
+    border: 1px solid #ddd;
+    box-shadow: 0 0 30px #ccc;
+    -moz-box-shadow: 0 0 30px #ccc;
+    -webkit-box-shadow: 0 0 30px #ccc;
+    margin-bottom: 30px;
+    margin-top: 10px;
+}
+
+.simditor-body code,
+.topic-body code {
+    background: rgba(90, 87, 87, 0);
+    margin: 5px;
+    color: #858080;
+    border-radius: 4px;
+    background-color: #f9fafa;
+    border: 1px solid #e4e4e4;
+    max-width: 740px;
+    overflow-x: auto;
+    font-size: .9em;
+    padding: 1px 2px 1px;
+}
+
+.simditor-body code:before,
+.simditor-body code:after,
+.topic-body code:before,
+.topic-body code:after {
+    letter-spacing: -0.2em;
+    content: "\A0";
+}
+
+.simditor-body pre > code,
+.topic-body pre > code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+}
+
+.simditor-body .highlight,
+.topic-body .highlight {
+    margin-bottom: 16px;
+}
+
+.simditor-body .highlight pre,
+.simditor-body pre,
+.topic-body .highlight pre,
+.topic-body pre {
+    padding: 14px;
+    overflow: auto;
+    line-height: 1.45;
+    border-radius: 3px;
+    color: inherit;
+    border: none;
+}
+
+.simditor-body .highlight pre,
+.topic-body .highlight pre {
+    margin-bottom: 0;
+}
+
+.simditor-body pre,
+.topic-body pre {
+    word-wrap: normal;
+}
+
+.simditor-body pre code,
+.topic-body pre code {
+    display: block;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}
+
+.simditor-body pre code:before,
+.simditor-body pre code:after,
+.topic-body pre code:before,
+.topic-body pre code:after {
+    content: normal;
+}
+
+.topics-show-page .panel {
+    padding: 15px;
+}
+
+.topics-show-page .panel h1 {
+    margin: 0.4em auto 0.6em;
+    font-size: 28px;
+    line-height: 38px;
+}
+
diff --git a/public/css/simditor.css b/public/css/simditor.css
index e3bf8e3..2bef3f4 100644
--- a/public/css/simditor.css
+++ b/public/css/simditor.css
@@ -4,7 +4,6 @@
     font-weight: normal;
     font-style: normal;
 }
-
 .simditor-icon {
     display: inline-block;
     font: normal normal normal 14px/1 'Simditor';
@@ -143,12 +142,10 @@
     position: relative;
     border: 1px solid #c9d8db;
 }
-
 .simditor .simditor-wrapper {
     position: relative;
     background: #ffffff;
 }
-
 .simditor .simditor-wrapper > textarea {
     display: none !important;
     width: 100%;
@@ -163,7 +160,6 @@
     background: transparent;
     resize: none;
 }
-
 .simditor .simditor-wrapper .simditor-placeholder {
     display: none;
     position: absolute;
@@ -176,14 +172,12 @@
     color: #999999;
     background: transparent;
 }
-
 .simditor .simditor-wrapper.toolbar-floating .simditor-toolbar {
     position: fixed;
     top: 0;
     z-index: 10;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
 }
-
 .simditor .simditor-wrapper .simditor-image-loading {
     width: 100%;
     height: 100%;
@@ -192,7 +186,6 @@
     left: 0;
     z-index: 2;
 }
-
 .simditor .simditor-wrapper .simditor-image-loading .progress {
     width: 100%;
     height: 100%;
@@ -201,7 +194,6 @@
     bottom: 0;
     left: 0;
 }
-
 .simditor .simditor-body {
     padding: 22px 15px 40px;
     min-height: 300px;
@@ -211,23 +203,18 @@
     z-index: 1;
     background: transparent;
 }
-
 .simditor .simditor-body a.selected {
     background: #b3d4fd;
 }
-
 .simditor .simditor-body a.simditor-mention {
     cursor: pointer;
 }
-
 .simditor .simditor-body .simditor-table {
     position: relative;
 }
-
 .simditor .simditor-body .simditor-table.resizing {
     cursor: col-resize;
 }
-
 .simditor .simditor-body .simditor-table .simditor-resize-handle {
     position: absolute;
     left: 0;
@@ -236,7 +223,6 @@
     height: 100%;
     cursor: col-resize;
 }
-
 .simditor .simditor-body pre {
     /*min-height: 28px;*/
     box-sizing: border-box;
@@ -244,15 +230,12 @@
     word-wrap: break-word !important;
     white-space: pre-wrap !important;
 }
-
 .simditor .simditor-body img {
     cursor: pointer;
 }
-
 .simditor .simditor-body img.selected {
     box-shadow: 0 0 0 4px #cccccc;
 }
-
 .simditor .simditor-paste-bin {
     position: fixed;
     bottom: 10px;
@@ -267,25 +250,21 @@
     opacity: 0;
     -webkit-user-select: text;
 }
-
 .simditor .simditor-toolbar {
     border-bottom: 1px solid #eeeeee;
     background: #ffffff;
     width: 100%;
 }
-
 .simditor .simditor-toolbar > ul {
     margin: 0;
     padding: 0 0 0 6px;
     list-style: none;
 }
-
 .simditor .simditor-toolbar > ul > li {
     position: relative;
     display: inline-block;
     font-size: 0;
 }
-
 .simditor .simditor-toolbar > ul > li > span.separator {
     display: inline-block;
     background: #cfcfcf;
@@ -294,7 +273,6 @@
     margin: 11px 15px;
     vertical-align: middle;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item {
     display: inline-block;
     width: 46px;
@@ -307,63 +285,50 @@
     text-align: center;
     text-decoration: none;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item span {
     opacity: 0.6;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item span.simditor-icon {
     display: inline;
     line-height: normal;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item:hover span {
     opacity: 1;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.active {
     background: #eeeeee;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.active span {
     opacity: 1;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.disabled {
     cursor: default;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.disabled span {
     opacity: 0.3;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title span:before {
     content: "H";
     font-size: 19px;
     font-weight: bold;
     font-family: 'Times New Roman';
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h1 span:before {
     content: 'H1';
     font-size: 18px;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h2 span:before {
     content: 'H2';
     font-size: 18px;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h3 span:before {
     content: 'H3';
     font-size: 18px;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-image {
     position: relative;
     overflow: hidden;
 }
-
 .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-image > input[type=file] {
     position: absolute;
     right: 0px;
@@ -372,22 +337,18 @@
     font-size: 100px;
     cursor: pointer;
 }
-
 .simditor .simditor-toolbar > ul > li.menu-on .toolbar-item {
     position: relative;
     z-index: 20;
     background: #ffffff;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
-
 .simditor .simditor-toolbar > ul > li.menu-on .toolbar-item span {
     opacity: 1;
 }
-
 .simditor .simditor-toolbar > ul > li.menu-on .toolbar-menu {
     display: block;
 }
-
 .simditor .simditor-toolbar .toolbar-menu {
     display: none;
     position: absolute;
@@ -398,7 +359,6 @@
     text-align: left;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }
-
 .simditor .simditor-toolbar .toolbar-menu:before {
     content: '';
     display: block;
@@ -409,14 +369,12 @@
     top: -3px;
     left: 0;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul {
     min-width: 160px;
     list-style: none;
     margin: 0;
     padding: 10px 1px;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item {
     display: block;
     font-size: 16px;
@@ -425,36 +383,29 @@
     text-decoration: none;
     color: #666666;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item:hover {
     background: #f6f6f6;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h1 {
     font-size: 24px;
     color: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h2 {
     font-size: 22px;
     color: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h3 {
     font-size: 20px;
     color: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h4 {
     font-size: 18px;
     color: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h5 {
     font-size: 16px;
     color: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu ul > li .separator {
     display: block;
     border-top: 1px solid #cccccc;
@@ -463,23 +414,19 @@
     font-size: 0;
     margin: 6px 0;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color {
     width: 96px;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list {
     height: 40px;
     margin: 10px 6px 6px 10px;
     padding: 0;
     min-width: 0;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li {
     float: left;
     margin: 0 4px 4px 0;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color {
     display: block;
     width: 16px;
@@ -487,60 +434,47 @@
     background: #dfdfdf;
     border-radius: 2px;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color:hover {
     opacity: 0.8;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color.font-color-default {
     background: #333333;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-1 {
     background: #E33737;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-2 {
     background: #e28b41;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-3 {
     background: #c8a732;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-4 {
     background: #209361;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-5 {
     background: #418caf;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-6 {
     background: #aa8773;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-7 {
     background: #999999;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table {
     background: #ffffff;
     padding: 1px;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table {
     border: none;
     border-collapse: collapse;
     border-spacing: 0;
     table-layout: fixed;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td {
     padding: 0;
     cursor: pointer;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td:before {
     width: 16px;
     height: 16px;
@@ -549,24 +483,19 @@
     display: block;
     content: "";
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td.selected:before {
     background: #cfcfcf;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-edit-table {
     display: none;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-edit-table ul li {
     white-space: nowrap;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-image .menu-item-upload-image {
     position: relative;
     overflow: hidden;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-image .menu-item-upload-image input[type=file] {
     position: absolute;
     right: 0px;
@@ -575,19 +504,15 @@
     font-size: 100px;
     cursor: pointer;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment {
     width: 100%;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment ul {
     min-width: 100%;
 }
-
 .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment .menu-item {
     text-align: center;
 }
-
 .simditor .simditor-popover {
     display: none;
     padding: 5px 8px 0;
@@ -597,37 +522,31 @@
     position: absolute;
     z-index: 2;
 }
-
 .simditor .simditor-popover .settings-field {
     margin: 0 0 5px 0;
     font-size: 12px;
     height: 25px;
     line-height: 25px;
 }
-
 .simditor .simditor-popover .settings-field label {
     display: inline-block;
     margin: 0 5px 0 0;
 }
-
 .simditor .simditor-popover .settings-field input[type=text] {
     display: inline-block;
     width: 200px;
     box-sizing: border-box;
     font-size: 12px;
 }
-
 .simditor .simditor-popover .settings-field input[type=text].image-size {
     width: 83px;
 }
-
 .simditor .simditor-popover .settings-field .times {
     display: inline-block;
     width: 26px;
     font-size: 12px;
     text-align: center;
 }
-
 .simditor .simditor-popover.link-popover .btn-unlink, .simditor .simditor-popover.image-popover .btn-upload, .simditor .simditor-popover.image-popover .btn-restore {
     display: inline-block;
     margin: 0 0 0 5px;
@@ -635,22 +554,18 @@
     font-size: 14px;
     outline: 0;
 }
-
 .simditor .simditor-popover.link-popover .btn-unlink span, .simditor .simditor-popover.image-popover .btn-upload span, .simditor .simditor-popover.image-popover .btn-restore span {
     opacity: 0.6;
 }
-
 .simditor .simditor-popover.link-popover .btn-unlink:hover span, .simditor .simditor-popover.image-popover .btn-upload:hover span, .simditor .simditor-popover.image-popover .btn-restore:hover span {
     opacity: 1;
 }
-
 .simditor .simditor-popover.image-popover .btn-upload {
     position: relative;
     display: inline-block;
     overflow: hidden;
     vertical-align: middle;
 }
-
 .simditor .simditor-popover.image-popover .btn-upload input[type=file] {
     position: absolute;
     right: 0px;
@@ -659,7 +574,6 @@
     height: 100%;
     width: 28px;
 }
-
 .simditor.simditor-mobile .simditor-wrapper.toolbar-floating .simditor-toolbar {
     position: absolute;
     top: 0;
@@ -675,123 +589,96 @@
     outline: none;
     word-wrap: break-word;
 }
-
 .simditor .simditor-body > :first-child, .editor-style > :first-child {
     margin-top: 0 !important;
 }
-
 .simditor .simditor-body a, .editor-style a {
     color: #4298BA;
     text-decoration: none;
     word-break: break-all;
 }
-
 .simditor .simditor-body a:visited, .editor-style a:visited {
     color: #4298BA;
 }
-
 .simditor .simditor-body a:hover, .editor-style a:hover {
     color: #0F769F;
 }
-
 .simditor .simditor-body a:active, .editor-style a:active {
     color: #9E792E;
 }
-
 .simditor .simditor-body a:hover, .simditor .simditor-body a:active, .editor-style a:hover, .editor-style a:active {
     outline: 0;
 }
-
 .simditor .simditor-body h1, .simditor .simditor-body h2, .simditor .simditor-body h3, .simditor .simditor-body h4, .simditor .simditor-body h5, .simditor .simditor-body h6, .editor-style h1, .editor-style h2, .editor-style h3, .editor-style h4, .editor-style h5, .editor-style h6 {
     font-weight: normal;
     margin: 40px 0 20px;
     color: #000000;
 }
-
 .simditor .simditor-body h1, .editor-style h1 {
     font-size: 24px;
 }
-
 .simditor .simditor-body h2, .editor-style h2 {
     font-size: 22px;
 }
-
 .simditor .simditor-body h3, .editor-style h3 {
     font-size: 20px;
 }
-
 .simditor .simditor-body h4, .editor-style h4 {
     font-size: 18px;
 }
-
 .simditor .simditor-body h5, .editor-style h5 {
     font-size: 16px;
 }
-
 .simditor .simditor-body h6, .editor-style h6 {
     font-size: 16px;
 }
-
 .simditor .simditor-body p, .simditor .simditor-body div, .editor-style p, .editor-style div {
     word-wrap: break-word;
     margin: 0 0 15px 0;
     color: #333;
     word-wrap: break-word;
 }
-
 .simditor .simditor-body b, .simditor .simditor-body strong, .editor-style b, .editor-style strong {
     font-weight: bold;
 }
-
 .simditor .simditor-body i, .simditor .simditor-body em, .editor-style i, .editor-style em {
     font-style: italic;
 }
-
 .simditor .simditor-body u, .editor-style u {
     text-decoration: underline;
 }
-
 .simditor .simditor-body strike, .simditor .simditor-body del, .editor-style strike, .editor-style del {
     text-decoration: line-through;
 }
-
 .simditor .simditor-body ul, .simditor .simditor-body ol, .editor-style ul, .editor-style ol {
     list-style: disc outside none;
     margin: 15px 0;
     padding: 0 0 0 40px;
     line-height: 1.6;
 }
-
 .simditor .simditor-body ul li, .simditor .simditor-body ol li, .editor-style ul li, .editor-style ol li {
     list-style-type: inherit;
 }
-
 .simditor .simditor-body ul ul, .simditor .simditor-body ul ol, .simditor .simditor-body ol ul, .simditor .simditor-body ol ol, .editor-style ul ul, .editor-style ul ol, .editor-style ol ul, .editor-style ol ol {
     padding-left: 30px;
 }
-
 .simditor .simditor-body ul ul, .simditor .simditor-body ol ul, .editor-style ul ul, .editor-style ol ul {
     list-style: circle outside none;
 }
-
 .simditor .simditor-body ul ul ul, .simditor .simditor-body ol ul ul, .editor-style ul ul ul, .editor-style ol ul ul {
     list-style: square outside none;
 }
-
 .simditor .simditor-body ol, .editor-style ol {
     list-style: decimal;
 }
-
 .simditor .simditor-body blockquote, .editor-style blockquote {
     border-left: 6px solid #ddd;
     padding: 5px 0 5px 10px;
     margin: 15px 0 15px 15px;
 }
-
 .simditor .simditor-body blockquote > :first-child, .editor-style blockquote > :first-child {
     margin-top: 0;
 }
-
 .simditor .simditor-body code, .editor-style code {
     display: inline-block;
     padding: 0 4px;
@@ -801,7 +688,6 @@
     font-size: 13px;
     font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
 }
-
 .simditor .simditor-body pre, .editor-style pre {
     padding: 10px 5px 10px 10px;
     margin: 15px 0;
@@ -815,7 +701,6 @@
     word-wrap: normal;
     overflow-x: auto;
 }
-
 .simditor .simditor-body pre code, .editor-style pre code {
     display: block;
     padding: 0;
@@ -823,7 +708,6 @@
     background: none;
     border-radius: 0;
 }
-
 .simditor .simditor-body hr, .editor-style hr {
     display: block;
     height: 0px;
@@ -832,7 +716,6 @@
     margin: 15px 0;
     padding: 0;
 }
-
 .simditor .simditor-body table, .editor-style table {
     width: 100%;
     table-layout: fixed;
@@ -840,11 +723,9 @@
     border-spacing: 0;
     margin: 15px 0;
 }
-
 .simditor .simditor-body table thead, .editor-style table thead {
     background-color: #f9f9f9;
 }
-
 .simditor .simditor-body table td, .simditor .simditor-body table th, .editor-style table td, .editor-style table th {
     min-width: 40px;
     height: 30px;
@@ -854,11 +735,9 @@
     text-align: left;
     box-sizing: border-box;
 }
-
 .simditor .simditor-body table td.active, .simditor .simditor-body table th.active, .editor-style table td.active, .editor-style table th.active {
     background-color: #ffffee;
 }
-
 .simditor .simditor-body img, .editor-style img {
     margin: 0 5px;
     vertical-align: middle;
diff --git a/resources/assets/sass/_topic_body.scss b/resources/assets/sass/_topic_body.scss
new file mode 100644
index 0000000..921768f
--- /dev/null
+++ b/resources/assets/sass/_topic_body.scss
@@ -0,0 +1,309 @@
+.simditor-body, .topic-body {
+  font-size: 15px;
+  line-height: 1.3;
+  overflow: hidden;
+  line-height: 1.6;
+  word-wrap: break-word;
+  a {
+    background: transparent;
+  }
+  a:active,
+  a:hover {
+    outline: 0;
+  }
+  ol li {
+    margin: 8px 0;
+  }
+  pre[class*=language-] {
+    margin: 1.2em 0 !important;
+  }
+  strong {
+    font-weight: bold;
+  }
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  img {
+    border: 0;
+  }
+  hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  td,
+  th {
+    padding: 0;
+  }
+  * {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  a {
+    text-decoration: none;
+  }
+  a:hover,
+  a:focus,
+  a:active {
+    text-decoration: none;
+  }
+  hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #ddd;
+  }
+  hr:before,
+  hr:after {
+    display: table;
+    content: " ";
+  }
+  hr:after {
+    clear: both;
+  }
+  blockquote {
+    margin: 0;
+  }
+  ul,
+  ol {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  ol ol {
+    list-style-type: lower-roman;
+  }
+  dd {
+    margin-left: 0;
+  }
+  code,
+  pre {
+    font-family: monaco, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 1em;
+  }
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow: auto;
+  }
+  .topic-body > *:first-child {
+    margin-top: 0 !important;
+  }
+  .topic-body > *:last-child {
+    margin-bottom: 0 !important;
+  }
+  .anchor {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    padding-right: 6px;
+    padding-left: 30px;
+    margin-left: -30px;
+  }
+  .anchor:focus {
+    outline: none;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 1.0em;
+    margin-bottom: 16px;
+    line-height: 1.4;
+  }
+  h1 {
+    padding-bottom: 0.3em;
+    font-size: 2.25em;
+    line-height: 1.2;
+    border-bottom: 1px solid #eee;
+  }
+  h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.3em;
+    line-height: 1.225;
+    border-bottom: 1px solid #eee;
+  }
+  h3 {
+    font-size: 1.2em;
+    line-height: 1.43;
+  }
+  h4 {
+    font-size: 1.1em;
+  }
+  h5 {
+    font-size: 1.0em;
+  }
+  h6 {
+    font-size: 0.9em;
+    color: #777;
+  }
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin-top: 0;
+    margin-bottom: 0px;
+    line-height: 30px;
+  }
+  hr {
+    border: 2px dashed #F0F4F6;
+    border-bottom: 0px;
+    margin: 18px auto;
+    width: 50%;
+  }
+  ul,
+  ol {
+    padding-left: 2em;
+    padding: 10px 20px 10px 30px;
+    color: #7d8688;
+  }
+  ol ol,
+  ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  li > p {
+    margin-top: 6px;
+  }
+  dl {
+    padding: 0;
+  }
+  dl dt {
+    padding: 0;
+    margin-top: 6px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+  dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+  blockquote {
+    font-size: inherit;
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+  blockquote > :first-child {
+    margin-top: 20px;
+  }
+  blockquote > :last-child {
+    margin-bottom: 20px;
+  }
+  blockquote {
+    margin: 20px 0 !important;
+    background-color: #f5f8fc;
+    padding: 1rem;
+    color: #8796A8;
+    border-left: none;
+  }
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    margin: 25px 0;
+  }
+  table th {
+    font-weight: bold;
+  }
+  table th,
+  table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+  }
+  table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+  img {
+    max-width: 100%;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  img {
+    border: 1px solid #ddd;
+    box-shadow: 0 0 30px #ccc;
+    -moz-box-shadow: 0 0 30px #ccc;
+    -webkit-box-shadow: 0 0 30px #ccc;
+    margin-bottom: 30px;
+    margin-top: 10px;
+  }
+  code {
+    background: rgba(90, 87, 87, 0);
+    margin: 5px;
+    color: #858080;
+    border-radius: 4px;
+    background-color: #f9fafa;
+    border: 1px solid #e4e4e4;
+    max-width: 740px;
+    overflow-x: auto;
+    font-size: .9em;
+    padding: 1px 2px 1px;
+  }
+  code:before,
+  code:after {
+    letter-spacing: -0.2em;
+    content: "\00a0";
+  }
+  pre > code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+  .highlight {
+    margin-bottom: 16px;
+  }
+  .highlight pre,
+  pre {
+    padding: 14px;
+    overflow: auto;
+    line-height: 1.45;
+    // background-color: #4e4e4e;
+    border-radius: 3px;
+    color: inherit;
+    border: none;
+  }
+  .highlight pre {
+    margin-bottom: 0;
+  }
+  pre {
+    word-wrap: normal;
+  }
+  pre code {
+    display: block;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+  }
+  pre code:before,
+  pre code:after {
+    content: normal;
+  }
+}
+
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 633d5bb..a652456 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -138,4 +138,19 @@ body {
       border-top: 1px solid #dcebf5;
     }
   }
+}
+
+@import "topic_body";
+
+.topics-show-page {
+
+  .panel {
+    padding: 15px;
+
+    h1 {
+      margin: 0.4em auto 0.6em;
+      font-size: 28px;
+      line-height: 38px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index cd068c7..83bf980 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -9,6 +9,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <title>@yield('title', 'LaraBBS') - Laravel 进阶教程</title>
+    <meta name="description" content="@yield('description', 'LaraBBS 爱好者社区')"/>
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
diff --git a/resources/views/topics/create_and_edit.blade.php b/resources/views/topics/create_and_edit.blade.php
index 56dd9aa..40742d2 100644
--- a/resources/views/topics/create_and_edit.blade.php
+++ b/resources/views/topics/create_and_edit.blade.php
@@ -67,10 +67,12 @@
                                         </select>
                                     </div>
 
+
                                     <div class="form-group">
-                                <textarea name="body" class="form-control" id="editor" rows="3"
-                                          placeholder="请填入至少三个字符的内容。"
-                                          required>{{ old('body', $topic->body ) }}</textarea>
+                              <textarea name="body" class="form-control" id="editor" rows="3"
+                                        placeholder="请填入至少三个字符的内容。"
+                                        required>{{ old('body', $topic->body ) }}
+                              </textarea>
                                     </div>
 
                                     <div class="well well-sm">
diff --git a/resources/views/topics/show.blade.php b/resources/views/topics/show.blade.php
index 1223c35..1250e68 100644
--- a/resources/views/topics/show.blade.php
+++ b/resources/views/topics/show.blade.php
@@ -1,64 +1,59 @@
 @extends('layouts.app')
+@section('title', $topic->title)
+@section('description', $topic->excerpt)
 
 @section('content')
+    <div class="row">
 
-    <div class="container">
-        <div class="col-md-10 col-md-offset-1">
+        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs author-info">
             <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h1>Topic / Show #{{ $topic->id }}</h1>
-                </div>
-
                 <div class="panel-body">
-                    <div class="well well-sm">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <a class="btn btn-link" href="{{ route('topics.index') }}"><i
-                                            class="glyphicon glyphicon-backward"></i> Back</a>
-                            </div>
-                            <div class="col-md-6">
-                                <a class="btn btn-sm btn-warning pull-right"
-                                   href="{{ route('topics.edit', $topic->id) }}">
-                                    <i class="glyphicon glyphicon-edit"></i> Edit
-                                </a>
-                            </div>
+                    <div class="text-center">
+                        作者：{{ $topic->user->name }}
+                    </div>
+                    <hr>
+                    <div class="media">
+                        <div align="center">
+                            <a href="{{ route('users.show', $topic->user->id) }}">
+                                <img class="thumbnail img-responsive" src="{{ $topic->user->header }}" width="300px"
+                                     height="300px">
+                            </a>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
 
-                    <label>"title</label>
-                    <p>
+        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 topic-content">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <h1 class="text-center">
                         {{ $topic->title }}
-                    </p> <label>Body</label>
-                    <p>
-                        {{ $topic->body }}
-                    </p> <label>User_id</label>
-                    <p>
-                        {{ $topic->user_id }}
-                    </p> <label>Category_id</label>
-                    <p>
-                        {{ $topic->category_id }}
-                    </p> <label>Reply_count</label>
-                    <p>
+                    </h1>
+
+                    <div class="article-meta text-center">
+                        {{ $topic->created_at->diffForHumans() }}
+                        ⋅
+                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                         {{ $topic->reply_count }}
-                    </p> <label>View_count</label>
-                    <p>
-                        {{ $topic->view_count }}
-                    </p> <label>Last_reply_user_id</label>
-                    <p>
-                        {{ $topic->last_reply_user_id }}
-                    </p> <label>Order</label>
-                    <p>
-                        {{ $topic->order }}
-                    </p> <label>Excerpt</label>
-                    <p>
-                        {{ $topic->excerpt }}
-                    </p> <label>Slug</label>
-                    <p>
-                        {{ $topic->slug }}
-                    </p>
+                    </div>
+
+                    <div class="topic-body">
+                        {!! $topic->body !!}
+                    </div>
+
+                    <div class="operate">
+                        <hr>
+                        <a href="{{ route('topics.edit', $topic->id) }}" class="btn btn-default btn-xs" role="button">
+                            <i class="glyphicon glyphicon-edit"></i> 编辑
+                        </a>
+                        <a href="#" class="btn btn-default btn-xs" role="button">
+                            <i class="glyphicon glyphicon-trash"></i> 删除
+                        </a>
+                    </div>
+
                 </div>
             </div>
         </div>
     </div>
-
 @endsection