Category Archives: 網站開發

TEST

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

Posted on by

Motivation

I purchased a .tech domain recently, and made it a alias domain to hollen9.com.
However, some src requests 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:

# Allow loading of alias domain resources # You should modify the domains to suit your needs. 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

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

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="Chinese version" ja_JP="Japanese バージョン"] [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 updated 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="Chinese version" ja_JP="Japanese バージョン"]

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". , only displayed when get_locale() returns "en_US" or "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" data-no-translation=""></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 happens, 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

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.

TEST

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/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&#039 ;, '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 website inexplicable 403.3 validation error

Posted on by

layout: post
title: Windows IIS 8 website inexplicable 403.3 validation error
date: 2021-09-15 11:49 +8
description: Windows folder permissions adjustment.
toc: false
share: true
comments: true
tags: IIS Windows

Notice

This article is a solution for IIS 8 and newer for Windows.

Check for problems

  1. Create a new website and create a simple helloWorld.html file, if it is in a subdirectory, remember to convert it to "web application".
  2. This folder permission gives Everyone permission "Full Control".
  3. If the problem can be solved in this way, it is established as a permission setting problem.

main solution

  1. In wwwroot or the root directory of the website, give IIS_IUSRS Group Read and Write permissions.
  2. Excuting an order iisreset /restart, which will restart IIS for the new permission settings to take effect.
  3. On a different computer, browse the website you just set up to check whether it can be displayed normally. If not, take the alternative method as follows.

Alternative workaround

  1. In wwwroot or the root directory of the website, give IIS AppPool\MyApplicationPoolName Group Read and Write permissions.
    ※Here MyApplicationPoolName should be the application pool name of the website.
  2. Switch to Internet Information Services (IIS) Manager and click on the website.
  3. On the right panel, click "Authentication" under the IIS category.
  4. In the "Anoymous Authentication" option under "Authentication", make sure it is "Enable".
  5. Right click on it and select "Edit...".
  6. The default option should be "Specific user": "IUsr", we switch to the second item "Application pool identity".
  7. Excuting an order iisreset /restart, which will restart IIS for the new permission settings to take effect.
  8. On a different computer, browse the website you just set up to check whether it can be displayed normally. I got here and solved the problem.

References