分类 程序园 下的文章

为博客添加返回顶部按钮

由于主题没有自带的返回顶部按钮,所以我一直在寻找一种解决方案。之前使用的是wordpress插件提供的返回顶部按钮,后来在网上乱逛,发现有Xnces – 衔铁部落的返回顶部按钮非常的酷炫,正是我要寻找的。于是,我在那个博客下留言询问制作方法。
前几天,看到那个博客上出现了一篇文章-本博客的返回顶部效果
按照上面的方法,折腾一会儿,我也制作出来了,特地记录一下。

  1. 首先,先加载一下环境。在后台functions.php中找到ms_scripts()函数,添加wp_enqueue_script( 'jquery' );调用wordpress默认的JQuery文件。

  2. 我将这个效果有关的js代码放在了主题目录下新建的themes.js文件中。所以在上面的函数中添加下面两句话导入这个文件wp_register_script( 'themes_js', THEMEPATH . '/themes.js',array());wp_enqueue_script( 'themes_js' );

  3. CSS代码我直接加在了主题style.css中。

  4. 重新打开网站就能看到效果了。

themes.js文件中代码如下

  1. var bigfa_scroll = {
  2. drawCircle: function(id, percentage, color) {
  3. var width = jQuery(id).width();
  4. var height = jQuery(id).height();
  5. var radius = parseInt(width / 2.20);
  6. var position = width;
  7. var positionBy2 = position / 2;
  8. var bg = jQuery(id)[0];
  9. id = id.split("#");
  10. var ctx = bg.getContext("2d");
  11. var imd = null;
  12. var circ = Math.PI * 2;
  13. var quart = Math.PI / 2;
  14. ctx.clearRect(0, 0, width, height);
  15. ctx.beginPath();
  16. ctx.strokeStyle = color;
  17. ctx.lineCap = "square";
  18. ctx.closePath();
  19. ctx.fill();
  20. ctx.lineWidth = 3;
  21. imd = ctx.getImageData(0, 0, position, position);
  22. var draw = function(current, ctxPass) {
  23. ctxPass.putImageData(imd, 0, 0);
  24. ctxPass.beginPath();
  25. ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
  26. ctxPass.stroke();
  27. }
  28. draw(percentage / 100, ctx);
  29. },
  30. backToTop: function($this) {
  31. $this.click(function() {
  32. jQuery("body,html").animate({
  33. scrollTop: 0
  34. },
  35. 800);
  36. return false;
  37. });
  38. },
  39. scrollHook: function($this, color) {
  40. color = color ? color: "#000000";
  41. $this.scroll(function() {
  42. var docHeight = (jQuery(document).height() - jQuery(window).height()),
  43. $windowObj = $this,
  44. $per = jQuery(".per"),
  45. percentage = 0;
  46. defaultScroll = $windowObj.scrollTop();
  47. percentage = parseInt((defaultScroll / docHeight) * 100);
  48. var backToTop = jQuery("#backtoTop");
  49. if (backToTop.length > 0) {
  50. if ($windowObj.scrollTop() > 200) {
  51. backToTop.addClass("button--show");
  52. } else {
  53. backToTop.removeClass("button--show");
  54. }
  55. $per.attr("data-percent", percentage);
  56. bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
  57. }
  58. });
  59. }
  60. }
  61. jQuery(document).ready(function() {
  62. jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
  63. var T = bigfa_scroll;
  64. T.backToTop(jQuery("#backtoTop"));
  65. T.scrollHook(jQuery(window), "#555555");
  66. });

CSS文件要添加的代码

  1. #backtoTop{
  2. background-color:#eee;
  3. border-radius:100%;
  4. bottom:10%;height:48px;
  5. position:fixed;
  6. right:-100px;
  7. width:48px;
  8. transition:0.5s;
  9. -webkit-transition:0.5s
  10. }
  11. #backtoTop.button--show{
  12. right:10px
  13. }
  14. .per{
  15. font-size:16px;
  16. height:48px;
  17. line-height:48px;
  18. position:absolute;
  19. text-align:center;
  20. top:0;
  21. width:48px;
  22. color:#555;
  23. cursor:pointer
  24. }
  25. .per:before{
  26. content:attr(data-percent)
  27. }
  28. .per:hover:before{
  29. content:"↑";font-size:20px
  30. }

