10月 27

用JavaScript实现随机提取指定的图片作为网页背景

其实这个功能几个月前都实现了，但是写法有些问题，打算修改下，换个写法。

思路

提取网站下的images里的background文件夹里6张图里的随机取一张图，作为网页背景。
js直接放在了header.php尾部。

用在自己网站的代码

<script>

bg_img= ['<?php $this->options->themeUrl('images/background/1.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/2.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/3.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/4.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/5.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/6.jpg'); ?>'];  //调用图片路径（我网站模板是用的themeUrl函数获取当前模板路径，根据实际情况决定怎么写）

document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";

</script>

不用php也可以这样写

<script>

bg_img = ["http://xxxx/1.jpg", 
          "http://xxx/2.jpg", 
          "http://xxx/3.jpg", 
          "http://xxx/4.jpg", 
          "http://xxx/5.jpg", 
          "http://xxx/6.jpg"]; //调用图片地址/路径（改为自己的）

document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";

</script>

写的时候遇到的问题

开始错用了document.body ，发现这个除了IE，其他浏览器都不认。
改为了document.getElementsByTagName。
开始为了图方便把JS文件放到头部了。导致执行这个js的时候，body还没有出现的情况，一般js要放在html末尾（后）

关于getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

返回值

类型：NodeList 对象，描述：指定标签名的元素集合

浏览器支持

所有主要浏览器都支持 getElementsByTagName() 方法

10月 20

在Typecho下实现支持HTTPS的分享功能

很早之前就想给网站加个分享的功能，但https下有点很头疼，今天终于弄好了。
可以在https下面用。

感谢原作者overtrue

有以下特点：
一个标签完成初始化
自定义启用/禁用分享站点
更美观的UI体验
基于标签data属性轻松实现分享数据的自定义
支持分别对不同站点设置分享内容
同页面个分享组件
支持npm安装

预览

安装

有3种安装方式：
1、使用 npm

npm install social-share.js

2、使用 bower

bower install social-share.js

3、使用 cdnjs，引入 share.min.css 与 social-share.min.js 两个链接。
4、手动下载或者 git clone 本项目。

我选的第四种，直接从github上下载这个项目，然后把dist上传到自己空间。

阅读全文 >>

10月 16

在Typecho文章底部添加打赏功能的实现

步骤

找到当前主题下的 post.php 在适当的位置添加代码

<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;">
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
        <span>打赏</span></button>
    <div id="QR" style="display: none;">
        <div id="wechat" style="display: inline-block">
            <a class="fancybox" rel="group">
                <img id="wechat_qr" src="https://www.wusiqi.cn/WeChatPay.JPG" alt="WeChat Pay"></a>
            <p>微信打赏</p>
        </div>
        <div id="alipay" style="display: inline-block">
            <a class="fancybox" rel="group">
                <img id="alipay_qr" src="https://www.wusiqi.cn/AliPay.JPG" alt="Alipay"></a>
            <p>支付宝打赏</p>
        </div>
    </div>
</div>

添加CSS样式


#QR {
    padding-top:20px;
}

#QR a {
    border:0
}

#QR img {
    width:180px;
    max-width:100%;
    display:inline-block;
    margin:.8em 2em 0 2em
}

#rewardButton {
    border:1px solid #ccc;
    line-height:36px;
    text-align:center;
    height:36px;
    display:block;
    border-radius:4px;
    -webkit-transition-duration:.4s;
    transition-duration:.4s;
    background-color:#fff;
    color:#999;
    margin:0 auto;
    padding:0 25px
}

#rewardButton:hover {
    color:#f77b83;
    border-color:#f77b83;
    outline-style:none
}

06月 30

如何在Typecho1.1版本中直接输出HTML代码

昨天博客更新了Typecho1.1版本，发现之前1.0版本时候正文里嵌套的HTML代码都失效了，直接显示在了文章里面。

众所周知，typecho采用的是Markdown的文章编辑器，使用起来比较方便。

Markdown其他的还行，就是少一个“居中”的功能。而要实现居中则需要用到HTML里的

标签。

但是更新了typecho1.1后，由于更换了Markdown解析器，添加

等HTML标签后，网页会把这些标签当做文字显示出来，而不是执行这些操作。

解决方法

怎样让新版本的Typecho支持嵌入HTML代码呢

可以使用三个感叹号 !!! 将需要直接输出的代码包起来即可。

例子

!!!

<center> 我就是要居中!!!∑(°Д°ノ)ノ </center>


<div style="color:#FFCCCC">
  <h1>547的blog</h1>
  <h2>547的blog</h2>
  <h3>547的blog</h3>
  <p>547的blog</p>
</div>

!!!

上面代码运行效果

我就是要居中!!!∑(°Д°ノ)ノ

547的blog

12月 06

网站更换了SSL证书

偶然发现阿里云上面有免费的SSL证书，还是Symantec的。果断放弃了之前用的RapidSSL~

于是开始申请证书，申请步奏很简单，验证也很简单。

安装证书的时候犯2了，本来装了Vesta面板，还在在shell里面各种手动设置，结果把Nginx弄挂了，然后我怀疑是哪里步奏出了问题啊~~，各种找原因，看Nginx的配置文件啊~~看网站的配置啊~ 耽搁了不少时间。。

阅读全文 >>