分類
网站

Line分享

製作Line分享按鈕請先參考官方文檔用LINE傳送。簡單說是Line分享只能傳一條文本消息和一個url鏈接。http://形式會先跳轉到Line服務器的一個網頁,讓用戶選擇打開Line還是安裝Line。line://形式則直接打開Line進行分享,但是如果用戶沒有安裝Line則按鈕會沒有反應。

使用中發現,Line對Emoji的支持還是很好的,可以放到分享信息中,可以參見Emojiえもじ。同時還發現Line對url的支持有問題,即url中如果出現非英文字符,Line即會將url中剩餘部分丟棄,造成url丟失數據。其實這個解決起來很簡單,用php自帶的base64函數把中文編碼一下再傳遞就好了。只用base64是不行的,因為裡面會有空格等字符會被Line裁掉,所以在加一層urlencode就好了。

//js中定義好Line的分享鏈接,name用base64加密,下面一行php被wordpress保護機制注釋了。
var urlShare="http://www.55mun.com/gameh5/match3/indexv.php?name=<?php echo urlencode(base64_encode($name));?>";
//php中接收並解析出name
$n=htmlspecialchars(base64_decode(urldecode($_GET["name"])));


Line分享網址抓取錯誤

有次分享網址,抓取到的縮略圖和標題都是網站主頁的信息,後來發現是head裏有一條meta信息導致的,這條meta中的url必須是分享的url,否則line就肯定會按照這個meta中的url來抓取:

<meta http-equiv="mobile-agent" content="format=html5;url=http://thePage.you.wishToShare/">

關注Line@

寫法1:

Follow <a href="line://ti/p/@myLineAtAccount">myLineAtAccount</a>

寫法2:

Follow <a href="intent://ti/p/@myLineAtAccount#Intent;scheme=line;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=jp.naver.line.android;end">myLineAtAccount</a>

本文更新於 2016/07/15。

分類
网站

網站用上了letsencrypt的免費ssl證書

使用 certbot 獲取證書

請訪問 certbot instructions 安裝 cerbot。在 CentOS 7 和 8 中使用 certbot 搭配 Cloudflare 插件實現自動更新證書的安裝與配置流程是這樣的:

#安裝 snapd 參考:https://snapcraft.io/docs/installing-snap-on-centos
sudo yum install epel-release
sudo yum install snapd
sudo systemctl enable --now snapd.socket
sudo ln -s /var/lib/snapd/snap /snap
sudo snap install core
sudo snap refresh core

#刪除舊版 certbot
sudo yum remove certbot
#安裝 certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo snap set certbot trust-plugin-with-root=ok
#安裝 Cloudflare 插件
sudo snap install certbot-dns-cloudflare
#配置 Cloudflare api token
nano .cloudflare.ini
#配置文件內容爲

# Cloudflare API token used by Certbot
dns_cloudflare_api_token = QYuhPLUGSPvN30Yry0CXe3PSYJlkIjc_laJgUifd

#修改配置文件權限
chmod 600 .cloudflare.ini

#申請證書
sudo certbot certonly \
  --dns-cloudflare \
  --dns-cloudflare-credentials ~/.cloudflare.ini \
  --dns-cloudflare-propagation-seconds 60 \
  -d ft.shaman.eu.org\
  -d plausible.manchuria.eu.org

#測試自動更新
sudo certbot renew --dry-run --dns-cloudflare --dns-cloudflare-credentials ~/.cloudflare.ini --dns-cloudflare-propagation-seconds 60
# crontab 自動更新配置
52 2 * * 0 certbot renew --dns-cloudflare --dns-cloudflare-credentials /home/42/.cloudflare.ini --dns-cloudflare-propagation-seconds 60 --post-hook "nginx -s reload"

#查看當前已經申請的證書
sudo certbot certificates 

通過 DNS-01 challenge 方式獲取證書

由於有台服務器未打開 80 端口且用了 Cloudflare 的 CDN,所以採用 DNS 的方式來獲取證書。>

sudo certbot certonly --manual --preferred-challenges=dns -d ft.wupo.info
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NOTE: The IP of this machine will be publicly logged as having requested this
certificate. If you're running certbot in manual mode on a machine that is not
your server, please ensure you're okay with that.