2016年北京区域赛

今年,一队发挥出色,拿到全部赛区的名额,而且大三也没有多少队伍。所以我们这种弱队还有机会去参加第二场比赛。

作为第三次去北大,流程都是非常熟悉的。周四下午坐Z10出发,第二天上午到达北京。周五下午我一个人去了前两次来北京都没有机会参观的故宫。

故宫之旅并不是很好,主要是游客太多,紫禁城失去了往日的威严。不过,另外加收门票的钟表馆很棒,皇室的藏品居然如此花哨。有些钟表的滴答声一百多年之后依旧飘荡在场馆之内。出了故宫之后,走了半个小时才找到一个地铁站,这个设计非常的愚蠢吧,之后就动身前往北大。

周六下午热身赛,我们出来的比较早,在体育馆的看台上做了一会儿,看着下面排列整齐的两百多台电脑,心中生出一丝感动。之后就是进入场馆搞事情,电脑是五位数的戴尔移动工作站,外接了鼠标、键盘、和显示器。和我自己在寝室里面干的差不多。海巨表示显示器大看着爽,不过也发现键盘上有日文符号,这就比较影响我的发挥了。然后是例行看一下 周围的队伍,前面是北师、后面是北航、右上方有杭电一队,感觉压力又好大,虽然他们根本不会在乎我们。

比赛开始之前,队友想起在大连时,我讲了一句热身赛只要看一下AC是什么颜色就好了,最后被我成功奶死,全部是WA,所以告诫我不要乱说话。拿到题目之后,我们看了一下,发现题目是前几年北大出的区域赛和网络赛的。其中B题还是我们前几周训练过的题目,我拿起键盘表示这次终于有机会拿个一血了,马上写了起来,队友还是表示不相信。当我写完提交后,邪恶战胜了正义,果真发挥了一个WA,此时其他有一个队伍拿到这题的一血,彻底骨折。所幸改了一下还是过了,之后C题也是原来写过的,上去写了一下就过了。之后就讨论了一会儿A题,不过没有得出什么答案,感觉暴力上去肯定会超时,D题也不会写,最后上去让海巨测了一下机器和各种返回就去吃饭了。晚上回去才发现A题比我们想的还要暴力,没有勇气啊。

由于我们知道不会来北大吃太多餐,所以晚饭比较丰盛。一遍吃一遍感叹北大的伙食真好,早知道原来好好读书了。回到宾馆后,海巨在找题目写,翔哥想着阴阳师靠他的符偷渡欧洲,我看着炉石直播学习技术。又是一天。

周日,因为经费紧张,住的宾馆离北大比较远,我们三个7点就出发了,8点半左右到达北大赛场,然后等待比赛的开始。

