用 Typora 做了本电子书

2019-08-05 00:00:00 #折腾

网上有组系列文章想做成电子书，搜索 markdown 导出 epub，找到了 Typora 和 Pandoc，后者是纯命令行制作电子书，其实 Typora 的导出 epub 功能也是基于它的。制作流程非常简单，一篇篇文章打开直接复制标题、复制内容，TY直接识别成了 md 格式。点击文件–导出–epub，没安装会提示安装 pandoc，完成搞定。

第一次导出发现许久没完成，原来是文章里的图片无法顺利访问，得，看来这个插件不走秘密通道，此处我傻傻的一张张图片手动下载，其实可以利用这个功能：

网页上图片右键 复制图片 回编辑器直接 Ctrl+V 粘贴，乖乖，图片自动下载！

阅读全文 →

Canvas 手写输入法

2019-08-01 00:00:00 #折腾

xuebihua-cn 在整合完“写笔画”网站后，考虑到大屏上输入文字不太方便，搜索一圈发现以下代码：web版手写输入法，利用了 QQ输入法的手写 handwritingapi.js 接口，不过文中添加的仅是鼠标事件，移动端的触摸事件不支持。折腾到凌晨实在搞不定，求助了 @牧风后依然卡壳，之后发现QQ输入法的鼠标定位值和 Canvas 直接触摸定位值不同

阅读全文 →

“学笔画”折腾小记

2019-07-29 00:00:00 #折腾

点击体验→ https://xuebihua.cn

xuebihua_qr

刷着阮一峰的 weekly 看到了 Hanzi Writer ¹ 这个项目，发现笔顺的动画比较自然，还能在 svg 上手写练习，最重要的是看看 demo 好像上手比较简单，实际也如此。

功能代码非常好使，基本折腾在界面和陌生的代码上，比如想让 svg 自适应，搜索测试一晚发现还是以下代码好使：

阅读全文 →

Valine 评论框美化及功能优化

2019-07-15 00:00:00 #折腾

以下修改不涉及 Valine 源码的改动，防止后续官方更新还得再来一边。因此，相关 css、js 代码得放在调取 valine.min.js 之后。

评论框美化：

.v .vwrap{padding: 0 0 44px;}.v .veditor{min-height:7rem;resize:none;}.v .vwrap .vedit{padding-top:0}.v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #f7f7f7;}.v .vinput{padding:10px 15px;}.v .vwrap .vheader .vinput{border-bottom:0px}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}.v .vwrap .vcontrol{    position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}.v .vwrap .vcontrol .col.col-80{width: 100%;}.v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#1abc9c;}.v .vwrap .vedit .vctrl span.vpreview-btn,.v .vwrap .vcontrol .col.col-20,.v .vlist .vcard .vhead .vsys{display:none;}
@media screen and (max-width: 520px){
	.v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}
}

阅读全文 →

Telegram 使用小记

2018-08-01 00:00:00 #折腾

user

@linmumu： https://t.me/linmumu

Group

Bitcron 中文圈： https://t.me/bitcron

阅读全文 →

自动识别外链并添加图标

2017-12-27 00:00:00 #折腾

效果测试：

推特微信微博脸书谷歌 Github 豆瓣 V2EX 知乎维基百科简书优酷 YouTube

功能代码来自： @罗磊

阅读全文 →

为八口打 Call ！！！

2017-12-21 00:00:00 #折腾

一个字：服！

01「你好呀」

shuiba-01

[预览] [介绍]

02「庸」

shuiba-02

[预览] [介绍]

阅读全文 →

决战24点（HTML5）开发小记

2017-07-26 00:00:00 #折腾

点击体验：https://pk24go.cn

本就开发了一个玩儿24点游戏的微信公众号“决战24点”（pk24go），可以回复综合算式进行解答。说实话，还是挺不方面的。前段时间看到 4数网在线 HTML5 玩法，立马着手改造！

改造点

1、界面UI：以方格为基本图形，4个数字在4个角落，4个运算符号在中间，完成数、撤销返回、提示等按钮在空白小方格中。 2、功能减法：去除时间限制模式、积分、结束按钮。 3、功能加法：新增【题库选择】可选择数字范围1~10或1~13，新增【待解模式】针对性强化玩家提示过的题组。

阅读全文 →

识别外链并新窗口打开

2017-07-25 00:00:00 #折腾

注：已对类似 toc 里的链接进行排除。

markdown 语法链接不支持设置 target='_blank' ，如果要就直接写 html 的链接代码。个人来说，非常反习惯！

既然 Bitcron 加载了 jQuery ，那就重操旧业来个自动识别内外链！代码如下：

	script
		$(document).ready (function() {
			var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
			var location_href = window.location.href.replace(parse_url,'$3')
			$('.post-content a:not(:has(img)),.author-name a').hover(function() {
				var this_href = $(this).attr('href');
				var replace_href = this_href.replace(parse_url,'$3');
                if ( this_href != replace_href && location_href != replace_href)
					$(this).attr('target','_blank'); 
			});
		});

一般放 post.jade里，直接放 base.jade 也行。其中 .post-content 和 .author-name 有可能需要匹配自己的主题模板。

短短代码测试了个把小时，主要耗在“a标签里无img”和“本地和点击的href的正则”，哎，果真代码欺负老新人！

阅读全文 →

Bitcron 主题常用的代码片段

2017-07-23 00:00:00 #折腾

全站 Site

标题：site.title，示例：

a(href="/")= site.title

副标题：site.sub_title，示例：

if site.sub_title
	h2.site-description= site.sub_title]

关键词：site.keywords 描述：site.description

站点头像：site.avatar 背景：site.background_image，示例：

header#header(style="background-image:url({{site.background_image}})")

当下年份：site.now.year

阅读全文 →