Are you OK with your IP being logged?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please deploy a DNS TXT record under the name
_acme-challenge.ft.wupo.info with the following value:

7G6Qad5U7z4u4036tk1e5DAPGZ2WSbaSDFhlYLBnjcQ

Before continuing, verify the record is deployed.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Press Enter to Continue
#此時去 Cloudflare 的 DNS 記錄中新增一條 TXT 類型,名稱是 _acme-challenge.ft,內容為 
# 7G6Qad5U7z4u4036tk1e5DAPGZ2WSbaSDFhlYLBnjcQ 
# 的記錄,保存後稍微等待一下下待 DNS 生效,然後回來繼續
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/ft.wupo.info/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/ft.wupo.info/privkey.pem

不使用 snap

有台 CentOS 8 安裝 snap 不成功,使用 pip 來申請 Let’s Encrypt 證書也是很方便的。

首先在 nginx 配置一個空網站,如

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    server_name ft.shaman.eu.org;
}

然後:



sudo dnf install python3 augeas-libs
sudo dnf remove certbot
sudo python3 -m venv /opt/certbot/
sudo /opt/certbot/bin/pip install --upgrade pip
sudo /opt/certbot/bin/pip install certbot certbot-nginx
sudo ln -s /opt/certbot/bin/certbot /usr/bin/certbot

#生成證書並自動配置 nginx
sudo certbot --nginx
#或僅生成證書
sudo certbot certonly --nginx


--以下爲久遠內容不足爲看--

藉助於SSL For Free,可以快速申請Let's Encrypt的SSL證書,然後複製到Vesta Panel中就OK啦,非常方便。實在太簡單啦,所以沒什麼可寫的。證書有效期三個月,快過期時可再次免費更新。

nginx中將http重定向到https,可以在配置文件中這樣設置:

server {
    listen      80;   #listen for all the HTTP requests
    server_name example.com www.example.com;
    return      301         https://www.example.com$request_uri;
}

SSL For Free的證書直接用在nginx上

Certificate Successfully Generated後,下載生成的證書,合併certificate.crt和ca_bundle.crt

cat certificate.crt >> bundle.crt
printf "\n" >> bundle.crt
cat ca_bundle.crt >> bundle.crt

nginx的配置可以這樣寫

