npm 包 bisheng 使用教程

什么是 bisheng

bisheng 是一个基于 React、Webpack 和 Node.js 的静态站点生成器。可用于构建具有良好可读性和可维护性的静态博客、文档和演示文稿站点。

bisheng 的特点:

  • 组件式编写 Markdown 文档
  • 支持 React 组件嵌套
  • 支持主题切换

安装

使用 npm 进行安装:

--- ------- ------- ----------

快速开始

通过 bisheng init 命令初始化一个 bisheng 项目:

-- ------------
------- ----

初始化完毕后,在 your-project 目录下会生成以下文件和目录:

-
--- ---------
--- -----------------
--- -----------
--- ------------
--- ------------
--- ---------------------------------
--- -----------------
--- ------
-   --- ----- --------
--- -----
-   --- -----------------
-       --- ----------
-       --- ---------
-       --- ------
--- ------
    --- ---
    --- ---------

_posts 目录下的 .md 文件为文章源文件,source 目录中存放着文章的静态资产。

项目初始化完成后,运行以下命令可以开启一个本地服务器:

--- --- -----

启动成功后,可以在浏览器中访问 http://localhost:8000/ 查看效果。

使用 bisheng 编写文章

bisheng 使用语法高亮的 Markdown 来编写文章。示例文章:

---
------ ----- -----
---

-- ----- -----

-------

文章的头部使用 YAML 语法标识,其中 title 表示文章标题。文章的主体部分使用 Markdown 写法,非常方便清晰。

编写 React 组件

使用 support React 编写组件:

---
------ ----- ------
---

-- ----- -----

------
  ---
    - ---- -- -------- --- ----- ------------
  ----
  -------- ------------
-------

其中,用 <code> 标签来包裹 React 组件。

切换主题

bisheng 支持用户自定义主题,使用者可根据自己的喜好选择不同的主题。

切换主题只需替换 theme 目录下的主题文件即可。在 bisheng.config.js 文件中配置主题即可生效。可参考 bisheng-theme-one 来构建自己的主题。

总结

bisheng 是一个非常好用的静态网站生成器,可用于构建自己的个人博客、项目文档以及公司内部资料站点。它具备良好的组件化编程,让开发人员更好地控制和维护内容。同时,它也支持自定义主题,让网站拥有独特的外观。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64156