9点比赛正式开始,开场顺利的写完了两道签到题,然后我们看了一下一道搜索题,我感觉可以写了,另外两个人去看了一下I题。我写差不多后,海巨上来写了I,也很快的写完并提交了,不过返回了WA。换我上去继续写搜索题,很快我写的超时了,只好改的优雅一点,翔哥也指出海巨理解错了题目,他们两想了一下决定帮我一起改搜索题,小改了一些东西之后,又提交了两次,返回两个WA。当时我们很紧张了,不过没有办法,海巨在看代码,我在写最暴力的准备对拍,翔哥在那里构造数据。最后,翔哥构造出了一组强力的数据,成功把我的代码hack了,我发现改掉一点就会对,不过没有想明白怎么回事,就改了一下记录答案的方式,最后自信的提交返回AC。然后我们将目光聚集到了K题,这个破题,题目就看了好久才明白,不过数据范围居然有10的100次方,我们搞了好久才都没有想出来,我感叹了已经上次在大连也是死在这种恶心的题目上,还是要想,我们写了一个10的9次以内的暴力程序打表,神奇的发现最大符合要求的个数只有样例给的83个,然后他们开始推规律,我在那里划水。想着写不出来,只要让海巨上去写一个只要83个答案表的程序,赌一发梦想。虽然感觉北大不会蠢到把最后一个答案告诉你,海巨还是写了,不过交上去还是WA。之后就陷入了江局,封榜后一会儿,我算了一下发现15位数随便填的情况下1就有10的16次左右个了,果断抢来电脑,不知道是什么力量让我点开海巨WA的代码,我看了一下差点吐血,找一个最大不超过n的值被写成立找一个最小超过n的值,我问了一下海巨,他还不知道,我直接改了一下就交上去,再赌一个梦想,然后就AC。我们马上点开排名,不过只能现实封板前的排名103,这题交了应该会前进一些,但是北大只有93个奖牌。海巨表示把I题写了才能稳,我看了一下I题,果断表明我不会数学题,只能靠你们了。然后实力分析一波之后,感觉要ntt操作,找了一下发现没有带这个模版,只好告诉海巨要么你想个其他的方法,要么自己创造一个ntt算法。我也没有找到其他组说的图论题是哪一个,只好提前选择死亡,吃起了发的午餐,果真像赛前说的一样吃东西就等于放弃了,最后还有10分钟结束的时候,我们三个人都愉快的吃起了午餐,把自己的命运交给其他小笨蛋来掌握。边吃边感叹这是第一次在正赛封榜后过题以及终于不是什么题数靠前的队伍了。

比赛结束之后,不知道结果怎么样,我们只好在那里等待,这要是在之前可以直接会师火车站了。北大搞了一堆事情,才开始滚榜,判完我们题目的时候好像跳到了81名去了,他们两个开始统计超过我们的人,又过了一会儿,发现最后名次固定在了85名,然后三个人都好高兴。滚完铜牌区之后,开始颁奖,我也有幸登上北大的领奖台。之后,那些也和我们没有什么关系了,反正两年多的努力有了回报就可以。

从北大出来,直奔麦当劳买了一下晚餐就去火车站了。我特地点了一杯拿铁,稳如拿铁。还是要相信科学。

我的Wordress站点记录

昨天在图书馆复习,太无聊了,所以想把hexo博客放到自己的服务器上.
不过不知道为什么按照网上那些教材,死活不成功.
最后决定,在服务器上直接搭建一个wordpress博客,主题选了跟原来一样的.
但是wordpress版本已经没有人维护了,功能也比较弱.

折腾日志

2017年1月4日:由于之前一直使用Markdown,网上搜了一下,装了一个插件,又可以写了.
2017年1月4日:添加CNZZ访问统计,同时页脚会显示当前访问人数,虽然没有什么用.
2017年1月4日:文章页面添加分类名

相关代码

<?php the_category(', ') ?> //添加当前文章分类名和链接
<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?> //统计文章总数

参考

ubuntu 14.04服务器上使用nginx搭建wordpress博客详解
WordPress Markdown插件推荐 – WP Markdown Editor
WordPress 博客文章时间格式the_time()设置
the_tags用法
利用七牛云存储CDN服务给WordPress静态文件加速

SwitchyOmege自动切换功能

SwitchOmege提供了非常方便的自动切换功能,可以实现gfwlist中的网站走ss,国内网站直接连接。

主要是将规则列表网址改成 :

https://raw.githubusercontent.com/gfwlist/gfwlist/master/gfwlist.txt

然后选择规则列表规则中的情景模式为ss的,默认情景模式改为直接连接。另为其他一些网站也可以手动修改模式来调整。

下面是最终参考配置表

  • 最终放弃这个方案,有些论坛的图库也是被屏蔽的。如果只是简单的自动切换,会导致很多图片加载失败。

我的博客搭建过程

前几天自己在电脑上装Linux时,不小心把博客的数据文件夹给删了。无奈重新安装,同时写下这篇备忘录以防万一。当然,经历这个失误,看来也要利用网盘对博客的一些文件进行备份。

安装git和Node.js

就是正常的在他们官网上下载最新版本,然后再点几下鼠标安装到你的电脑。不过,也许后面安装hexo时要设置node.js的环境变量,具体过程也可以百度到。

