g

丘海东

读书写字 热爱生活 ⌚️📖️🖋️🏀️🚲️🚉️🎼️🍵️🏞️📷️

Back to Top返回頂部按鈕

教程1
教程2

实现返回按钮功能

首先创建source/javascripts/top.js，添加如下代码实现滑动返回顶部效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function goTop(acceleration, time)
{
        acceleration = acceleration || 1;  //加速度
        time = time || 16;  //时间间隔 (毫秒)

        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;

        if (document.documentElement)
        {
                x1 = document.documentElement.scrollLeft || 0;
                y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body)
        {
                x2 = document.body.scrollLeft || 0;
                y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;

        // 滚动条到页面顶部的水平距离
        var x = Math.max(x1, Math.max(x2, x3));
        // 滚动条到页面顶部的垂直距离
        var y = Math.max(y1, Math.max(y2, y3));

        // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
        var speed = 1 + acceleration;
        window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

        // 如果距离不为零, 继续调用迭代本函数
        if(x > 0 || y > 0)
        {
                var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                window.setTimeout(invokeFunction, time);
        }
}

自定义返回按钮格式

创建source/_includes/custom/totop.html，设置返回顶部按钮样式和位置
其中的width、height、right、bottom为图片在网页中的位置，可根据图片大小自行设定，示例代码如下：

1
2
3
4
5
6

<!--返回顶部开始-->
<div id="full" style="width:30px; height:30px; position:fixed; right:13px; bottom:13px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
<a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>
<!--返回顶部结束-->

选择按钮图片

找到自己喜爱的返回按钮图片，命名为top.png后添加到source/images目录中（或修改totop.html中图片的路径），文件名和totop.html中的一致就可以了，可以自己命名。

然后把totop.html 引入到文件中，考虑到进到具体每一篇blog里面也有这个功能，我们把这个文件在foot.html中引入，修改:octopress/source/_includes/custom/footer.html，添加一行：
octopress/source/_includes/custom/footer.html

1

  {\% include custom/totop.html \%}  //记得去除两个\号

bug提醒：如果post文件中有上面这一行代码（没有\号），blog网站首页和这篇博文页，会有返回按钮图片错误

Read on 阅读全文

如果正文太长，不希望在首页直接显示完整内容，可以在适当的位置加上一句<!--more-->，后面的内容就会被按钮Read on→所替代，点击阅读全文。

添加tags，導航欄，側邊欄

参考1

下载

首先到 https://github.com/robbyedwards/octopress-tag-pages 和 https://github.com/robbyedwards/octopress-tag-cloud 下载这两个项目的代码。

octopress-tag-pages

把里面的文件复制到相应位置，之前已有的文件，看代码，把需要的代码加上去，.md文件先不用管

octopress-tag-cloud

1 . 将 octopress-tag-cloud\plugins 路径里面的 tag_cloud.rb 文件复制到 octopress\plugins\ 文件夹里面。

2 . 将下面的代码复制到 octopress\source\_includes\custom\asides\tags.html。（这个文件需要自己新建。） 注意： 去掉 % 前面的反斜杠\。

1
2
3
4
5
6

<section>
  <h1>Tags</h1>
  <ul id="tag-cloud">
    {\% tag_cloud font-size: 120-160%, limit: 20 \%}
  </ul>
</section>

解释：

tag_cloud 的参数中， font-size 指定 tag 的大小范围；limit 限定 20 个 tag 。

3 . 在 octopress\_config.yml 中的 default_asides 中添加 custom/asides/tags.html，注意相应的位置。

1

default_asides: [custom/asides/tags.html, .....]

博文写标签：

1

tags: [tag1, tag2, tag3]

rake generate 出现问题：

Alt text

1

  Liquid Exception: comparison of Array with Array failed in _layouts/page.html

解决

octopress\plugins\tag_cloud.rb 第74行:

1
2
3
4
5
6

if @limit > 0 and @sort != 'rand'
    # sort the tag pairs by frequency in descending order
    weighted.sort! { |a,b| b[1] <=> a[1] }
    # then slice off the top @limit tag pairs
    weighted = weighted[0,@limit]
end

weighted = weighted[0,@limit] 应该是取指定数目的标签。如果标签数量少于 @limit ，会报错。

修改第74行为:

1

  if @limit > 0 and @sort != 'rand' and @limit < weighted.length

修改第95行为:

1

    if @limit > 0 and @limit < weighted.length

rake generate ，不再出现错误

出现另一警告：

Alt text

rake preview ，标签云成功添加:

Alt text

解决 Build Warning: Layout 'nil' requested in tags/标签名/atom.xml does not exist. 警告问题

将 octopress\source\_includes\custom\tag_feed.xml 文件里面 nil 改为 null ：

1
2
3

---
layout: null
---

搞定

加速Octopress2.0，太慢了

原博

清理没用的服务

以下修改均修改_config.yml,以下可以根据自己的需要进行去除。

去除Disqus评论
打开文件找到Disqus Comments，按照下面在每一行前面加#注释掉即可

1
2
3

# Disqus Comments
#disqus_short_name: 
#disqus_show_comment_count: true

去掉Github仓库展示

1
2
3
4
5

# Github repositories
#github_user: 
#github_repo_count: 
#github_show_profile_link: true
#github_skip_forks: true

去除Twitter按钮
去除Google+相关
去除Pinboard服务
去除Delicious评论，去除后可能没有评论系统
去除Facebook Like

替换快速的请求资源

其实，真正解决加速的重要环节可能是这里，因为Octopress很多依赖于Google的库和资源。

解决Google Analytics巨慢的问题

对于使用Google Analytics来说，加在ga.js这个文件简直是要命的慢，这里我使用自己存放在七牛CDN上的js. http://droidyue-tools.qiniudn.com/ga.js 已验证，完全可以正常收集数据。
参考如下，修改source/_includes/google_analytics.html

1
2
3
4
5
6
7
8

 _gaq.push(['_trackPageview']);

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src='http://droidyue-tools.qiniudn.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
   </script>

解决fonts.googleapis.com蜗牛慢

这里我们使用数字公司提供的Google Fonts大陆解决方案，使用fonts.useso.com替换fonts.googleapis.com。
修改文件/source/_includes/custom/head.html

1
2
3

 <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.useso.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.useso.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

解决ajax.googleapis.com慢的问题

修改source/_includes/head.html

1
2
3

<script src="//ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/lib/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>

總結

导致网站慢的原因其实是加载Google的资源，当然我们不能怨Google.经过测试，使用数字公司的解决方法之后，国内国外访问速度都是可以的。这里还是推荐以下数字公司的这个解决方案http://libs.useso.com/

Python2 ubuntu20.04 octopress2.0

有時候報錯，記得把Gemfile.lock文件刪除
Ubuntu20.04自帶3版本的python，不兼容Octopress2.0的依賴。故安裝2版本

1
2

rvm use 2.2.6
sudo apt install python2

男人要有比欲望更高級的興趣愛好，和作為

過年在家期間，每天醒了吃，吃了玩手機電腦，玩累了睡。
24號中午買車票，然後各種收拾，沒睡午覺，晚上12點1點多才睡着。4點半卻醒了，然後一直沒再睡着。6點半從家出發，9點大巴發車，下午2點到燕塘地鐵站，下車。
這個時候已經開始頭痛了。
到了租房，收拾，蒸熱2條古粽吃了。
古粽
然後玩玩手機電腦。也沒有睡覺。
晚上8點半，騎車拿古粽過去給梅。小坐20分鐘就回來。
很累，頭很痛，但是卻睡不着覺，一直到兩三點，頭沒那麼痛了，才睡着。
不到8點卻醒了。之後在床上翻來覆去，也沒能再睡着。
玩手機，刷抖音，看到一句話：

男人要有比欲望更高級的興趣愛好

把自己的生活調整好。好好做人呀。
每個人都有他的優缺點，要懂得，要放下，和自己和解。

被貓抓了一下

前幾天晚上，有一隻貓，據父親說是野貓、流浪貓，都會來我家討食，我們餵了它兩天。
昨晚我想和它玩玩，把手伸到它面前，它抓了我一下，一道1厘米多點的抓痕，過了兩三分鐘，滲出一下血。
我用熱水器的熱水沖洗了幾分鐘，擦洗了傷口。
希望沒事。
雖然愛貓，但因貓的性子，如若不熟悉，還是別逗它。
有風險。

Git 如何 Clone 非 Master 分支的代码

原博：

问题描述

我们每次使用命令

1

git clone git@gitlab.xxx.com:xxxxx.git

默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在daily/1.4.1分支上，我们希望拿到这个分支上的代码。

7f07c8f6deef169ef6be5103bbd3e932f8676bb1.png

解决方法

直接使用命令

1

git branch -r #查看远程分支

或

1

git branch -a #查看所有分支

会显示

1
2
3
4
5
6
7

origin/HEAD -> origin/master
origin/daily/1.2.2
origin/daily/1.3.0
origin/daily/1.4.1
origin/develop
origin/feature/daily-1.0.0
origin/master

然后直接

1

git checkout origin/daily/1.4.1

就好了。。。