blog-fs/pages/articles/[id].tsx

import { FC } from "react";
import styles from "./article.module.css";
import { GetServerSideProps } from "next";
import { addApolloState, initializeApollo } from "../../commons/graphql/client";
import { ARTICLE } from "../../commons/graphql/queries";
import { Article } from "../../commons/graphql/generated";
import { formatRelative } from "date-fns";
import { zhCN } from "date-fns/locale";
import Head from "next/head";
interface Props {
  article: Article;
}
const ArticleDetails: FC<Props> = ({ article }) => {
  // const router = useRouter()
  // const { data } = useQuery<{ article: Article }>(ARTICLE, {
  //   variables: router.query,
  // });

  return (
    <main className={styles.articleDetails}>
      <Head>
        <title>{article.title} - Ivan‘s Blog - IvanLi.cc</title>
      </Head>
      <article className={styles.article}>
        <header>
          <h1>{article.title}</h1>
          <div className={styles.headerInfo}>
            <address>作者 Ivan Li，发布于 </address>
            <time>
              {formatRelative(article.publishedAt, new Date(), {
                locale: zhCN,
              })}
            </time>
          </div>
        </header>
        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
        <footer>
          <div className={styles.articleEnd}>The End</div>
        </footer>
      </article>
    </main>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const apolloClient = initializeApollo();

  const { data } = await apolloClient.query<{ article: Article }>({
    query: ARTICLE,
    variables: params,
  });

  return addApolloState(apolloClient, {
    props: { article: data.article },
  });
};

export default ArticleDetails;
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								import { FC } from "react";
 								import styles from "./article.module.css";
-												feat: 文章列表和内容优化。

											
										
										
											2021-07-03 09:55:27 +08:00
+								import { GetServerSideProps } from "next";
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								import { addApolloState, initializeApollo } from "../../commons/graphql/client";
 								import { ARTICLE } from "../../commons/graphql/queries";
 								import { Article } from "../../commons/graphql/generated";
-												build: remove next.config.js

											
										
										
											2021-07-04 12:25:57 +08:00
+								import { formatRelative } from "date-fns";
-												feat: 文章详情 添加日期

											
										
										
											2021-07-03 22:36:38 +08:00
+								import { zhCN } from "date-fns/locale";
-												feat: page title.

											
										
										
											2021-07-25 21:52:09 +08:00
+								import Head from "next/head";
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								interface Props {
 								  article: Article;
 								}
 								const ArticleDetails: FC<Props> = ({ article }) => {
 								  // const router = useRouter()
 								  // const { data } = useQuery<{ article: Article }>(ARTICLE, {
 								  //   variables: router.query,
 								  // });
-												feat: 文章详情 添加日期

											
										
										
											2021-07-03 22:36:38 +08:00
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								  return (
 								    <main className={styles.articleDetails}>
-												feat: page title.

											
										
										
											2021-07-25 21:52:09 +08:00
+								      <Head>
 								        <title>{article.title} - Ivan‘s Blog - IvanLi.cc</title>
 								      </Head>
-												feat: article details page.

											
										
										
											2021-05-02 20:25:25 +08:00
+								      <article className={styles.article}>
 								        <header>
 								          <h1>{article.title}</h1>
-												feat: 文章详情 添加日期

											
										
										
											2021-07-03 22:36:38 +08:00
+								          <div className={styles.headerInfo}>
 								            <address>作者 Ivan Li，发布于 </address>
 								            <time>
 								              {formatRelative(article.publishedAt, new Date(), {
 								                locale: zhCN,
 								              })}
 								            </time>
 								          </div>
-												feat: article details page.

											
										
										
											2021-05-02 20:25:25 +08:00
+								        </header>
-												feat: 文章列表和内容优化。

											
										
										
											2021-07-03 09:55:27 +08:00
+								        <div dangerouslySetInnerHTML={{ __html: article.html }}></div>
 								        <footer>
 								          <div className={styles.articleEnd}>The End</div>
 								        </footer>
-												feat: article details page.

											
										
										
											2021-05-02 20:25:25 +08:00
+								      </article>
-												feat: 亮色暗色模式切换。

											
										
										
											2021-05-02 20:04:54 +08:00
+								    </main>
 								  );
 								};
 								export const getServerSideProps: GetServerSideProps = async ({ params }) => {
 								  const apolloClient = initializeApollo();
 								  const { data } = await apolloClient.query<{ article: Article }>({
 								    query: ARTICLE,
 								    variables: params,
 								  });
 								  return addApolloState(apolloClient, {
 								    props: { article: data.article },
 								  });
 								};
 								export default ArticleDetails;