安装hexo

打开gitbash(可能需要以管理员身份运行),利用npm命令安装。

$ npm install -g hexo

安装成功后大概会在shell中出现下面这样的信息

部署hexo

比如我要安装在E盘hexo文件夹内,可以在gitbash中使用下面命令进行。如果你想明白这些命令是什么意思,可以百度cmd指令。(如无特殊说明,下面有的命令都在/E/hexo中使用gitbash完成)

$ cd /E/hexo
$ npm install hexo init

安装成功后大概会在shell中出现下面这样的信息

安装依赖包

基础功能包,采用下面的命令安装

$ npm install

deploy git功能相关插件,网上发布时用的……

 $ npm install hexo-deployer-git --save

附加功能有sitemap和feed插件,如果你不懂这些也没有必要安装

$ npm install hexo-generator-sitemap
$ npm install hexo-generator-feed

第一次本地查看博客

执行以下命令,然后到浏览器输入localhost:4000查看。

$ hexo g
$ hexo s

默认大概是下面的样子

github相关部署和ssh设置

我的这些功能还可以用,所以没有重新设置。故不能详细论述,你可从下面参考链接中获得方法。

发布功能部署

编辑站点的_config.yml文件。你在部署时,要把下面的xiang578都换成你的账号名。

  deploy: 
  type: git
  repository: https://github.com/xiang578/xiang578.github.io.git
  branch: master

执行下列指令即可完成部署,中间需要输入github用户名和密码。

hexo generate hexo deploy

安装主题(以NexT为例)

使用gitbash输入下面指令

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为next。运行hexo ghexo s,并访问 http://localhost:4000,确保站点正确运行。

主题优化

参考相关主题的说明文档进行优化,或者访问使用相同主题的博客,查看博主相关文章。或者速成css和html自己改造。

next主题404页面改造

E:\hexo\public中创建404.html文件,复制下面代码,并保存,在配置文件中启用相关功能。

<!DOCTYPE HTML>
<html>
<head>
    <title>404 - arao'blog</title>
    <meta name="description" content="404错误,页面不存在!">
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
</head>
<body>
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script>
</body>
</html>

效果如下:

多说评论改造

参考 动动手指,给你的Hexo站点添加最近访客(多说篇)

效果如下:

域名绑定

域名可以在万网上购买,大体上流程和淘宝购物差不多。现在大部分域名第一年价格比较便宜,续费也可以接受。当然如果你非要买.集团这种上万的域名,那么请联系我,土豪做个朋友吧!域名是有兴趣可以选择购买,采用默认的github.io也不错。

首先在E:hexo\public文件夹下创建名为CNAME文件(不要扩展名)接着输入你的域名。比如:

xiang578.top
www.xiang578.top

接着在万网的域名控制台增加如下图所示的两个解析

为next主题添加分类

参考知乎hexo下新建页面下如何放多个文章?
大概这样就完成一个博客的安装和部署,接下来你就可以快乐的写博客。

参考文章:

System.out.println(“hello world!”);

除去前几篇为了测试hexo博客的各项功能所发的博文,这是为新博客所写的第一篇文章。标题取自刚开始学习编程语言时输出的字符串,”hello world!” 。

之前,在QQ空间、博客园、csdn上都开过博客,但是结果都不尽如人意。毕竟免费用人家的东西,也不能奢求什么都朝着自己的意愿改变,情怀本身就敌不过他们的kpi。除此之外,也可以自己购买服务器和域名架设博客。可受限于现阶段经济实力,上面的方法也无法实现。所幸github+hexo架设博客的方式,给了我创造一片自由空间的机会。

另外,学习编程之后,觉得可编程的才有安全感。就好像越来越排斥word格式的难控,转向markdown书写的轻盈。hexo是一种实现静态网页的方式,不过自己目前没有专门学习过网页编程,所以大体上采用人家的现成解决方案,再通过网上的文章对站点进行一些小的改造。

开通这个博客的目的在于发一些自己写的文章,以此记录自己的大学生活、学习过程。

于杭州。