最近，在研究语雀开发者文档时，注意到语雀启用了页面划线和对话功能，非常歌棒的体验！
如果想在自己的前端项目中，也引入同样的功能，该怎么做呢？在这里推荐使用开源的 python 项目 https://github.com/hypothesis 。
它有一个后端，用来存储划线标记和对话，也有一个前端，用来托管一个 js 文件。其他项目，只需要引入这个 js 文件，就可以直接拥有这个功能啦！不过，这个前端是需要依赖后端的。
启动后端
后端代码库在 https://github.com/hypothesis/h，要启动它， make dev 就可以了。
排障指引
pg_config 找不到
如果报这样的错：
只需要安装一下 postgresql 就行了，比如： brew install postgresql，然后确保将 pg_config 加到 $PATH 中即可。如果用的是 zsh，就只需要在 ~/.zshrc 里最后一行加上：
python export PATH=/opt/homebrew/bin/pg_config:$PATH
回到 Terminal，source ~/.zshrc之后，再 make dev就可以了。
数据库没有数据的问题
如果通过后面的 docker compose up 方式运行，打开 http://localhost:5000 之后看到由于数据库没有数据而报错，可以在项目的根目录下运行：make db来初始化数据。
elasticsearch 里没有 index 的错误
如果解决了以上错误，刷新页面后仍然报错，说缺少 index，则可以通过 curl -X PUT localhost:9200/hypothesis 来建立 index。
<font style=color:rgb(68, 68, 68);>
<font style=color:rgb(68, 68, 68);>得到 {acknowledged:true,shards_acknowledged:true,index:hypothesis} 响应之后，再刷新页面，就正常显示了。
正常启动后可以打开一个 Dashboard：
部署
如果要将后端部署到服务器上，推荐使用 docker 方式，以下是一个 docker compose 文件：
python services: postgres: image: postgres:11.5-alpine ports:
- 127.0.0.1:5432:5432
healthcheck: test: [CMD, pg_isready, -U, postgres] interval: 1s elasticsearch: image: hypothesis/elasticsearch:latest ports:
- 127.0.0.1:9200:9200
environment:
- discovery.type=single-node
rabbit: image: rabbitmq:3.6-management-alpine ports:
- 127.0.0.1:5672:5672
- 127.0.0.1:15672:15672
redis: image: redis:latest ports:
- 127.0.0.1:6379:6379
web: build: . restart: no ports:
- 5000:5000
environment:
- APP_URL=http://localhost:5000
- AUTHORITY=localhost
- BROKER_URL=amqp://guest:guest@rabbit:5672//
- DATABASE_URL=postgresql://postgres@postgres/postgres
- ELASTICSEARCH_URL=http://elasticsearch:9200
- NEW_RELIC_APP_NAME=h (dev)
- NEW_RELIC_LICENSE_KEY
- SECRET_KEY=notasecret
- MODEL_CREATE_ALL=true
- REDIS_HOST=redis
- ENABLE_NGINX=true
- ENABLE_WEB=true
- ENABLE_WEBSOCKET=false
- ENABLE_WEBSOCKET_MONOLITHIC=false
- ENABLE_WORKER=false
- WEB_NUM_WORKERS=1
启动前端
前端代码库在 https://github.com/hypothesis/client，要启动它，也是在对应的目录下，执行 make dev。启动前端后，可以打开一个文档页面：
这个文档说明了如何在目标站点里嵌入 js。
嵌入 js
比如，以 https://tictactoe.js.org 为例，本地嵌入后，页面就会多出一个侧边栏：
添加 OAuth 客户端
以上跑起来之后，发现并不能真正运行，原因是前端调用后端服务时，会报无权限的错误。因此需要为客户端添加身份认证，这可以通过登录服务器端，添加可信的客户端来完成。
登录后端服务
注意到前面的 Dashboard 里，右上角有一个登录链接，点击使用管理员账号登录。如果还没有管理员账号的话，可以先通过 tox -qe dev -- sh bin/hypothesis --dev user add 来创建一个账号，比如叫 adminUser。再通过 tox -qe dev -- sh bin/hypothesis --dev user admin adminUser 命令行将这个叫做 adminUser 的用户升级为管理员，然后就可以用这个账号登录了。
添加 OAuth 客户端
登录之后可以来到客户端管理页面，进行客户端的添加。
