fix: Fix website title/description/keywords issue (#46).

docs/introduce/api/config.md

@@ -7,9 +7,9 @@
 
 目前有三种配置，每种配置方式都起不通的作用，都不是必要的配置，配置格式均使用 [yaml](https://yaml.org/)。三种配置：
 
-- [x] `idoc.yml` 在根目录下添加 不用配置。
-- [x] `idoc.chapters.yml` 左侧栏文件导航（SiderBar），在根目录下添加。
-- [x] `注释配置` 在 markdown 文档中添加的配置。
+- [x] `idoc.yml` 在根目录下添加（可选配置）。
+- [x] `idoc.chapters.yml` 左侧栏文件导航（SiderBar），在根目录下添加（可选配置）。
+- [x] `注释配置` 在 markdown 文档中添加的配置（可选配置）。
 
 ## `idoc.yml`
 
@@ -188,7 +188,7 @@ footer: |
 
 ## 注释配置
 
-这种配置是指在 `markdown` 文档中添加的配置，主要用于控制类似于 `toc` 页面导航是否显示，页面标题展示，翻页等功能。
+这种配置是指在 `markdown` 文档中添加的配置，主要用于控制类似于 `tocs` 页面导航是否显示，页面标题展示，翻页等功能。
 
 ### 配置方法
 
@@ -206,21 +206,29 @@ tocs: false
 # 页面目录隐藏
 tocs: false
 # 当前页面网站名称，可以全局 `idoc.yml` 中配置
-site: 当前页面网站名称
-# ⚠️ Logo 旁边的 <网站名称>，当前页面范围，
+# 🚧 Logo 旁边的 <网站名称>，和 <title> 的名称配置
 # 可以全局 `idoc.yml` 中配置，
 # 都没有配置在 `package.json` 中读取 `name` 字段信息
-title: 网站名称
-fileStat:
-  # 配置当前文档的修改时间，展示在页脚
-  mtimeStr: 2022/04/13
-# 当前页面页脚配置
+site: 网站名称
+# 在浏览器标签处显示的内容
+# 默认 Markdown 文档第一个标题 <h1>
+title: 网页标题
+# 对网页的一个简单概述，默认获取当前 Markdown 页面第一段文本
+description: 网页简述
+# 搜索引擎能搜索到的关键词，每个关键词之间用逗号，隔开，必须是英文的逗号。
+keywords: 关键词
+# 当前页面<页脚>配置
 footer: |
   Released under the MIT License. Copyright © 2022 Kenny Wong<br />
   Generated by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>
+# 🚧 当前文件信息，不准确，比如 CI 在服务端生成，没有办法记录 修改时间。
+fileStat:
+  # 配置当前文档的修改时间，展示在页脚
+  mtimeStr: 2022/04/13
 ```
 
 <!--idoc:config:
+keywords: idoc,config
 fileStat:
   mtimeStr: 2022/04/13
 -->

src/markdown/markdown.ts

@@ -8,6 +8,7 @@ import { IFileDirStat } from 'recursive-readdir-files';
 import autolinkHeadings from 'rehype-autolink-headings';
 import markdownToHTML from '@wcj/markdown-to-html';
 import ignore from 'rehype-ignore';
+import { getCodeString } from 'rehype-rewrite';
 import slug from 'rehype-slug';
 import { config, MenuData } from '../utils/conf.js';
 import rehypeUrls from './rehype-urls.js';
@@ -24,8 +25,10 @@ export type TemplateData = {
     url: string;
   };
   edit?: string;
-  title?: string;
   site?: string;
+  title?: string;
+  description?: string;
+  keywords?: string;
   favicon?: string;
   logo?: string;
   menus?: MenuData[];
@@ -64,8 +67,27 @@ export async function createHTML(str: string = '', from: string, toPath: string)
   const tocs: Toc[] = [];
   let tocsStart: number = 6;
   let configMarkdownStr = '';
+  let pagetitle = '';
+  let description = '';
   mdOptions.rewrite = (node, index, parent) => {
     rehypeUrls(node);
+    if (node.type === 'root') {
+      // get title
+      const h1Elm = node.children.find((item) => item.type === 'element' && item.tagName === 'h1');
+      if (h1Elm && h1Elm.type === 'element') {
+        pagetitle = getCodeString(h1Elm.children);
+      }
+      // get description
+      const desElm = node.children.find((item) => {
+        if (item.type === 'element' && item.tagName === 'p') {
+          return !!item.children.find((item) => item.type === 'text' && item.value.trim().replace(/\n/g, ''));
+        }
+        return false;
+      });
+      if (desElm && desElm.type === 'element') {
+        description = getCodeString(desElm.children) || pagetitle;
+      }
+    }
     if (
       node.type == 'element' &&
       /h(1|2|3|4|5|6)/.test(node.tagName) &&
@@ -103,7 +125,9 @@ export async function createHTML(str: string = '', from: string, toPath: string)
   const data: Data & TemplateData = { fileStat: {}, tocs: [...tocsArr], menus: [] };
   data.markdown = mdHtml;
   data.site = config.data.site;
-  data.title = config.data.site;
+  data.title = pagetitle;
+  data.description = description.trim().slice(0, 120);
+  data.keywords = config.data.keywords;
   data.favicon = config.data.favicon;
   data.logo = config.data.logo;
   data.version = config.data.version;

src/utils/conf.ts

@@ -17,6 +17,7 @@ export interface Config {
   readme?: string;
   /** site name */
   site?: string;
+  keywords?: string;
   /** website logo icon */
   logo?: string;
   /** website favicon icon */
@@ -50,6 +51,7 @@ export class Conf {
     scope: [],
     data: {},
     site: 'idoc',
+    keywords: '',
   };
   get all() {
     return this.data;

themes/default/partial/header.ejs

@@ -4,7 +4,13 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title><%= title %> <%= site %></title>
+  <title><%= title %> <%= site %> </title>
+  <% if (description) { %>
+  <meta name="description" content="<%= description %>">
+  <% }%>
+  <% if (keywords) { %>
+  <meta name="keywords" content="<%= keywords %>">
+  <% }%>
   <link rel="stylesheet" type="text/css" href="<%= RELATIVE_PATH %>css/main.css?v=<%=new Date().getTime()%>">
   <link rel="stylesheet" type="text/css" href="<%= RELATIVE_PATH %>css/tocbot.css?v=<%=new Date().getTime()%>">
   <link rel="stylesheet" type="text/css" href="<%= RELATIVE_PATH %>css/media.css?v=<%=new Date().getTime()%>">

themes/default/partial/navigation.ejs

@@ -4,7 +4,7 @@
       <% if (logo) { %>
         <img alt="handbook logo" src="<%=logo%>">
       <% } %>
-      <span class="title"><%-title%></span>
+      <span class="title"><%-site%></span>
     </a>
     <div class="content">
       <ul class="menu">