分类 造轮子系列 下的文章

[脸红] [亲亲] [吹泡泡]

张大妈 的时候发现了很多文章用到这个魔性的表情,能将作者丰富的情感表达出来。我也想在我的博客拥有这套表情包,便有了此插件。

项目地址:Github

接入说明

你可以下载本项目,引用 JS 和 CSS,通过固定的表情语法来使用表情。

...
<link rel="stylesheet" href="path/src/css/alu.css">
...
<script src="path/src/js/alu.js"></script>
<script>
    // 你可以直接使用
    ALU();
    // 同时也可以传入参数进行配置
    // ALU({
    //     element: document.body,
    //     url: "https://res.smzdm.com/images/emotions/",
    //     addClass: "alu-face",
    //     mapping: {
    //         "高兴": "22.png",
    //         "皱眉": "23.png",
    //         "阴笑": "24.png",
    //         "鄙视": "25.png",
    //         "邪恶": "26.png",
    //         "大囧": "27.png",
    //         "惊喜": "28.png",
    //         "小眼睛": "29.png",
    //         "小怒": "30.png",
    //         "无语": "31.png",
    //         "傻笑": "32.png",
    //         "期待": "33.png",
    //         "得逞": "34.png",
    //         "呲牙": "35.png",
    //         "喜极而泣": "36.png",
    //         "晕死": "37.png",
    //         "脸红": "38.png",
    //         "亲亲": "39.png",
    //         "狂汗": "40.png",
    //         "困": "41.png",
    //         "饥饿": "42.png",
    //         "得意": "43.png",
    //         "抠鼻": "44.png",
    //         "抽烟": "45.png",
    //         "内伤": "46.png",
    //         "口水": "47.png",
    //         "吐": "48.png",
    //         "流鼻涕": "49.png",
    //         "绷带": "50.png",
    //         "吐舌": "51.png",
    //         "口罩": "52.png",
    //         "不说话": "53.png",
    //         "不出所料": "54.png",
    //         "装大款": "55.png",
    //         "尴尬": "56.png",
    //         "喷水": "57.png",
    //         "喷血": "58.png",
    //         "咽气": "59.png",
    //         "哼小曲": "60.png",
    //         "吹泡泡": "61.png",
    //         "愤怒": "62.png",
    //         "冻住": "63.png",
    //         "赞一个": "64.png",
    //         "差评": "65.png",
    //         "中指": "66.png",
    //         "哦耶": "67.png",
    //         "拳头": "68.png",
    //         "手掌": "69.png",
    //         "就是你": "70.png",
    //         "过来": "71.png",
    //         "吃雪糕": "72.png",
    //         "吃香蕉": "73.png",
    //         "ok": "74.png",
    //         "看不见": "75.png",
    //         "无所谓": "76.png",
    //         "欢呼": "77.png",
    //         "偷笑": "78.png",
    //         "无奈": "79.png",
    //         "害羞": "80.png",
    //         "打脸": "81.png",
    //         "想一想": "82.png",
    //         "嘘": "83.png",
    //         "烧香": "84.png",
    //         "抱拳": "85.png",
    //         "鼓掌": "86.png",
    //         "观察": "87.png",
    //         "锁眉": "88.png",
    //         "黑线": "89.png",
    //         "汗": "90.png",
    //         "哭泣": "91.png",
    //         "阴暗": "92.png",
    //         "暗地观察": "93.png",
    //         "潜水": "94.png",
    //         "蜡烛": "95.png",
    //         "投降": "96.png",
    //         "吐血倒地": "97.png",
    //         "便便": "98.png",
    //         "长草": "99.png",
    //         "绿帽子": "100.png",
    //         "注意安全": "101.png",
    //         "被砍": "102.png",
    //         "捶打": "103.png",
    //         "肿包": "104.png",
    //         "坐等": "105.png",
    //         "看热闹": "106.png",
    //         "深思": "107.png",
    //         "被监视": "108.png",
    //     },
    // });
</script>

参数说明

参数必填含义默认值
element需要转换表情的标签容器document.body
url表情链接地址,如果你使用本地地址请配置类似 /path/img/https://res.smzdm.com/images/emotions/
addClass表情添加的样式名用于控制样式alu-face
mapping表情映射关系,一般不需要改动{...}

使用语法

在接入完成后,你可以使用特定的表情语法来使用表情。格式为 [表情名],比如:[高兴 ](末尾加了一个空格防止被转换)。
它将解释为:高兴

表情列表

表情列表

已知问题

  • code 标签内容也会被转换,正在想办法来过滤一些标签,如果你有好的提议请联系我。

遇到困难

  • 如果你在使用中有任何疑问,请点击 Issues 中查看或创建新的问题

主页

主页:https://comments.hk/

