分類
网站

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。

分類
程序

Emojiえもじ

Emoji即顏文字,現在還挺流行的,像?,完整表可以看Emoji Unicode Tables。其中第一列就是當前設備原生顏文字的表現形式。由於顏文字實際上是字符,所以不同平台有不同的展現形式,就像不同的字體一樣。如果想在網頁中加入顏文字,直接把顏文字當字符複製到網頁中就可以了。

最近用到一個功能,讓Line分享的信息中包含顏文字排列出的圖案,像這種
     ??     ??
???????
???????
???????
     ?????
          ???
               ?
問題主要在於空格和換行,空格無需處理,直接放到待分享信息中即可,換行用\n代替,就可把上面圖案傳至Line分享框了。Line的分享格式我是這樣寫的:

var shareMsg='好搞笑哦\n?';
function shareToLine42(){
	lineUrl="line://msg/text/"+encodeURIComponent(shareMsg)+"%0D%0Ahttps://ft.wupo.info/";
	//如果你有谷歌統計,下面一行可以統計按鈕的點擊次數
	//ga('send', 'event', 'button', 'click', 'share-line-button');
	window.open(lineUrl, 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
注意,shareMsg中顏文字被wordpress做了修改,用來兼容沒有顏文字的平台,實際直接這樣寫"好搞笑哦\n?"就可以。後面代碼中再有顏文字我用"顏文字UTF8"代替。

在wordpress4.4中,顏文字是這樣展現的,把真正的utf8字符放到了alt標籤里。

<img class="emoji" draggable="false" alt="顏文字UTF8" src="https://s.w.org/images/core/emoji/72x72/1f602.png">
去數據庫發現posts表中post_content字段類型為longtext,排序規則為utf8mb4_unicode_ci。其中保存的就是?,而用圖片替換顏文字是發生在文章輸出過程中的。關於排序規則請參考:What's the difference between utf8_general_ci and utf8_unicode_ci,如果沒空細看,那麼結論是直接用utf8mb4_unicode_ci就好。如果你還在用utf8-general-ci,是無法儲存顏文字的。

本文更新於 2016/07/20。

分類
記事

原來Airbnb是這個意思啊

字幕好評。以前真不知道Airbnb的意思,理念很不錯!

如果你有意加入Airbnb,可以通過下面的鏈接來註冊,這樣你將獲得¥262的獎勵。推薦鏈接:zh.airbnb.com/c/qianz69?s=8

我深圳的單間:https://zh.airbnb.com/rooms/8514245

本文更新於 2016/08/18。

分類
网站

網站用上了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.

分類
方法

開啟谷歌位置記錄

谷歌的位置記錄是種後台服務,默默的為你記下你所去過的地方。我去香港台灣韓國泰國的都有記錄,但是一回祖國就自動關閉無法開啟了。以前也沒太在意,但是上次去泰國,發現谷歌NOW還是挺有意思的,還有回來後玩谷歌Fit,也是需要開啟位置記錄才能玩的爽。於是搜了開啟谷歌位置記錄的方法,效果是可以開啟谷歌位置記錄,缺點是位置是偏的。

我這邊環境是:sony z已root,已安裝Xposed和Xprivacy,影梭按應用代理所有谷歌服務。首先打開Xprivacy,菜單/篩選,勾選顯示系統app。搜索google,找到Google Play 服務,在我這裡Google Play服務是和Google Backup Transport,Google帳號管理員等在一個條目里的。點擊進入後找到"手機資訊(SIM卡)"菜單,點開摺疊按鈕,勾選上如下條目:

  • getNetworkCountryIso
  • getNetworkOperator
  • getNetworkOperatorName
  • getSimCountryIso
  • getSimOperator
  • getSimOperatorName
選上後,點擊菜單/設定,修改MCC為466,MNC為92,國家為TW,電信商為Chunghwa,勾選國家前的選框。最後點右上角保存即可。然後回位置記錄就看到可以開啟了。

後記:當我回來Xprivacy看設置的時候,發現國家那一欄變成了XX,不知到為什麼。參考資料:https://plus.google.com/+liufc/posts/9LE3NHY8LGE。

分類
网站

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。