分類檔案： 網站開發

TEST

Modify .hcacess on Apache Server to allow CORS for specified domains

發表於 由

Motivation

I purchased a .tech domain recently, and made it a alias domain to hollen9.com.
However, some src request are blocked due to CORS policy.
Typical symptoms are blank images, failure to load external fonts, scripts, etc. You can verify it by checking your dev console on the browser by pressing Shift+Ctrl / Command+i.

Solution

Locate your .htacess file of your website, for analog it is a config file just like web.config on IIS.
Open it with a text editor, insert the following:

<IfModule mod_headers.c>
    # Allow loading of alias domain resources
    # You should modify the domains to suit your need.
    SetEnvIf Origin "http(s)?://(www\.)?(holllen.tech|hollen9.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header merge Vary Origin
</IfModule>

Force reload your previous page by pressing Ctrl+F5 or Command+Shift+R, and viola! Now all images are visible!

References

TEST

Introduce: LangBranch Shortcode

發表於 由

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.

TEST

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

發表於 由

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.

TEST

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

發表於 由

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/prismjs@1.28.0/prism.min.js');
        wp_enqueue_script('prism-core-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/components/prism-core.min.js');
        wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism.min.css');
        wp_enqueue_script('prism-autoloader-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/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.

TEST

Windows IIS 8 網站莫名 403.3 驗證錯誤

發表於 由

layout: post
title: Windows IIS 8 網站莫名 403.3 驗證錯誤
date: 2021-09-15 11:49 +8
description: Windows 資料夾權限調整。
toc: false
share: true
comments: true
tags: IIS Windows

注意

本文為 Windows 的 IIS 8 及更新版本的解決方案。

檢查問題

  1. 創建一個新的網站，並建立簡單的 helloWorld.html 檔案，如果是在子目錄，記得要轉成「網站應用程式」。
  2. 該資料夾權限給予 Everyone 權限「Full Control」。
  3. 若如此能解決問題，則確立為權限設定問題。

主要解決方法

  1. 在 wwwroot 或是該網站根目錄，給予 IIS_IUSRS 群組 Read 和 Write 權限。
  2. 執行命令 iisreset /restart，這將重新啟動 IIS，以讓新權限設定生效。
  3. 在不同電腦上，瀏覽剛剛設定的網站，檢查是否可以正常顯示。若不行，則採取替代方法如下。

替代解決方法

  1. 在 wwwroot 或是該網站根目錄，給予 IIS AppPool\MyApplicationPoolName 群組 Read 和 Write 權限。
    ※此處 MyApplicationPoolName 應該是該網站的應用程式池名稱。
  2. 切換至 Internet Information Services (IIS) Manager，點選該網站。
  3. 右側面板點選 IIS 分類底下的 "Authentication"。
  4. 在 "Authentication" 下面的 "Anoymous Authentication" 選項，確保為 "Enable"。
  5. 對其點右鍵，選擇 "Edit..."。
  6. 預設選項應該為 "Specific user": "IUsr"，我們切換為第二項 "Application pool identity"。
  7. 執行命令 iisreset /restart，這將重新啟動 IIS，以讓新權限設定生效。
  8. 在不同電腦上，瀏覽剛剛設定的網站，檢查是否可以正常顯示。我到這邊就解決問題了。

參考資料