文档:https://github.com/isecret/yuncun/blob/master/DOC.md

PS:首页定时 10s 自动更新

关于乐评

人这辈子,最害怕突然把某一首歌听懂了。 ——来自 北风神75 在「有多少爱可以重来」的评论

项目灵感来源于网易云音乐的与农夫山泉合作的乐瓶营销「乐瓶」——这 30 条乐评,是从网易云音乐后台点赞数最高的 8000 条乐评中,经过人工筛选产生的,它们文字简练,富有故事性,即使脱离歌曲本身也可以被理解。

在使用网易云音乐的时候,常常在评论区看到与之共鸣的评论。有时候很想将其记录下来,同朋友分享。时间久了,那种感动依然不可褪去。

你能在这倾听别人的故事,亦或许是你的故事。

我们能提供什么

截止目前,已拉取热歌排行榜 TOP199 的热门评论,共计 2984 条热门评论。

项目后台定期拉取热门歌曲排行榜列表并获取其中的热门评论,通过接口随机分发一条热门评论,你可以查看 API 文档 快速接入。

当然,你也可以通过提交歌曲或歌单 ID 来完善这个项目,将你的感动带给更多的人。

API 文档

JSON 格式

请求地址:https://api.comments.hk/

请求方式:GET

请求参数: 暂无

返回类型:JSON

返回参数:

参数名含义
song_id歌曲 ID
title歌曲名称
images歌曲封面图片,已处理为 https 链接
author歌曲作者
album歌曲所属专辑
description歌曲描述
pub_date歌曲发行时间
comment_id评论 ID
comment_user_id评论所属用户 ID
comment_nickname评论所属用户名称
comment_avatar_url评论所属用户头像链接,已处理为 https 链接
comment_content评论正文
comment_pub_date评论发表日期

示例

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('get', 'https://api.comments.hk/');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var data = JSON.parse(xhr.responseText);
      var hotComments = document.getElementById('hotComments');
      hotComments.innerText = data.comment_content;
    }
  }
  xhr.send();
</script>

更新日志

  • 2019/4/21 更新 JSON 文档第一版

感谢

数据来源

项目歌曲数据、图像和评论数据来源于网易云音乐,网易云音乐对其拥有内容、商标所有权。

一言 for Chrome

Github | Issues

Chrome 新标签页,基于一言 Hitokoto.cn_,简洁的黑白设计,基于 _animate.css 的过渡动画。

功能

  • [x] 点赞
  • [x] 更新
  • [ ] 自动切换
  • [ ] 设置后台
  • [ ] 搜索输入框

依赖

说明

项目下载后解压 Chrome 开启开发者模式并加载解压后的插件即可使用。如果你有更好的意见欢迎提交 issues 或者直接联系我~

有时间(等有钱了)我会打包上架到 Chrome 网上应用。

欢迎加入一言,QQ 群:70029304


一款简约的单页主题,很漂亮吧?

Hola

如何使用?

首先,你需要安装 Hexo 用做博客载体。关于安装步骤请善用搜索引擎。然后我们使用终端工具进入 Hexo 模版目录。

cd /your_hexo_path/theme/

现在,我们需要克隆主题仓库,使用终端工具拉取。

git clone https://github.com/isecret/Hola

稍等片刻,主题将安装在 Hexo 中,安装完成后需要修改 your_hexo_path/_config.yml,找到 theme 参数,将它修改为:

theme: Hola

自定义

站点关键字

修改 your_hexo_path/theme/Hola/config.ymlkeywords 参数。

建站日期

这个参数用于站点底部展示,修改 your_hexo_path/theme/Hola/config.ymlsince 参数。

导航栏

头部导航栏列表,修改 your_hexo_path/theme/Hola/config.ymlmenu 参数。

社交(Todo)

社交地址,修改 your_hexo_path/theme/Hola/config.ymlsocial 参数。

字数统计

在博客站点底部,有一个字数统计,但是你需要安装插件才能启用他。

使用终端工具执行命令:

npm install hexo-wordcount

安装完成后,需要修改 your_hexo_path/theme/Hola/config.yml,找到 footer_wordcount 参数将它修改为 enabled

底部补充

footer_expand 参数主要用于代码补充,当然你也可以直接修改主题源码。

站点微缩图

用于站点缩略图,ico 格式。修改 your_hexo_path/theme/Hola/config.ymlfavicon 参数。

站点 Logo(Todo)

站点Logo。修改 your_hexo_path/theme/Hola/config.ymllogo 参数。

一言 hitokoto

一言随机一句话副标题。修改 your_hexo_path/theme/Hola/config.ymlhitokotoenabled 参数启用。

Gitment

基于 Github 登录的评论系统。修改 your_hexo_path/theme/Hola/config.ymlgitment 参数启用。

腾讯统计

