From 13cb7163d7de624c7832ea185c861f882cb93acb Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Fri, 4 May 2018 01:24:38 +0800 Subject: [PATCH 1/8] feat: add last updated ui in default theme. --- docs/.vuepress/config.js | 6 ++++-- docs/guide/custom-themes.md | 6 +++--- docs/zh/guide/custom-themes.md | 6 +++--- lib/default-theme/Page.vue | 9 +++++++++ lib/prepare.js | 6 +++--- lib/util/index.js | 4 ++-- 6 files changed, 24 insertions(+), 13 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5b3f866095..6d46df1145 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -4,12 +4,14 @@ module.exports = { '/': { lang: 'en-US', title: 'VuePress', - description: 'Vue-powered Static Site Generator' + description: 'Vue-powered Static Site Generator', + lastUpdated: 'Last Updated' }, '/zh/': { lang: 'zh-CN', title: 'VuePress', - description: 'Vue 驱动的静态网站生成器' + description: 'Vue 驱动的静态网站生成器', + lastUpdated: '上次更新' } }, head: [ diff --git a/docs/guide/custom-themes.md b/docs/guide/custom-themes.md index 190173df77..8d3115eda8 100644 --- 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": 1524027677, "path": "/", "title": "VuePress", "frontmatter": {} @@ -44,7 +44,7 @@ This is the `$page` object for this page you are looking at: ``` json { - "lastModified": 1524847549, + "lastUpdated": 1524847549, "path": "/guide/custom-themes.html", "title": "Custom Themes", "headers": [/* ... */], @@ -57,7 +57,7 @@ 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, so please ensure you have git installed. ::: ## Content Excerpt diff --git a/docs/zh/guide/custom-themes.md b/docs/zh/guide/custom-themes.md index 8b5ebffc3e..f76e5fc842 100644 --- a/docs/zh/guide/custom-themes.md +++ b/docs/zh/guide/custom-themes.md @@ -28,7 +28,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自 "base": "/", "pages": [ { - "lastModified": 1524027677, + "lastUpdated": 1524027677, "path": "/", "title": "VuePress", "frontmatter": {} @@ -44,7 +44,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自 ``` json { - "lastModified": 1524847549, + "lastUpdated": 1524847549, "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 时间戳，所以请确保你已经安装了 git。 ::: ## 内容摘抄 diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue index ea03b3ff19..2f52bfe4f3 100644 --- a/lib/default-theme/Page.vue +++ b/lib/default-theme/Page.vue @@ -18,6 +18,7 @@ →

+
{{ $localeConfig.lastUpdated || 'Last Updated' }}: {{ lastUpdated }}
@@ -31,6 +32,9 @@ export default { components: { OutboundLink }, props: ['sidebarItems'], computed: { + lastUpdated () { + return new Date(this.$page.lastUpdated).toLocaleString(this.$localeConfig.lang) + }, prev () { const prev = this.$page.frontmatter.prev if (prev === false) { @@ -140,4 +144,9 @@ function find (page, items, offset) { padding-top 1rem .next float right + .last-updated + color $arrowBgColor + text-align center + font-size 0.9em + margin-bottom .5rem diff --git a/lib/prepare.js b/lib/prepare.js index 46b478de6f..ac7f924ea8 100644 --- a/lib/prepare.js +++ b/lib/prepare.js @@ -9,7 +9,7 @@ const { inferTitle, extractHeaders, parseFrontmatter, - getGitLastModifiedTimeStamp + getGitLastUpdatedTimeStamp } = require('./util') fs.ensureDirSync(tempPath) @@ -184,9 +184,9 @@ async function resolveOptions (sourceDir) { // resolve pagesData const pagesData = await Promise.all(pageFiles.map(async (file) => { const filepath = path.resolve(sourceDir, file) - const lastModified = getGitLastModifiedTimeStamp(filepath) + const lastUpdated = getGitLastUpdatedTimeStamp(filepath) const data = { - lastModified, + lastUpdated, path: fileToPath(file) } diff --git a/lib/util/index.js b/lib/util/index.js index a1c2a70b09..4ef2345ad9 100644 --- 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 } From d3440438a8a082f3da700acf89482f636b54e345 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Fri, 4 May 2018 01:41:02 +0800 Subject: [PATCH 2/8] style: clear float --- lib/default-theme/Page.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue index 2f52bfe4f3..1adea971b8 100644 --- a/lib/default-theme/Page.vue +++ b/lib/default-theme/Page.vue @@ -142,6 +142,7 @@ function find (page, items, offset) { margin-top 0 !important border-top 1px solid $borderColor padding-top 1rem + overflow auto // clear float .next float right .last-updated From 4921f992262f45c93344e82087176211289acd87 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Fri, 4 May 2018 23:22:37 +0800 Subject: [PATCH 3/8] feat: disable lastUpdated by default --- docs/.vuepress/config.js | 8 ++++---- lib/default-theme/Page.vue | 15 +++++++++++++-- lib/prepare.js | 13 +++++++++++-- 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 6d46df1145..ad70d04dba 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -4,14 +4,12 @@ module.exports = { '/': { lang: 'en-US', title: 'VuePress', - description: 'Vue-powered Static Site Generator', - lastUpdated: 'Last Updated' + description: 'Vue-powered Static Site Generator' }, '/zh/': { lang: 'zh-CN', title: 'VuePress', - description: 'Vue 驱动的静态网站生成器', - lastUpdated: '上次更新' + description: 'Vue 驱动的静态网站生成器' } }, head: [ @@ -36,6 +34,7 @@ module.exports = { label: 'English', selectText: 'Languages', editLinkText: 'Edit this page on GitHub', + lastUpdated: 'Last Updated', nav: [ { text: 'Guide', @@ -58,6 +57,7 @@ module.exports = { label: '简体中文', selectText: '选择语言', editLinkText: '在 GitHub 上编辑此页', + lastUpdated: '上次更新', nav: [ { text: '指南', diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue index 1adea971b8..bc54fae758 100644 --- a/lib/default-theme/Page.vue +++ b/lib/default-theme/Page.vue @@ -18,7 +18,7 @@ →

-
{{ $localeConfig.lastUpdated || 'Last Updated' }}: {{ lastUpdated }}
+
{{ lastUpdatedText }}: {{ lastUpdated }}
@@ -33,7 +33,18 @@ export default { props: ['sidebarItems'], computed: { lastUpdated () { - return new Date(this.$page.lastUpdated).toLocaleString(this.$localeConfig.lang) + 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 diff --git a/lib/prepare.js b/lib/prepare.js index ac7f924ea8..49186a82d0 100644 --- a/lib/prepare.js +++ b/lib/prepare.js @@ -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 lastUpdated = getGitLastUpdatedTimeStamp(filepath) const data = { - lastUpdated, path: fileToPath(file) } + if (shouldResolveLastUpdated) { + data.lastUpdated = getGitLastUpdatedTimeStamp(filepath) + } + // extract yaml frontmatter const content = await fs.readFile(filepath, 'utf-8') const frontmatter = parseFrontmatter(content) From 8b295e1107dc543eb842a97b060ebbfc58dce6ab Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Fri, 4 May 2018 23:51:44 +0800 Subject: [PATCH 4/8] docs: update --- docs/default-theme-config/README.md | 20 +++++++++++++++++++- docs/guide/custom-themes.md | 7 ++++--- docs/zh/default-theme-config/README.md | 18 ++++++++++++++++++ docs/zh/guide/basic-config.md | 2 +- docs/zh/guide/custom-themes.md | 6 +++--- docs/zh/guide/deploy.md | 2 +- docs/zh/guide/markdown.md | 2 +- docs/zh/guide/using-vue.md | 4 ++-- 8 files changed, 49 insertions(+), 12 deletions(-) diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md index 8a2ea09f6e..7507674286 100644 --- 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 also display it at the bottom of each page: + +``` 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 index 8d3115eda8..c0afb68f8b 100644 --- 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": [ { - "lastUpdated": 1524027677, + "lastUpdated": 1524027677000, "path": "/", "title": "VuePress", "frontmatter": {} @@ -44,7 +44,7 @@ This is the `$page` object for this page you are looking at: ``` json { - "lastUpdated": 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 - `lastUpdated` 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 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 index 97d444bebb..6db04b1e15 100644 --- 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 commit` 的 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 index 7dfe504b52..b8a0b0a54b 100644 --- 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 index f76e5fc842..1a040a1406 100644 --- a/docs/zh/guide/custom-themes.md +++ b/docs/zh/guide/custom-themes.md @@ -28,7 +28,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自 "base": "/", "pages": [ { - "lastUpdated": 1524027677, + "lastUpdated": 1524027677000, "path": "/", "title": "VuePress", "frontmatter": {} @@ -44,7 +44,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自 ``` json { - "lastUpdated": 1524847549, + "lastUpdated": 1524847549000, "path": "/custom-themes.html", "title": "自定义主题", "headers": [/* ... */], @@ -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 index 73f18711ad..6a974fcbdc 100644 --- a/docs/zh/guide/deploy.md +++ b/docs/zh/guide/deploy.md @@ -111,7 +111,7 @@ pages: ``` `.firebaserc`: - ```js + ``` js { "projects": { "default": "" diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md index df20186e23..ac63a26b50 100644 --- a/docs/zh/guide/markdown.md +++ b/docs/zh/guide/markdown.md @@ -38,7 +38,7 @@ └─ four.md ``` -```md +``` md [Home](/) [foo](/foo/) [foo heading anchor](/foo/#heading) diff --git a/docs/zh/guide/using-vue.md b/docs/zh/guide/using-vue.md index 2d1d6369ae..3a9dbca08c 100644 --- 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 要在组件中使用 `