VuePress 中文主题「Mediumish」安装与使用教程

VuePress 中文主题「Mediumish」安装与使用教程

mediumish-vuepress-blog-themeVuePress Medimish Theme - Free Theme for VuePress Blog项目地址:https://gitcode.com/gh_mirrors/me/mediumish-vuepress-blog-theme

欢迎来到 VuePress 的 Mediumish 主题指南。本教程将引导您了解如何设置、运行并自定义基于 wowthemesnet/mediumish-vuepress-blog-theme 的博客。此主题灵感来源于 Medium 风格，旨在提供一个全功能、易于定制的博客框架。

1. 项目的目录结构及介绍

VuePress 主题 Mediumish 的典型目录结构大致如下：

mediumish-vuepress-blog-theme/
├── .editorconfig           # 编辑器配置文件
├── .gitattributes          # Git 属性配置
├── .gitignore              # 忽略文件列表
├── deploy.sh               # 部署脚本
├── docs                    # 文档源码目录（VuePress 的入口）
│   ├── .vuepress            # VuePress 配置及静态资源目录
│   │   ├── config.js        # 主配置文件
│   │   └── ...
│   ├── README.md            # 示例首页或文档页
│   └── ...                 # 其他文档页面
├── package.json            # 项目依赖和脚本命令
├── README.md               # 项目说明文档
├── styles                  # 自定义样式目录
│   └── ...
└── ...

• .vuepress/config.js: 核心配置文件，用于设定网站元数据、导航栏、侧边栏等。
• docs 目录: 包含所有Markdown文档以及 .vuepress 子目录，其中 .vuepress 是VuePress特定配置和静态资源存放的地方。
• styles 目录: 个性化CSS样式存放位置，允许深度定制外观。
• deploy.sh: 提供自动化部署脚本，简化发布流程。

2. 项目的启动文件介绍

启动主要通过 npm 或 yarn 脚本来管理，核心在于 package.json 文件中的scripts部分。通常包括以下关键脚本：

• npm run serve 或 yarn serve: 启动开发服务器，实时编译和预览你的站点。

• npm run build 或 yarn build: 生产环境构建，生成可用于部署的静态资源。

示例:

在终端中执行以下命令来启动本地开发服务器：

npm install       # 安装依赖（首次使用时）
npm run serve     # 开发模式下启动服务

3. 项目的配置文件介绍

配置位于 docs/.vuepress/config.js 文件内，示例如下：

module.exports = {
  title: '您的博客标题',
  description: '这里是描述内容',
  base: '/', // 应用的基础路径
  
  themeConfig: {
    nav: [ /* 导航栏配置 */ ],
    sidebar: 'auto', // 或自定义侧边栏配置
    search: true, // 是否启用搜索
    lastUpdated: '最后更新时间', // 显示最后更新时间
    // 更多配置项...
  },
  
  plugins: [
    ['@vuepress/search', {}], // 确保启用了搜索插件
    // 可能还有其他插件配置
  ],

  // 其它自定义配置
};

• title 和 description: 分别定义站点的标题和描述。
• themeConfig: 包括导航栏(nav)、侧边栏(sidebar)、是否启用搜索等功能的配置。
• plugins: 配置使用的VuePress插件，如Disqus评论、RSS生成等。

完成这些基本步骤后，您就可以拥有一个具备Medium风格的个人博客了。记得根据实际需求调整配置和样式，打造个性化的空间。

mediumish-vuepress-blog-themeVuePress Medimish Theme - Free Theme for VuePress Blog项目地址:https://gitcode.com/gh_mirrors/me/mediumish-vuepress-blog-theme