猜你喜欢

  • NPM 包 bitclock 使用教程

    Bitclock 是一个用于在网页中显示二进制时钟的 NPM 包。它可以帮助开发者在前端实现现代化的二进制时钟效果,让用户体验更加新颖和有趣。 本教程将介绍如何使用 bitclock 在前端项目中快速...

    5 年前
  • NPM 包 current-processes 的使用教程

    在前端开发中,很多时候需要获取当前运行的进程信息,比如 Node.js 进程、浏览器进程等。此时,可以借助 Node.js 的 NPM 包 current-processes 实现该功能。

    5 年前
  • npm 包 spawn-require 使用教程

    在前端开发中,我们经常需要使用到后端的一些功能,比如常见的数据库操作、网络请求等。但是有些情况下,我们无法直接在前端引入后端模块进行使用,这时就需要借助第三方模块来实现。

    5 年前
  • npm 包 bitclock-agent 使用教程

    简介 bitclock-agent 是一个用于 JavaScript 应用程序的性能监控工具。它通过收集运行时的指标来帮助开发人员诊断问题和优化代码。bitclock-agent 可以通过 npm 包...

    5 年前
  • npm 包 laravel-mix-jet 使用教程

    什么是 laravel-mix-jet laravel-mix-jet 是基于 Laravel Mix 封装的一个前端工具库,它提供了一套简单易用的 API,让我们可以快速、方便地构建和打包前端资源文...

    5 年前
  • npm 包 compute-cluster 使用教程

    简介 compute-cluster 是一个 Node.js 模块,它可以让你在主进程的帮助下多进程计算,它有以下特点: 简单易用,只需要两行代码即可启动 支持 Promise,让你方便地控制异步结...

    5 年前
  • npm 包 ykit-beta 使用教程

    随着 Web 前端技术的飞速发展和应用越来越广泛,前端工程化已经成为了现代 Web 应用开发的标配。而作为前端工程化中的重要组成部分,构建工具的选择也越来越多样化,其中 ykit-beta 是一款功能...

    5 年前
  • npm 包 mocha-spec-cov-alt 使用教程

    Mocha-spec-cov-alt 是一个 npm 包,它可以在运行 mocha 测试时,自动生成测试报告并在报告中展示测试覆盖率。在前端开发中,自动化测试和测试覆盖率都是非常重要的一部分,它们可以...

    5 年前
  • npm 包 jsdoctest 使用教程

    简介 jsdoctest 是一款能够在代码注释中嵌入测试用例并自动化执行的 npm 包,适用于前端开发中的单元测试、自动化测试等场景。使用 jsdoctest 不仅能够提高代码的可靠性和可维护性,同时...

    5 年前
  • npm 包 lzma 使用教程

    前言 在前端开发中,我们经常需要压缩大量的数据以减少网络传输的时间和数据的大小。而 lzma 是一种高效压缩算法。本文将介绍如何使用 npm 包 lzma 来进行前端数据的压缩和解压缩。

    5 年前
  • npm 包 applicationinsights-js 使用教程

    applicationinsights-js 是一个由微软提供的 JavaScript 版本的 Application Insights 客户端 SDK,用于在浏览器中跟踪、收集和分析应用程序的数据。

    5 年前
  • npm 包 semantic-ui-less 使用教程

    什么是 semantic-ui-less semantic-ui-less 是一个基于 Less 预处理器的 CSS 框架,提供了大量的 UI 组件和样式模板。它的设计理念是将 UI 构建模块化,用类...

    5 年前
  • npm 包 react-tooltip 使用教程

    React-tooltip 是一个 React 组件库,用于创建带有提示框的交互式组件。它可以用来提高用户体验,并使用户更容易了解页面上的元素。在本文中,我们将详细介绍如何使用 react-toolt...

    5 年前
  • npm 包 gulp-tsb 使用教程

    简介 npm 是一个 Node.js 包管理器,通过 npm 可以方便地下载、安装和管理各种 Node.js 模块和包。而 gulp-tsb 是一个基于 TypeScript 的构建工具 gulp 的...

    5 年前
  • npm 包 gulp-requirejs 的使用教程

    前言 在前端开发过程中,我们经常会使用到 require.js 这个模块加载器,以及 gulp 工具来进行自动化构建。这就需要我们使用 gulp-requirejs 这个 npm 包来进行 Requi...

    5 年前
  • npm 包 monaco-editor-core 使用教程

    monaco-editor-core 是一个基于 Web 的代码编辑器,它是由微软开发的,目前已成为常用的代码编辑器之一。它支持多种编程语言,包括 JavaScript、TypeScript、HTML...

    5 年前
  • npm 包 pxt-monaco-typescript 使用教程

    介绍 在前端开发中,我们经常需要编写 TypeScript 代码。虽然 TypeScript 提供了很好的开发体验和可读性,但是在编写代码时,我们仍然需要使用一些辅助工具来提高效率和准确性,特别是当我...

    5 年前
  • npm 包 ttf2eot 使用教程

    在前端开发中,我们经常需要在网页中使用各种字体。而不同的浏览器支持的字体格式有所不同,为了兼容不同的浏览器,我们需要将字体转换成一些特定的格式。ttf2eot 就是一款将 TTF(TrueType)字...

    5 年前
  • npm 包 buble-loader 使用教程

    随着前端技术的不断发展,打包工具成为了前端开发中必不可少的一部分。Webpack 作为最流行的打包工具之一,有着丰富的插件和 loader 可以使用。而本篇文章要介绍的是其中一个高效的 loader,...

    5 年前
  • npm 包 babili-webpack-plugin 使用教程

    简介:babili-webpack-plugin 是一个 webpack 插件,它使用了比 webpack 自带的 uglifyJS 更先进的算法来压缩和优化 JavaScript 代码。

    5 年前

相关推荐

    暂无文章