server {
    listen 192.111.111.111:443 ssl;
    server_name ft.wupo.info;

    ssl_certificate     /etc/letsencrypt/42/bundle.crt;
    ssl_certificate_key /etc/letsencrypt/42/private.key;
    ssl_protocols	TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

本文更新於 2023/03/09。

分類
网站

Mobile Detect

Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

分類
网站

CSS tricks

關於響應式設計@media的基礎只是可以參考CSS3 Media Queries 詳細介紹與使用方法,我剛剛的需求是,手機端覆蓋正常的部分CSS代碼,只需這樣寫就好:

@media screen and (max-width: 767px) {
/* Common borders. */
.page-header,
.comment-list,
.author-info,
.comment-navigation,
.post-navigation,
.hentry:not(:last-child) {
  margin: 0 0 0 0em;
  padding: 0 0 0 0em;
  border-bottom: none;
} 

頁面底部浮動按鈕

<!--html-->
<div style="position: fixed; left: 50%; margin-left: -77px; bottom: 80px; width: 154px; box-sizing: border-box; text-align: center;">
    <div style="padding:10px 0; text-align:center;">  
        <span onclick="fbs_click1()" style="width:44px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            <img src="facebook_share.png" style="width:44px;height:20px;"/>
        </span>
        <span onclick="shareToLine42()" style="width:40px;height:40px;background-color:#6db533;padding:0px;border-radius:20px;display:block;color:#fff;line-height:40px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            LINE
        </span>    
        <span style="width:40px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;">
            <div class="fb-like" data-action="like" data-layout="button" data-href="https://www.facebook.com/yourPage/"></div>
        </span>   
    </div>
</div>
<!--js-->
<script>
function fbs_click1() { u = "http://yourdomin.com/yourpage"; t = document.title; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=600'); return false; };
function shareToLine42(){
  lineUrl="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>";
  window.open(lineUrl, 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
</script>
<!--若要強制facebook彈出窗口的寬度,需添加css-->
<style>
.fb_iframe_widget>span { width: 309px !important; }
.fb-like-box iframe { width: 309px !important; }
</style>

css虛化圖片做背景:參考這兩個http://codepen.io/akademy/pen/FlkzBhttp://codepen.io/aniketpant/pen/DsEve

本文更新於 2016/06/29。

分類
网站

wordpress站點多域名

首先DNS要指向wordpress所在IP,然後配置虛擬主機,我是複製了一份conf,修改server_name為新增加的域名如blog.newdomin.com,其他不變。然後重啟nginx就可以用兩個域名訪問同一個網站了。

如果想把鏈接中的域名也換了,則需要在wp-config.php中增加兩行:

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);
分類
网站

javascript and jQuery tricks

Selectors

如果頁面寬度小於1024就隱藏同時屬於.navigation.post-navigation這兩個類的元素:

if(jQuery(window).width()<1024){jQuery("#aa").show();jQuery('.navigation.post-navigation').hide();}else{jQuery("#leftShare").show();}
});&#91;/code&#93;
<p>根據時間觸發事件:</p>
[code language="javascript"]
        //默認30秒
        var timeWaitSec=30000;
        //檢查用戶在文章中是否設置了新的執行時間
        if((typeof timeWaitSecNew!='undefined') && (timeWaitSecNew>1)){
          timeWaitSec = timeWaitSecNew;
        }
        setTimeout("do_sth()", timeWaitSec);

根據頁面滾動百分比觸發一次性事件,:

var done = false;
jQuery(window).scroll(function(){

    var wintop = jQuery(window).scrollTop(), docheight = jQuery(document).height(), winheight = jQuery(window).height();
    var  scrolltrigger = 0.65;
	if(jQuery(window).width()<1024){scrolltrigger = 0.45;}else{scrolltrigger = 0.65;}

    //console.log('%scrolled='+(wintop/(docheight-winheight))*100);

    if  (((wintop/(docheight-winheight)) > scrolltrigger)&&(!done)) {
       do_sth();
       done = true;
    }
});

有時找到到js中中文string如\u8d70\u4e00\u6b65這樣的,是被轉換成了Unicode,可以用站長工具的Unicode轉換工具轉換回來。

如果找到的js文件是minified的,而又需要修改其中內容的化,可以用在線unminify工具進行還原。

倒計時

var wait=5;
timeOut();
function timeOut(){
	if(wait==0){
		feedbackObj.fadeOut(100,function(){
			feedbackObj.remove();					
		});
		$('#opacity-mask').fadeOut(100);	
	}else{					
		setTimeout(function(){
			wait--;
			$('.close-seconds>b').text(wait);
			timeOut();
		},1000)
	}
}

使用谷歌的jQueryCDN,如果CDN失敗則用自己服務器上的

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script type="text/javascript" src="/common/js/jquery.min.js"><\/script>')
</script>

本文更新於 2016/06/29。

分類
网站

WordPress與Facebook常用代碼

在文章模板中使用jquery調用facebook總share數,用到jquery解析facebook的json數據:

<script>jQuery(document).ready(function($){
  $.getJSON("https://graph.facebook.com/?id=<?php the_permalink(); ?>", function(data){
    $('#fbCount').text(data.shares);
  });
});
</script>

關閉標籤頁的提醒彈窗(火狐下無效,Chrome下可以):

$(window).bind("beforeunload",function(event) {
    return "Don\'t forget to Like us!";
  });

給post中所有圖片註冊一次性onclick事件:

jQuery(".entry-content img").one("click",function() {fbs_click2();});

自定義按鈕實現點擊後彈出facebook分享彈框

<!--按鈕圖片,圖片採用鏈接背景的方式-->
<a onclick="javascript:fbs_click1();" href="javascript:void(0);" style="background: rgba(0, 0, 0, 0) url('https://ft.wupo.info/wp-content/uploads/2015/11/btn-fblogin.png') no-repeat scroll left center;border-radius: 5px;
color: #fff;display: inline-block;font-size: 1.3em;height: 45px;line-height: 45px;padding: 0 0 0 45px;text-align: left;">分享到FB</a>
<!--彈框js代碼-->
<script>
function fbs_click1() { u = "http://yourdomin.com/yourpage"; t = document.title; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=600'); return false; };
</script>
<!--在body關閉標籤前引入facebook代碼-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1111828692192135";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

本文更新於 2015/11/28。