feat: 文章详情

Author: ALITTLESEEDX

src/Layout/index.less

@@ -5,3 +5,10 @@
   // max-width: 1200px;
   // margin: 0 auto;
 }
+.mainWrap {
+  @media (min-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+}

src/Layout/index.tsx

@@ -11,11 +11,13 @@ const Layout: React.FC<AppProps> = ({ children }) => {
   const [searchVisible, setSearchVisible] = useState<boolean>(false);
   return (
     <>
-      <Header setSearchVisible={setSearchVisible} />
-      <main className={styles.main}>{children}</main>
+      <div className={styles.mainWrap}>
+        <Header setSearchVisible={setSearchVisible} />
+        <main className={styles.main}>{children}</main>
+        <Footer />
+      </div>
       <Back />
       <Search visible={searchVisible} setVisible={setSearchVisible} />
-      <Footer />
     </>
   );
 };

src/Pages/Archives/index.less

@@ -1,6 +1,5 @@
 .archivesWrap {
   max-width: 1170px;
-  width: 100%;
   padding-right: 16px;
   padding-left: 16px;
   margin-right: auto;

src/Pages/Archives/index.tsx

@@ -20,6 +20,22 @@ const Archives: React.FC = () => {
                   </h2>
                 </div>
               </article>
+              <article className={styles.post}>
+                <div className={styles.inner}>
+                  <div className={styles.date}>2021/8/7</div>
+                  <h2>
+                    <a>Autumn is a second spring when every leaf is a flower</a>
+                  </h2>
+                </div>
+              </article>
+              <article className={styles.post}>
+                <div className={styles.inner}>
+                  <div className={styles.date}>2021/8/7</div>
+                  <h2>
+                    <a>Autumn is a second spring when every leaf is a flower</a>
+                  </h2>
+                </div>
+              </article>
             </li>
           </ul>
         </div>

src/Pages/Details/index.less

@@ -0,0 +1,56 @@
+.container {
+  max-width: 1170px;
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.innerWrap {
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.postInfo {
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  color: #a1a6b1;
+  color: var(--text-color-light);
+  margin-bottom: 1rem;
+}
+
+span {
+  margin-right: 6px;
+  margin-bottom: 8px;
+  display: inline-flex;
+  align-items: baseline;
+}
+.tag {
+  border: 1px solid #e8e9eb;
+  border: 1px solid var(--border-color);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+}
+.tags {
+  &::after {
+    content: '/';
+    margin-left: 8px;
+  }
+}
+.date {
+  &::after {
+    content: '/';
+    margin-left: 8px;
+  }
+}
+.title {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  h1 {
+    color: #1a202b;
+    color: var(--text-color-dark);
+    font-weight: 400;
+    line-height: 1.3;
+    margin-bottom: 1rem;
+  }
+}

src/Pages/Details/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './index.less';
+const Details = () => {
+  return (
+    <div className={styles.main}>
+      <div className={styles.container}>
+        <div className={styles.innerWrap}>
+          <div>
+            <div className={styles.title}>
+              <h1>标题sad撒按时</h1>
+            </div>
+            <div className={styles.postInfo}>
+              <span className={styles.tags}>React</span>
+              <span className={styles.date}> 2019-2-2</span>
+              <span className={styles.viewer}>2000</span>
+              <span className={styles.tag}>sddsdsd</span>
+            </div>
+            <article>
+              <p>
+                在 nodejs
+                中，之前一直推荐的是url.parse方法来解析参数，不过这个方法已经不推荐了，现在推荐的是
+                WHATWG 网址的 API。
+              </p>
+              <p>
+                因为网上找到的都还是之前的方法，这里特此记录下，在 nodejs 中，如何使用 URL 类 或
+                URLSearchParams 类来获取请求的参数。
+              </p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Details;

src/Pages/Home/index.less

@@ -1,7 +1,6 @@
 .container {
   padding-top: 20px;
   max-width: 1170px;
-  width: 100%;
   padding-right: 16px;
   display: flex;
   flex-direction: row;

src/Pages/Home/index.tsx

@@ -84,7 +84,18 @@ const Home: React.FC = () => {
             );
           })}
         </ul>
-        <div className={styles.right}>个人中心</div>
+        <div className={styles.right}>
+          <p>关于我</p>
+          Saima is a Ghost theme with high focus on typography and reading experience. It's sleek
+          and clutter free UI design will encourage your visitors to stay and read on your site
+          longer. This theme is perfect for a personal and professional blog. Also this theme can be
+          used in any collaborative and multi author blog. For example travel blog, technology blog,
+          lifestyle blog, health blog etc. This theme comes with light and dark mode you can set
+          default color mode to dark or light. Also your visitor can choose their preferred mode. Do
+          you write programming / coding related article or tutorial? this theme already comes with
+          code syntax highlighter. It also let your user copy by a single click of a button. are not
+          all these features amazing?
+        </div>
       </div>
     </section>
   );

src/Pages/Tags/index.less

@@ -1,6 +1,5 @@
 .tagsWrap {
   max-width: 1170px;
-  width: 100%;
   padding-right: 16px;
   padding-left: 16px;
   margin-right: auto;

src/components/Footer/index.less

@@ -4,7 +4,6 @@
   width: 100%;
   .container {
     max-width: 1170px;
-    width: 100%;
     padding-right: 16px;
     padding-left: 16px;
     margin-right: auto;