标签 blog 下的文章

为博客添加返回顶部按钮

由于主题没有自带的返回顶部按钮,所以我一直在寻找一种解决方案。之前使用的是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. }

我的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静态文件加速

我的博客搭建过程

前几天自己在电脑上装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是一种实现静态网页的方式,不过自己目前没有专门学习过网页编程,所以大体上采用人家的现成解决方案,再通过网上的文章对站点进行一些小的改造。

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

于杭州。