修改 your_hexo_path/theme/Hola/config.ymltencent_analytics 参数为你的 sId

建议

如果你有任何有趣的想法,请留言或 Email 告诉我。

感谢

此文为 造轮子之谷歌镜像站 的衍生。

其实谷歌字体在 2017 年左右就已经解封了,现在解析到的一个北京的 IP 上。对于前端来说,使用谷歌字体再也不用担心加载不出来了。

最早玩博客的时候,谷歌字体是我必屏蔽的(解决不了问题,就解决出问题的代码),到后来我使用过 360 旗下的 http://fonts.useso.com (挂了)也用过 Cat Networks 下的 https://fonts.cat.net,到后来谷歌字体解封,喜大普奔连忙换上 https://fonts.googleapis.com,享受着谷歌给开发者带来的福利。

问题出现在最近,公司的网络防火墙貌似把谷歌字体库给墙了。以上所有字体库全都凉凉(<de;>防火墙:对,不是针对谁,在座的都是辣鸡)。这样带来的问题就是——我特么打开一个带谷歌字体的网页先让我看近半分钟的开场白。我的博客,我刚写的 OpenAPI,无一幸免。

我得做点什么。首先得明白是什么原因,打开终端输入命令 ping fonts.googleapis.com 得到 IP 172.217.24.42(香港,且无法 Ping 通);拔掉网线,连上手机热点终端输入命令 ping fonts.googleapis.com 得到 IP 203.208.50.70(北京,能 Ping 通)。

其实现在问题变得很简单了,公司的网络将谷歌字体库的域名仍解析在国外的服务器上。所以我们只需要将本地的 Hosts 文件手动指向北京的 IP 就好了。Windows 在 C:\Windows\System32\drivers\etc\hosts,Mac / UNIX 在 /etc/hosts 新增一行 203.208.50.70 fonts.googleapis.com 就能解决一半的问题。

然鹅。我就喜欢用复杂的方式来解决简单的问题!脑海中冒出一个有趣的想法——为什么不自己搭建一个谷歌字体镜像呢?

利用 Nginx 进行反向代理,然后用 CDN 做缓存

套路和搭建谷歌镜像站差不多,不过值得注意的是在 fonts.google.com 中得到的 CSS 文件里有 fonts.gstatic.com (北京 IP 为 203.208.51.56,修改 Hosts 文件的话需要新增一行 203.208.51.56 fonts.gstatic.com)的路径,如果 fonts.googleapis.com 被墙了,那么这个肯定也不可幸免。所以需要反向代理两个站点。

搭建这个镜像站也不需要境外服务器,只需要你的服务器能正常访问就行。配置如下:

server
{
    listen 80;
    # listen 443 ssl http2;
    server_name fonts.openapi.link;
  
    # 强制跳转 HTTPS
    #if ($server_port !~ 443){
    #    rewrite ^(/.*)$ https://$host$1 permanent;
    #}
    #HTTP_TO_HTTPS_END
    # HTTPS 证书地址
    # ssl_certificate    /foo/bar.key; 
    # ssl_certificate_key    /foo/bar.pem;
    # ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    # ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    # ssl_prefer_server_ciphers on;
    # ssl_session_cache shared:SSL:10m;
    # ssl_session_timeout 10m;
    # error_page 497  https://$host$request_uri;
    
    # 用于 fonts.googleapis.com 代理
    location /css {
      sub_filter 'fonts.gstatic.com' 'fonts.openapi.link';
      sub_filter_once off;
      sub_filter_types text/css;
      proxy_pass_header Server;
      proxy_set_header Host fonts.googleapis.com;
      proxy_set_header Accept-Encoding '';
      proxy_redirect off;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Scheme $scheme;
      proxy_pass https://fonts.googleapis.com;
      proxy_cache cache_one;
      proxy_cache_key $host$request_uri$is_args$args;
      proxy_cache_valid 200 304 301 302 1h;
      expires 365d;
    }
    # 用于 fonts.gstatic.com 代理
    location / 
    {
      proxy_pass_header Server;
      proxy_set_header Host fonts.gstatic.com;
      proxy_redirect off;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Scheme $scheme;
      proxy_pass https://fonts.gstatic.com;
      proxy_cache cache_one;
      proxy_cache_key $host$request_uri$is_args$args;
      proxy_cache_valid 200 304 301 302 1h;
      expires 365d;
    }
    # 日志
      access_log  /www/wwwlogs/fonts.openapi.link.log;
}

总算折腾完了,配置上 CDN,速度杠杠的。也欢迎使用我的谷歌字体镜像 fonts.openapi.link

嗷~对了!各位看官再等等,我有一个大宝贝给你们介绍一下(掏裤裆)——开放 API:为开发者而生。

后来我想想,我折腾了这么大一圈图什么呢?