💥 A simple and beautiful vuepress Blog & Doc theme.

Overview

Vue logo

Introduce

  1. This is a Vuepress theme, which is designed to add blog categories, tag walls, pagination, comments and other functions required;
  2. The theme is minimalist, modified according to the default theme of Vuepress, and the official theme configuration is still applicable;
  3. Demo:午后南杂
  4. Docs:vuepress-theme-reco-docgithub sourcezeit source

Quick start

npx

npx @vuepress-reco/theme-cli init

npm

npm install @vuepress-reco/theme-cli -g

theme-cli init

yarn

yarn global add @vuepress-reco/theme-cli

theme-cli init

Multi-language

language language code
Simplified Chinese zh-CNzh-SG
Traditional Chinese zh-HKzh-MOzh-TW
Japanese ja-JP
Korean ko-KR
English en-US and other

Update record

Record

Contributors

vuepress-theme-reco
vuepress-reco.github.io

P.S. Thanks to the two beauties for their contributions to the theme logo: Zoey and 冰冰.

Join us

License

MIT

Preview

size.png

style.png

dark.png

home.png

Comments
  • [1.x] vuepress-theme-reco在config.js中使用主题 “theme”: “reco” 运行正常 打包报错 错误信息如下

    [1.x] vuepress-theme-reco在config.js中使用主题 “theme”: “reco” 运行正常 打包报错 错误信息如下

    vuepress-theme-reco在config.js中使用主题 “theme”: “reco” 运行正常 打包报错 有大佬知道是解决办法吗 万分感谢 错误信息如下 error Error rendering /tag/: false undefined error Error rendering /timeline/: false undefined error Error rendering /tag/tag1/: false undefined error Error rendering /tag/tag2/: false undefined error Error rendering /tag/tag3/: false undefined error Error rendering /tag/tag4/: false undefined error Error rendering /categories/category1/: false undefined error Error rendering /categories/category2/: false undefined [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    [Vue warn]: Error in setup: “Error: must be called in setup”

    found in

    —>

    error Error rendering /categories/: false undefined error Error rendering /: false undefined error Error rendering /blogs/category1/2018/121501.html: false undefined error Error rendering /blogs/category1/2019/092101.html: false undefined error Error rendering /blogs/category2/2016/121501.html: false undefined error Error rendering /blogs/category2/2017/092101.html: false undefined error Error rendering /docs/theme-reco/: false undefined error Error rendering /docs/theme-reco/api.html: false undefined error Error rendering /docs/theme-reco/plugin.html: false undefined error Error rendering /docs/theme-reco/theme.html: false undefined error Error rendering /blogs/other/guide.html: false undefined Error: must be called in setup at useInstance (node_modules/vuepress-theme-reco/helpers/composable.js:5:17) at setup (node_modules/vuepress-theme-reco/layouts/404.vue:24:0) at mergedSetupFn (node_modules/@vue/composition-api/dist/vue-composition-api.esm.js:1672:88) at invokeWithErrorHandling (D:\demo\demo3\my-blog\node_modules\vue\dist\vue.runtime.common.dev.js:3878:30) at initSetup (D:\demo\demo3\my-blog\node_modules\vue\dist\vue.runtime.common.dev.js:2284:29) at initState (D:\demo\demo3\my-blog\node_modules\vue\dist\vue.runtime.common.dev.js:5104:5) at VueComponent.Vue._init (D:\demo\demo3\my-blog\node_modules\vue\dist\vue.runtime.common.dev.js:5418:9) at new VueComponent (D:\demo\demo3\my-blog\node_modules\vue\dist\vue.runtime.common.dev.js:5553:18) at createComponentInstanceForVnode (D:\demo\demo3\my-blog\node_modules\vue-server-renderer\build.dev.js:1979:12) at renderComponentInner (D:\demo\demo3\my-blog\node_modules\vue-server-renderer\build.dev.js:7187:45) at renderComponent (D:\demo\demo3\my-blog\node_modules\vue-server-renderer\build.dev.js:7164:9) at resolve (D:\demo\demo3\my-blog\node_modules\vue-server-renderer\build.dev.js:7213:17)

    opened by yangtonggui 25
  • 按照2.0官网指导,初始化后报错,页面空白

    按照2.0官网指导,初始化后报错,页面空白

    按照2.0主题进行初始化后报错

    npm install @vuepress-reco/[email protected] -g
    theme-cli init
    

    只有公告栏显示,主页面空白,控制台有2条报错信息: ReferenceError: Cannot access 'clientAppEnhances' before initialization Error: useRouteLocale() is called without provider.

    opened by zhouzhili 22
  • 2.x Build 返回错误  Rendering pages /ReferenceError: sessionStorage is not defined

    2.x Build 返回错误 Rendering pages /ReferenceError: sessionStorage is not defined

    Rendering pages /ReferenceError: sessionStorage is not defined

    image

    系统 mac arm64 版本 "vuepress": "2.0.0-beta.48", "vuepress-theme-reco": "2.0.0-beta.21"

    opened by reaink 13
  • Must use import to load ES Module: @vuepress\plugin-back-to-top

    Must use import to load ES Module: @vuepress\plugin-back-to-top

    Bug report

    Must use import to load ES Module: @vuepress\plugin-back-to-top

    What is actually happening?

    Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\GitHub\shichaohui\blog\node_modules\@vuepress\plugin-back-to-top\lib\node\index.js
    require() of ES modules is not supported.
    require() of D:\GitHub\shichaohui\blog\node_modules\@vuepress\plugin-back-to-top\lib\node\index.js from D:\GitHub\shichaohui\blog\node_modules\vuepress-theme-reco\lib\node\recoTheme.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files 
    in that package scope as ES modules.
    Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\GitHub\shichaohui\blog\node_modules\@vuepress\plugin-back-to-top\package.json.
    
        at new NodeError (internal/errors.js:322:7)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
        at Module.load (internal/modules/cjs/loader.js:950:32)
        at Function.Module._load (internal/modules/cjs/loader.js:790:12)
        at Module.require (internal/modules/cjs/loader.js:974:19)
        at require (internal/modules/cjs/helpers.js:93:18)
        at Object.<anonymous> (D:\GitHub\shichaohui\blog\node_modules\vuepress-theme-reco\lib\node\recoTheme.js:5:30)
        at Module._compile (internal/modules/cjs/loader.js:1085:14)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
        at Module.load (internal/modules/cjs/loader.js:950:32)
    

    Other relevant information

    • Your OS: Windows 10
    • Node.js version: v14.18.3
    • VuePress version: 2.0.0-beta.46
    • VuePress-theme-reco version: 2.0.0-beta.33
    • Which package manager did you use for the install(npm/cnpm/yarn/pnpm)? yarn
    opened by shichaohui 5
  • theme-reco-1.x 有多余请求,影响了本身的加载速度

    theme-reco-1.x 有多余请求,影响了本身的加载速度

    • [ ] I confirm that this is an issue rather than a question.

    Bug report

    What is actually happening?

    Other relevant information

    • Your OS:
    • Node.js version:
    • VuePress version:
    • VuePress-theme-reco version:
    • Which package manager did you use for the install(npm/cnpm/yarn/pnpm)?
    opened by jingjianhai 5
  • vuess加载失败

    vuess加载失败

    Describe the bug [vuepress:sw] Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://www.duktig.cn/') with script ('https://www.duktig.cn/service-worker.js'): ServiceWorker script evaluation failed

    image

    Desktop (please complete the following information):

    • OS:win10
    • Browser chrome

    version:1.6.10

    opened by duktig666 5
  • [1.x] 右侧侧边栏添加后,页面老是自己回滚,有没有什么解决办法

    [1.x] 右侧侧边栏添加后,页面老是自己回滚,有没有什么解决办法

    • [ ] I confirm that this is an issue rather than a question.

    Bug report

    What is actually happening?

    Other relevant information

    • Your OS:
    • Node.js version:
    • VuePress version:
    • VuePress-theme-reco version:
    • Which package manager did you use for the install(npm/cnpm/yarn/pnpm)?
    opened by xiaohuooo 3
  • Tabs and pageviews are displayed incorrectly.

    Tabs and pageviews are displayed incorrectly.

    • [x] I confirm that this is an issue rather than a question.

    Bug report

    none

    What is actually happening?

    Refresh after visiting the article page on the blog homepage, or directly visit the article page, the tag and pageviews amount will show errors.

    Video of steps to reproduce: https://user-images.githubusercontent.com/43847794/180485804-e614d36c-6c71-4ef1-b766-3da2e1fd2a0e.mp4

    Steps to reproduce

    1. Click the copy directly on the blog homepage
    2. Refresh the page and it will appear

    Other relevant information

    • Your OS: Ubuntu 20.04
    • Node.js version: v16.15.1
    • VuePress version: 2.0.0-beta.48
    • VuePress-theme-reco version: 2.0.0-beta.24
    • Which package manager did you use for the install(npm/cnpm/yarn/pnpm)? yarn v1.22.17
    bug 
    opened by vlssu 3
  • [2.x]build出问题

    [2.x]build出问题

    moduleIdentifier: "/Users/sicko/blog/test-blog/sicko's blog/.vuepress/.temp/internal/clientAppEnhances.js",
      moduleName: './.vuepress/.temp/internal/clientAppEnhances.js',
      loc: '1:65',
      message: 'Module parse failed: Unexpected token (1:65)\n' +
        'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
        "> import clientAppEnhance0 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-theme-data/lib/client/clientAppEnhance.js'\n" +
        "| import clientAppEnhance1 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-search/lib/client/clientAppEnhance.js'\n" +
        "| import clientAppEnhance2 from '/Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/plugin-external-link-icon/lib/client/clientAppEnhance.js'",
    

    Error: Failed to compile with errors at /Users/sicko/blog/test-blog/sicko's blog/node_modules/@vuepress/bundler-webpack/lib/build/createBuild.js:37:28 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/webpack/lib/webpack.js:148:8 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2830:7 at done (/Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2865:11) at /Users/sicko/blog/test-blog/sicko's blog/node_modules/neo-async/async.js:2818:7 at /Users/sicko/blog/test-blog/sicko's blog/node_modules/webpack/lib/HookWebpackError.js:68:3 at _done (eval at create (/Users/sicko/blog/test-blog/sicko's blog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) at eval (eval at create (/Users/sicko/blog/test-blog/sicko's blog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:22) 似乎没解决这个问题,版本均是最新的。

    opened by googidaddy 3
  • 关于首页blog模块个人名片社交icon的设置

    关于首页blog模块个人名片社交icon的设置

    Question & Description

    I would like to add blog module in home page. Adding my github and gitee icon to personal card. I add frontmatter following the tutorial but Xions website can not open. So I don't know how to set the icon.

    image

    My code as following but nothing happen.

    image

    image

    Additional context

    The document will looks better if some detail demo can be added.

    opened by Undertone0809 2
  • 2.0.0-beta.6,本地运行无问题,打包失败,报错

    2.0.0-beta.6,本地运行无问题,打包失败,报错

    image
      "dependencies": {
        "vuepress": "^2.0.0-beta.46",
        "vuepress-theme-reco": "^2.0.0-beta.6"
      }
    

    切换到webpack打包还是失败,报错

    opened by ginteo 2
  • Why is there a

    Why is there a "/1" at the end of category link?

    https://github.com/vuepress-reco/vuepress-theme-reco/blob/61c8e7a0b8e73ed8d89679c28de5daf764d6f1ff/packages/vuepress-theme-reco/src/client/components/Home/Blog.vue#L17

    I find it weird that the "/1" is there. Why don't we just do the following?

    <router-link class="category-link" :to="`/categories/${key}/`">
    
    opened by franklinqin0 0
  • 体验2.x版本的几个建议

    体验2.x版本的几个建议

    大佬,对比1代版本,希望能在2.x补充下: 1.将首页加载动画加回来,而且希望可以自定义动画图片。 2.补充导航选中效果。 已解决,frontmatter 格式问题,与1.x版本有点不一致~~3.如果文档有 import / require 关键词,分页报错,文章详情报错白屏死掉。(在未进行主题文件二改的情况下) Uncaught (in promise) TypeError: _ctx.categories.join is not a function at PageInfo.vue:6:20~~ 3.希望加局部页面加密的配置,跟1.x那种就行。全站加密无法满足需要。 4. 1.x 版本首页的文章数量和标签数量统计我觉得挺不错的,希望2.x还会加回来。 5. 首页的 Categories/Tags 建议增加上限,多出来的省略,不然很长的时候影响页面美观。

    opened by phygray 0
  • 公安网备弹出新页签呗

    公安网备弹出新页签呗

    Is your feature request related to a problem? Please describe.

    Describe the solution you'd like

    Describe alternatives you've considered

    Additional context

    opened by FailureIsTheNorm 0
  • fix: optimize Xicons

    fix: optimize Xicons

    Xicons.vue. The vue component can not only render an icon with linked text, but also render an icon separately. I think the original intention of this component design. The link has a default value of 'javascript: void (0)', so when using the Xicons component, I just want to get an icon. I did not pass the link to it, but I still got an a tag. This is a bit illogical because it seems that the following code will never be executed: <component v-else :style="iconStyle" :is="icons[icon]" /> I think whether to use the a tag is decided by the component user, not by Xicons.So I created this pr, which has passed the local test and pnpm example: build

    opened by zhaopan-pan 0
  • pnpm build error

    pnpm build error

    I clone this project. First, I used pnpm install to install dependencies。When I ran the pnpm build, I found this error: error After troubleshooting, it is found that @ vuepress reco/vuepress plugin page depends on @ vuepress reco/shared, image I temporarily solved this problem with a hack method. I executed the @ vuepress reco/shared build command ahead of time. Now I can successfully run the pnpm build. But I don't think this is the best solution.

    • OS: mac os
    • Node.js version: v14.19.1
    • VuePress version: 2.0.0-beta.51
    • VuePress-theme-reco version: 2.0.0-beta.41
    • pnpm:7.15.0
    opened by zhaopan-pan 0
Owner
vuepress-reco
Some interesting products of vue by reco_luan.
vuepress-reco
🖼️ An Elegant VuePress Theme, inspired by @vue/theme.

VT An Elegant VuePress Theme, inspired by @vue/theme . ?? Live Documentation ?? VuePress Docs With This Theme Features Compatibility: fully compatible

ULIVZ 58 Dec 11, 2022
A blog theme for VuePress by Ktquez 🤘

vuepress-theme-ktquez A blog theme for VuePress by Ktquez ?? ?? Vuepress does not yet have native support for blogs, but this theme has some practices

Alan Ktquez 331 Dec 27, 2022
Shopify Foundation Theme is modern Shopify theme built with Shopify Theme Lab, Vue and Tailwind CSS.

Modern Shopify theme using Shopify Theme Lab, Liquid, Vue and Tailwind CSS ??

UI Crooks 218 Jan 4, 2023
Vuepress v2+ dynamic-title-plugin: add a dynamic title in your vuepress

vuepress-plugin-dynamic-title-v2 ?? Add a dynamic title in your vuepress! Document: moefy-vuepress Live demo: notev Dependencies vuepress version vuep

tianyake 1 May 6, 2022
A custom vuepress theme with mermaid and plantuml, katex and vue components.

Personal Documentation Theme for VuePress Currently, completely refactoring code for vuepress v1, all components should be compatible. This is the Vue

David Li 58 Oct 10, 2022
A theme for VuePress 2

vuepress-theme-mix About The Project VuePress Theme Mix is a minimalistic theme that is designed and developed for VuePress 2. It's deeply customized

Gavin 49 Jan 5, 2023
A minimalist vuepress theme, compatible with hexo YAML front matter syntax.

A minimalist vuepress theme, compatible with hexo YAML front matter syntax.

BLANK 19 Dec 14, 2022
Personal Documentation Theme for VuePress

Personal Documentation Theme for VuePress Currently, completely refactoring code for vuepress v1, all components should be compatible. This is the Vue

CH 0 Jul 30, 2019
VitePress theme base on @vue/theme, more practical and comprehensive.

VitePress theme base on @vue/theme, more practical and comprehensive.

alex.wei 4 Sep 1, 2022
Contact Us widget generator. plugin for Vuepress 可以自动生成联系我们按钮的插件

Vuepress Plugin: Contact Us Form This plugin will automatically put a floating button at the left-bottom corner, once it's clicked, a contact us form

Justin Wang 6 Sep 23, 2022
A Unicorn theme for Slidev slides based on dawntraoz.com design.

slidev-theme-unicorn A Unicorn theme for Slidev. This theme is based on dawntraoz.com website design

Alba Silvente Fuentes 44 Nov 16, 2022
A Penguin 🐧 theme for Slidev

This theme is based on my personal brand, but it can be easily use and customized for your own.

Alvaro Saburido 103 Dec 16, 2022
A Slidev Theme for my talks about Vue.js

slidev-theme-vuetiful A Vue-inspired theme for Slidev. Live demo: https://slidev-theme-vuetiful.netlify.app/ Features Pretty Vue Theme Subtle Animatio

Thorsten Lünborg 57 Dec 23, 2022
LightDM theme inspired in Void Linux (without any reason)

LightDM Void Theme I tried Void Linux and got super excited to create a lightdm theme inspired in Void. There's actually no relation with Void Linux,

Jezer Mejía 16 Jan 3, 2023
A front-end multi-theme solution based on sass

A front-end multi-theme solution based on sass

Tom McFly 1 May 13, 2022
Blog Site Using Nuxt , Vite And Tailwind Css

NuxTailwind Blog Site Using Nuxt , Vite And Tailwind CSS. Key Features • How To Use • Download • Credits • Related • License View On Desktop 1024x768

kalana kithmina 10 Nov 18, 2022
🚀一款简洁高效的VuePress知识管理&博客(blog)主题

??一款简洁高效的VuePress知识管理&博客(blog)主题

Evan Xu 2.9k Jan 4, 2023
Basic and Simple Live IPL Cricket Score site Build using Vue.js and Tailwind CSS

Live IPL Cricket Score Basic and Simple Live IPL Cricket Score site Build using Vue.js and Tailwind CSS This is an Demo and Sample site - Just clone o

Santhosh Veer 1 Aug 11, 2022
✅ vue-bem-cn - Simple BEM class name generator for Vue.JS

vue-bem-cn Simple BEM-style class name generator for Vue.JS 2.* Table of Contents Quick example Installation Usage API Quick example Live demo: codepe

Stanislav 124 Oct 12, 2022