Giter VIP home page Giter VIP logo

zihengcat / bilibili-zhuanlan-markdown-tool Goto Github PK

View Code? Open in Web Editor NEW
101.0 1.0 9.0 2.54 MB

一款使用 Markdown 撰写哔哩哔哩(bilibili.com)专栏文章的辅助工具。

Home Page: https://zihengcat.github.io/bilibili-zhuanlan-markdown-tool/

License: MIT License

JavaScript 0.49% HTML 12.62% Dockerfile 3.45% Shell 2.40% TypeScript 81.04%
bilibili markdown nodejs javascript typescript

bilibili-zhuanlan-markdown-tool's Introduction

Bilibili zhuanlan Markdown-Tool

NPM Build Status Build status

bilixmd

一款使用Markdown撰写哔哩哔哩(bilibili.com)专栏文章的辅助工具。

Usage(使用说明)

  1. 本机安装Node.js环境。

  2. 获取项目源码,npm install安装项目依赖。

  3. 取得用户认证cookies,写入配置文件。

  4. 使用Markdown写作。

  5. 使用「前端窗口」或「命令行接口」提交Markdown文章。

Work Flow(工作流程)

B站专栏文章使用HTML对专栏文章进行存储与展示,无论是使用B站富文本编辑器还是Markdown文本标记语言,最终都会转换为HTML上传至B站服务器保存,并在用户需要查看时调取展示。

此工具完成的事情,便是将Markdown转换为Bilibili Compatible HTML,自动上传至B站服务器。

work_flow

图:工作流示意图

Example(实例讲解)

下面通过一个实例,详细讲解如何使用此工具。

Step 1 - 安装环境与获取源码

工具使用TypeScript写成,使用需先在本机上安装Node.js运行环境。

Node.js官网:https://nodejs.org/

获取 GitHub 项目工程源码,可以使用git clone,也可以直接下载zip压缩包。

对于Node.js项目,我们一般使用npm install安装项目依赖。如果国内网络不畅,可以指定使用淘宝 NPM 镜像。

npm --registry 'https://registry.npm.taobao.org/' install ...

代码清单:单次 NPM 命令使用镜像

# 检测本机运行环境
$ node --version && npm --version

# 获取源代码包
$ git clone 'https://github.com/zihengCat/bilibili-zhuanlan-markdown-tool.git'

# 切换到工程目录
$ cd 'bilibili-zhuanlan-markdown-tool'

# NPM 安装依赖
$ npm install 
...

注:操作流程

Step 2 - 获取关键参数写配置文件

这是至关重要的一步,我们需要手动取得认证cookies并写入配置文件。cookies保存了「用户认证信息」,工具依赖认证参数与B站服务器正常通信。

B 站 AJAX 快速登录页:https://passport.bilibili.com/ajax/miniLogin/minilogin

可以使用「Chrome 开发者工具」获取cookies,具体步骤如下:

  1. 前往「B站AJAX快速登录页」
  2. 打开Chrome开发者工具 >> 网络侦测器
  3. 填写B站「登录信息」与「验证码」
  4. 从「跨域跳转响应页」中取得cookie参数

step2_1

图:获取cookies参数

将取得的cookies认证参数写入config/config.json配置文件中,如图所示(具体格式参看:配置选项)。

step2_2

图:写入cookies参数

Step 3 - Markdown 写作

至此,所有准备工作均已完成,我们可以告别B站专栏富文本编辑器,转而使用Markdown撰写文章了。拿起你最钟爱的一支Markdown编辑器,愉快地写文章吧。

step3

图:撰写Markdown文章

Step 4 - 提交文章

文章写完,我们将这篇Markdown格式的文章变身成为B站专栏文章。

工具目前提供两种提交接口: 「前端窗口提交」与「命令行提交」

提交成功后,我们可以回到B站专栏文章草稿箱查看。Markdown格式文章已被提交到「B站专栏文章草稿箱」中,排版、样式准确,专栏文章标题默认为Markdown文件名。

前端窗口提交

我们运行命令来启动工具前端窗口,键入Markdown文件「绝对路径」,点击提交按钮。如果页面反馈成功,则说明提交成功。

$ npm run server
...

