npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hexo-disqus-proxy-heroku

v2.0.0

Published

you can use heroku app update server, hexo blog use disqus api get info, In China

Downloads

9

Readme

Hexo 插件,解决 disqus 不能访问的反向代理

NPM

准备

  • heroku
  • hexo project

服务器端

DISQUS_API_SECRECT:

获取api-secret

DISQUS_SHORT_NAME:

是你的website的 shortname 名称 比如在你的disqus安

Deploy

Tips: 在heroku 可以设置 链接 github 项目时,自动部署,新的 git commit 中 开头或 结尾 要是ci才会执行

获取api-secret

在使用本插件之前需要在 Disqus 申请开启 api 权限。访问register new application 就可以注册一个 application.然后在applications可以看到你的 application 列表。其中 Secret Key 就是我们需要的api-secret,并且需要在后台的Settings => Community里开启访客评论

安装

Hexo博客目录执行

npm install hexo-disqus-proxy-heroku --save

前端配置

在你的Hexo博客目录中修改_config.yml文件 添加如下配置:(注意缩进和空格)

disqus_proxy:
  shortname: yobrave
  host: XXXX.herokuapp.com
  admin_avatar: /avatars/admin-avatar.jpg
  default_avatar: /avatars/default-avatar.png

其中:

  • shortname 是你的website的 shortname 名称 比如在你的disqus安装代码中 有这样一句脚本: s.src = 'https://test-eo9kkdlcze.disqus.com/embed.js'; 那么你的disqus 的shortname 就是 test-eo9kkdlcze
  • host是 herokuapp
  • default_avataradmin_avatar分别是默认头像和管理员头像的路径。例如在source目录下建立avatars目录,放入两个头像,在这里设置成绝对路径。如果不设置,则为默认头像。

关键的一步

disqus的官方配置中,我们需要在页面合适位置添加一个 <div id="disqus_thread"></div> 作为占位符, 而hexo-disqus-proxy插件并不能知道在页面的哪个位置插入这个标签比较合适,所以这个需要额外配置一下:

情况一

如果你本身用的主题已经支持disqus的配置,那么灰常爽,你只需要正常启用主题的disqus评论,插件就会自动检测并合适的覆盖, 这是最常见的情况,肯定是最吼的。

情况二

在你写的markdown文件底部插入<div id="disqus_thread"></div>。这样评论框位置会位于文章的下方,并且大小能被外部元素所约束,不会乱跑。 什么,markdown也能插入HTML标签?

嗯是的。

情况三

稍微懂一点点hexo的基本知识,自己改主题。大概的思路是,在Hexo渲染的过程中,把<div id="disqus_thread"></div>加在主题目录下的layout目录中 关于博文页面的模板中的合适的位置就行了。

#Done!!

三个库 heroku,github,npm

历史版本:

npm V2.0.0 前端版本 更新

把 react 变成 preact

去掉 font css

去掉 babel-polyfill , 换

import 'core-js/fn/promise'
import "regenerator-runtime/runtime";

修复一些样式bug