feat: last updated UI in default theme. (#338)

vuejs · May 8, 2018 · 272df57 · 272df57
1 parent c65a8b7
commit 272df57
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 18 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -34,6 +34,7 @@ module.exports = {
         label: 'English',
         selectText: 'Languages',
         editLinkText: 'Edit this page on GitHub',
+        lastUpdated: 'Last Updated',
         nav: [
           {
             text: 'Guide',
@@ -56,6 +57,7 @@ module.exports = {
         label: '简体中文',
         selectText: '选择语言',
         editLinkText: '在 GitHub 上编辑此页',
+        lastUpdated: '上次更新',
         nav: [
           {
             text: '指南',

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
@@ -267,7 +267,7 @@ Built-in Search only builds index from the title, `h2` and `h3` headers, if you
 
 The `themeConfig.algolia` option allows you to use [Algolia DocSearch](https://community.algolia.com/docsearch/) to replace the simple built-in search. To enable it, you need to provide at least `apiKey` and `indexName`:
 
-```js
+``` js
 module.exports = {
   themeConfig: {
     algolia: {
@@ -280,6 +280,24 @@ module.exports = {
 
 For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).
 
+## Last Updated
+
+The `themeConfig.lastUpdated` option allows you to get the UNIX timestamp(ms) of each file's last `git` commit, and it will also display at the bottom of each page with a appropriate format:
+
+``` js
+module.exports = {
+  themeConfig: {
+    lastUpdated: 'Last Updated', // string | boolean
+  }
+}
+```
+
+Note that it's `off` by default. If given `string`, it will be displayed as a prefix (default value: `Last Updated`).
+
+::: warning
+  Since `lastUpdated` is based on `git`, so you can only use it in a `git` repository.
+:::
+
 ## Prev / Next Links
 
 Prev and next links are automatically inferred based on the sidebar order of the active page. You can also explicitly overwrite or disable them using `YAML front matter`:

diff --git a/docs/guide/custom-themes.md b/docs/guide/custom-themes.md
@@ -28,7 +28,7 @@ This is the value of `$site` of this very website:
   "base": "/",
   "pages": [
     {
-      "lastModified": 1524027677,
+      "lastUpdated": 1524027677000,
       "path": "/",
       "title": "VuePress",
       "frontmatter": {}
@@ -44,7 +44,7 @@ This is the `$page` object for this page you are looking at:
 
 ``` json
 {
-  "lastModified": 1524847549,
+  "lastUpdated": 1524847549000,
   "path": "/guide/custom-themes.html",
   "title": "Custom Themes",
   "headers": [/* ... */],
@@ -57,7 +57,8 @@ If the user provided `themeConfig` in `.vuepress/config.js`, it will also be ava
 Finally, don't forget that `this.$route` and `this.$router` are also available as part of Vue Router's API.
 
 ::: tip
-  `lastModified` is the UNIX timestamp of this file's last git commit, so please ensure you have git installed.
+  `lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../default-theme-config/#last-updated).
+
 :::
 
 ## Content Excerpt

diff --git a/docs/zh/default-theme-config/README.md b/docs/zh/default-theme-config/README.md
@@ -276,6 +276,24 @@ module.exports = {
 
 更多选项请参考 [Algolia DocSearch 的文档](https://github.com/algolia/docsearch#docsearch-options)。
 
+## 最近更新
+
+你可以通过 `themeConfig.lastUpdated` 选项来获取每个文件最后一次 `git` 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部：
+
+``` js
+module.exports = {
+  themeConfig: {
+    lastUpdated: 'Last Updated', // string | boolean
+  }
+}
+```
+
+请注意，`themeConfig.lastUpdated` 默认是关闭的，如果给定一个字符串，它将会作为前缀显示（默认值是：`Last Updated`）。
+
+::: warning 使用须知
+  由于 `lastUpdated` 是基于 `git` 的, 所以你只能在一个基于 `git` 的项目中启用它。
+:::
+
 ## 上 / 下一篇链接
 
 上一篇和下一篇文章的链接将会自动地根据当前页面的侧边栏的顺序来获取。你也可以使用 `YAML front matter` 来明确地重写或者禁用它：

diff --git a/docs/zh/guide/basic-config.md b/docs/zh/guide/basic-config.md
@@ -32,7 +32,7 @@ module.exports = {
 
 由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 `.vuepress/enhanceApp.js` 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。`enhanceApp.js` 应该 `export default` 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
 
-```js
+``` js
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
   options, // 附加到根实例的一些选项

diff --git a/docs/zh/guide/custom-themes.md b/docs/zh/guide/custom-themes.md
@@ -28,7 +28,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
   "base": "/",
   "pages": [
     {
-      "lastModified": 1524027677,
+      "lastUpdated": 1524027677000,
       "path": "/",
       "title": "VuePress",
       "frontmatter": {}
@@ -44,7 +44,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
 
 ``` json
 {
-  "lastModified": 1524847549,
+  "lastUpdated": 1524847549000,
   "path": "/custom-themes.html",
   "title": "自定义主题",
   "headers": [/* ... */],
@@ -57,7 +57,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
 最后，别忘了，作为 Vue Router API 的一部分，`this.$route` 和 `this.$router` 同样可以使用。
 
 ::: tip 提示
-  `lastModified` 是这个文件最后一次 git 提交的 unix 时间戳，所以请确保你已经安装了 git。
+  `lastUpdated` 是这个文件最后一次 git 提交的 UNIX 时间戳，更多细节请参考：[最近更新](../default-theme-config/#最近更新)。
 :::
 
 ## 内容摘抄
@@ -80,7 +80,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
 
 自定义主题也可以通过主题根目录下的 `enhanceApp.js` 文件来对 VuePress 应用进行拓展配置。这个文件应当 `export default` 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
 
-```js
+``` js
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
   options, // 附加到根实例的一些选项

diff --git a/docs/zh/guide/deploy.md b/docs/zh/guide/deploy.md
@@ -111,7 +111,7 @@ pages:
    ```
 
    `.firebaserc`:
-   ```js
+   ``` js
    {
      "projects": {
        "default": "<YOUR_FIREBASE_ID>"

diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md
@@ -38,7 +38,7 @@
    └─ four.md
 ```
 
-```md
+``` md
 [Home](/) <!-- 跳转到根部的 README.md -->
 [foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
 [foo heading anchor](/foo/#heading) <!-- 跳转到 foo/index.html 的特定 anchor 位置 -->

diff --git a/docs/zh/guide/using-vue.md b/docs/zh/guide/using-vue.md
@@ -131,7 +131,7 @@ export default {
 
 VuePress 对以下预处理器已经内置相关的 webpack 配置：`sass`、`scss`、`less`、`stylus` 和 `pug`。要使用它们你只需要在项目中安装对应的依赖即可。例如，要使用 `sass`，需要安装：
 
-```bash
+``` bash
 yarn add -D sass-loader node-sass
 ```
 
@@ -146,7 +146,7 @@ yarn add -D sass-loader node-sass
 
 要在组件中使用 `<template lang="pug">`，则需要安装 `pug` 和 `pug-plain-loader`:
 
-```bash
+``` bash
 yarn add -D pug pug-plain-loader
 ```
 

diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
@@ -4,6 +4,10 @@
     <div class="content edit-link" v-if="editLink">
       <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
       <OutboundLink/>
+      <div v-if="lastUpdated" class="last-updated">
+        <span class="prefix">{{ lastUpdatedText }}: </span>
+        <span class="time">{{ lastUpdated }}</span>
+      </div>
     </div>
     <div class="content page-nav" v-if="prev || next">
       <p class="inner">
@@ -31,6 +35,20 @@ export default {
   components: { OutboundLink },
   props: ['sidebarItems'],
   computed: {
+    lastUpdated () {
+      if (this.$page.lastUpdated) {
+        return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)
+      }
+    },
+    lastUpdatedText () {
+      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
+        return this.$themeLocaleConfig.lastUpdated
+      }
+      if (typeof this.$site.themeConfig.lastUpdated === 'string') {
+        return this.$site.themeConfig.lastUpdated
+      }
+      return 'Last Updated'
+    },
     prev () {
       const prev = this.$page.frontmatter.prev
       if (prev === false) {
@@ -129,6 +147,15 @@ function find (page, items, offset) {
   a
     color lighten($textColor, 25%)
     margin-right 0.25rem
+  .last-updated
+    margin-bottom .5rem
+    float right
+    font-weight 500
+    font-size .9em
+    .prefix
+      color lighten($textColor, 25%)
+    .time
+      color #aaa
 
 .page-nav.content
   padding-top 1rem !important
@@ -138,6 +165,15 @@ function find (page, items, offset) {
     margin-top 0 !important
     border-top 1px solid $borderColor
     padding-top 1rem
+    overflow auto // clear float
   .next
     float right
+
+@media (max-width: $MQMobile)
+  .edit-link.content .last-updated
+    float none
+    text-align left
+    margin-top 1rem
+    font-size .8em
+
 </style>
diff --git a/lib/prepare.js b/lib/prepare.js
@@ -9,7 +9,7 @@ const {
   inferTitle,
   extractHeaders,
   parseFrontmatter,
-  getGitLastModifiedTimeStamp
+  getGitLastUpdatedTimeStamp
 } = require('./util')
 
 fs.ensureDirSync(tempPath)
@@ -181,15 +181,24 @@ async function resolveOptions (sourceDir) {
   // resolve pageFiles
   const pageFiles = sort(await globby(['**/*.md', '!.vuepress', '!node_modules'], { cwd: sourceDir }))
 
+  // resolve lastUpdated
+  const shouldResolveLastUpdated = (
+    themeConfig.lastUpdated ||
+    Object.keys(siteConfig.locales && themeConfig.locales || {})
+      .some(base => themeConfig.locales[base].lastUpdated)
+  )
+
   // resolve pagesData
   const pagesData = await Promise.all(pageFiles.map(async (file) => {
     const filepath = path.resolve(sourceDir, file)
-    const lastModified = getGitLastModifiedTimeStamp(filepath)
     const data = {
-      lastModified,
       path: fileToPath(file)
     }
 
+    if (shouldResolveLastUpdated) {
+      data.lastUpdated = getGitLastUpdatedTimeStamp(filepath)
+    }
+
     // extract yaml frontmatter
     const content = await fs.readFile(filepath, 'utf-8')
     const frontmatter = parseFrontmatter(content)

diff --git a/lib/util/index.js b/lib/util/index.js
@@ -83,6 +83,6 @@ exports.extractHeaders = (content, include = [], md) => {
   return res
 }
 
-exports.getGitLastModifiedTimeStamp = filepath => {
-  return parseInt(spawn.sync('git', ['log', '-1', '--format=%ct', filepath]).stdout.toString('utf-8'))
+exports.getGitLastUpdatedTimeStamp = filepath => {
+  return parseInt(spawn.sync('git', ['log', '-1', '--format=%ct', filepath]).stdout.toString('utf-8')) * 1000
 }