代码清单:启动工具前端窗口(默认端口:2233)

step4_1

图:工具前端页面

step4_2

图:提交成功反馈页面

命令行提交

命令行(CLI)提交更加简洁明了,还可以配合脚本实现批量化。

# 绝对路径 or 相对路径均可
$ npm run cli <path/to/your/markdown/file.md>

代码清单:使用命令行(CLI)工具

发布前准备工作

预览文章、添加头图、选择分类、撰写专栏推荐语,这些都是文章发布前的准备工作,手动完成后即可提请发布文章,当然,B站要审核专栏文章。

目前,B站专栏还不支持修改发布后的专栏文章。

已支持,修改次数有限。

step4_3

图:Markdown转换专栏文章「网页端预览」

Attentions(注意事项)

有一些「注意事项」务必要了解。

不支持的 Markdown 语法

目前,B站专栏所能提供的功能选项还非常有限,Markdown基本语法标准都无法完全支持,对于下列Markdown语法项(有些也是常用选项),B站专栏目前还无法提供支持,而对于扩展Markdown功能,更是不支持。

  • 六级标题「可用」
  • 斜体文本
  • 外部超链接「可用」
  • 外链图片「可用」
  • 行内代码「可用」
  • 代码块「可用」
  • 表格
  • 内联HTML
# 六级标题
#
##
###
####
#####
######

# 斜体文本
*text* _text_

# 外部超链接
[alt](http://xxx.xxx.xx)

# 外链图片
![alt](http://xxx.xxx.xx)

# 行内代码
`code`

# 代码块
```code blocks```

# 表格
|---|---|

# 内联HTML
<div>
</div>

注:标注为「可用」的语法项B站专栏后端支持,只是目前暂未开放

如果你考虑将Markdown文章发布到B站专栏上,请谨慎使用上述语法格式,并考虑替代方案(如:使用图片替换表格)。

专有功能

另外,B站也针对自家的专栏文章平台添加了一些平台专有功能,这些选项大多富有B站特色。

  • 字号
  • 对齐
  • 颜色
  • 图片分割线
  • 站内选项卡

这些选项大多没有合适的Markdown语法与之对应,只能通过内联HTML实现。

分析B站专栏文章页面结构,这些专有功能大多是通过class 样式 + 行内 css 样式实现,并不具备可移植性,不符合结构与样式分离原则。

此工具并不对这些专有功能提供支持。

当然,如果想为你的文章添加上B站专有功能,可以在使用此工具提交Markdown文章后,再回到B站专栏富文本编辑器中手动修改添加。

Configurations(配置选项)

此工具 JSON 配置文件非常简单,取得个人用户的cookies信息填入即可,就像这样:

{
  "cookies": ""
}

注:配置文件结构

更加详细的说明,以下cookies必需,有效期大约半月(过期重取)。

cookies -> "sid"
           "DedeUserID"
           "DedeUserID__ckMd5"
           "bili_jct"
           "SESSDATA"

注:配置文件详情

配置项 解释说明 数据类型 默认值
cookies 用户认证 Cookies 信息 string 必填
web.port 前端服务端口号 number 2233

表:配置项说明表

Development(开发相关)

集成该工具开发,先使用npm install安装依赖,再导入bilibili-markdown-tool模块。

$ npm install bilibili-markdown-tool --save-dev

代码清单:npm安装开发模块

APIs 说明
startProcess(markdownPath: string, userConfig: object): void 上传Markdown文件至B站专栏草稿箱,接受Markdown文件路径与用户自定义配置选项。

表:模块APIs接口表

Dependences(依赖相关)

Notes: A markdown parser and compiler. Built for speed.

marked

License(许可协议)

MIT

bilibili-zhuanlan-markdown-tool's People

Contributors

zihengcat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

bilibili-zhuanlan-markdown-tool's Issues

这个报错是什么意思啊

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (C:\Users\95851\Downloads\bilibili-zhuanlan-markdown-tool-master\bilibili-zhuanlan-markdown-tool-master\dist\BiliColumnMarkdown.js:154:47)
    at IncomingMessage.emit (node:events:526:35)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)`

我保证我config没写错😭

latex in markdown

markdown 中的latex表示的数学符号公式有办法渲染吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.