Monthly Archives: 7 月 2022

Introduce: LangBranch Shortcode

Posted on by

View Plugin Page On WordPress.org

What is LangBranch

It's a simple plugin enable you to use a shortcode like below to display correspond language version of content based on get_locale().

［langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"］

［langbranch en_US］
Content here will only be displayed if get_locale() returns "en_US".
［/langbranch］
［langbranch en_US zh_TW］
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".
［/langbranch］

Motivation

I've been using TranslatePress to provide multi locale experience for visiters.
However, I had been suffering from losting translated content once I update original language's content, until I decided to create a simple shortcode to solve this problem.

Usages

AIO (1-liner) Mode

［langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"］

By appending aio after langbranch main tag, you can setup one specific paragraph in several languages, and if you decide that some locale user to share the same language, you can just type the locale code you want to refer to directly in content. For example, you can make UK version the same as US version.

However, if LangBranch go too deep (chain over 5 stacks) it will fail.
Don't do this:

--1---||---2---||---3---||---4---||---5---||---6---> Oh no!
en_US -> en_GB -> en_AU -> en_HK -> zh_TW -> ja_JP

Seperate Mode

［langbranch en_US］
Content here will only be displayed if get_locale() returns "en_US".
［/langbranch］［langbranch en_US zh_TW］
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".
這裡的內容，只有當 get_locale() 回傳 "en_US" 或 "zh_TW" 才會顯示。
［/langbranch］

Very straight forward, isn't?
But when using several shortcodes, I would suggest you don't put a linebreak between ［/langbranch］ and ［langbranch］, in order to prevent unwanted linebreak <br> being rendered.

Optional step

All contents enclosed by ［langbranch］ will be rendered enclosed by <div class="langbranch"></div>
So if you are using auto machine translating like TranslatePress offers, you may want to exclude all selector .langbranch.

Recaps

This plugin is at its early stage of developing, so you may encounter some issues while using it.
For the worst case, it breaks your site up.
If that happen, don't be panic! Just go to your wp-content/plugins directory and delete langbranch and you shall be fine.

Vantage Theme Issue: Sticky Nav doesn’t work on mobile view

Posted on by

Solution


Just simply comment out && !isMobileDevice, and it will work like a charm!

Github solved issue: #1

However, to do this directly on a theme However, to do this directly on a theme could be changed in any future updates is probably not a good idea.

Instead, we copy that .js file to our child theme js directory.
Then, we have to dequeue the original .js by inserting the commands to your child theme's functions.php:

function vantage_child_enqueue_parent_style() {

    wp_dequeue_script('vantage-main');
    wp_enqueue_script('vantage-main', get_stylesheet_directory_uri() . '/js/vantage-hollen-main.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );

In this way, any future minor update pushed by Vantage Dev Team won't clear your modified code, as long as there won't be any structural changes, like ids's and/or classes' renaming.

Reflection

It took me almost two hours at late night debugging (3 AM), and it almost got me: I thought it was caused due to the lack of support of $(body) and scrollTop() on mobile device. Tried so many solution to no avail, then I decided to go to sleep.
and you know what, I solved it in 30 minutes after having a lunch at noon.

Broadlink RM Mini 3 與 Google Home 聲控快速筆記

Posted on by

Broadlink 博聯推出的 RM Mini 3

可以參考這個開箱、設定教學。特別是文章後段提到的「場景」功能。

https://playsmarthome.com/broadlink-rm-mini-3-review/

新增的場景，若有將「博聯」聯動至 Google Home，就會出現在日常安排 (Routine)，
可以當做 Nest Hub 的遙控介面，設定的關鍵字則會成為語音指令。

操作範例

博聯新增場景「台視新聞台」，對應的是 MOD 遙控器的

５-> [延遲0.5秒] ->０-> [延遲0.5秒] ->３

然後對 Google AI 說「Hey Google, 啟動台視新聞台」，Broadlink RM Mini 3 就會將 MOD 轉台至台視新聞了。
Google AI 這邊則會回覆:「OK，正在啟動台視新聞台」。

這個「啟動」是 Google 強制設定的呼號，但有辦法可以繞過，設定更自然的指令：
「音響大聲」、「查看節目資訊」等。

辦法也很簡單，只要進 Google Home 的「日常安排」設定另一組日常安排，取個自己喜歡的呼號，然後對應博聯的「啟動XXXXX」指令即可。

建議還可以購買支援紅外線的 HDMI 切換器，這樣一來連訊源切換都可以聲控嚕！

虛擬化… 據老闆所稱每個月幫公司省了 5000 多元

Posted on by

公司原先於有 10 幾台主機 24/7 不間斷在運行 VB6 的軟體，主機架構都是 N 年前的。
公司創立從 1993 年到 2021 年也不曾有人出面改正......
於是我率先為公司導入 VMWare Workstation 在主管、老闆熟悉的 Windows 先試水溫，他們對 Snapshop 可說是非常滿意。

但，這樣還不夠！

接著我導入 ESXi OS，先搬移一台原先的 VB6 程式至創建好的虛擬機，運行二個月無問題。
向上呈報，更進一步提出 VCenter 構想，兼顧多使用者管理、自動備份、效能監測等。
並自原價屋組一台 AMD 5950X 32GB (雙通道) 的配置。
2022 年初又增添到 64G (四通道)。

目前已經運行超過一年，非常穩定。

WordPress: Format and colorize code block by applying prism.js

Posted on by

Motivations

for (int i = 5; i < 10 ; i++) {
    Console.WriteLine("Hello Moto?");
}

If you are using Vantage for your WordPress site, and you want to make your code block looks fancy, follow the instructions:

Instructions

1. Make sure you have created a child theme based on Vantage, and it's activated.

2. Reset styles applied to code block.

I highly recommend to work with WP-SCSS plugin when writing CSS/SCSS, so you can have stylesheets organized without the costs of performance by using @import.

/* Reset the style set by Vantage (the parent theme) */
.entry-content pre, .entry-content code {
    background: unset;
    font-family: unset;
    border: unset;
    box-shadow: unset;
    overflow-x: unset;
}

Later we will apply prism.js and its stylesheet.

3. Insert code snippits to your child theme's "functions.php"

function code_pre_theme(){
    // To check if currently viewing page is a "post"
    if (is_singular('post')) {
        wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js');
        wp_enqueue_script('prism-core-js', 'https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js');
        wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css');
        wp_enqueue_script('prism-autoloader-js', 'https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js');
    }
}
add_action('wp_enqueue_scripts', 'code_pre_theme', 10); //Number 10 heres depend on site. The princlple is to set a number larger than the essential scripts and styles belong to your parent theme, which is vantage in this case.

By enqueuing prism-core.min.js and prism-autoloader.min.js, it will utomatically loads languages's style when necessary.
You may opt-in languages based on your needs. For example, to load certain style based on has_tag('php'), has_tag('csharp') result.
Visit prism.js at cdnjs.com for more programming language supports.

Conlusion

You don't have to follow every steps as I did, as you may come up with a better solution for your own site.

At the time I wrote this article, I absolutely have zero knowledge in PHP, only knowing C#, Javascript, Java, SCSS; writing and modifying some php script isn't complicated, so go ahead and try all the possibilities.