探索实现页面英文版的方式 Exploring ways to implement the English version of the page

背景 Background 

目前网页默认展示是中英双语，略显杂乱，如果能支持一个纯英文的界面，会是个不错的想法；但要实现这个功能，目前想到的几种办法：

（1）为所有博客内容前后台做一套英文版，分离性最好，但工程量巨大，相当于另搭了一个应用

（2）只做后端数据的英文版，但是每次写文章需要单独再两个地方写，分离性也不错，但工程量仍较多

（3）后端不动，前端仅截面支持英文前端展示，但博客内容维持现有的双语版，整体工程量较小

根据目前现状综合考虑，选择（3）合适，也许后续重构再会考虑（1）（2）方案

The current webpage displays both Chinese and English by default, which makes the interface somewhat cluttered. Supporting a purely English interface would be a good idea. There are several ways to achieve this functionality:

(1) Create a separate English version of all blog content for both the front-end and back-end. Although this approach offers the best separation, it requires a substantial amount of work, almost equivalent to building a new application.

(2) Create an English version only for the back-end data, which would require writing articles in two different places each time. This also provides good separation, but still involves a significant amount of work.

(3) Keep the back-end unchanged and only implement English display on the front-end, while maintaining the current bilingual version of blog's content. This approach has the least overall workload.

Considering the current situation, the third option seems the most suitable. Options (1) and (2) might be considered during a future restructuring.

实现 Implementation 

前端使用session控制是否双语，后端使用filter拦截器，若为英文版则使用正则匹配去掉所有中文字符以及夹带的英文

The front end uses sessions to control whether the page is bilingual, while the back end uses a filter interceptor. If the English version is selected, regular expressions are used to remove all Chinese characters and any mixed-in English.

public class LanguageFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpSession session = httpRequest.getSession(false);
        
        // dual language version
        if (session != null && session.getAttribute("is_en") == null) {
            chain.doFilter(request, response);
            return;
        }

        // en language
        // filter Chinese Characters
    }

}

@Controller
public class LanguageController {
    @RequestMapping(value = "/setEnglish", method = RequestMethod.POST)
    @ResponseBody
    public String setEnglish(HttpSession session) {
        session.setAttribute("is_en", "true");
        return "English mode set.";
    }
    @RequestMapping(value = "/removeEnglish", method = RequestMethod.POST)
    @ResponseBody
    public String removeEnglish(HttpSession session) {
        session.removeAttribute("is_en");
        return "English mode removed.";
    }
}

    // set English version
    fetch('/blog/setEnglish.do', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.text())
    .then(data => {
        console.log(data);
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
    });
    
    // set dual language version
    fetch('/blog/removeEnglish.do', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.text())
    .then(data => {
        console.log(data);
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
    });