AnQiCMS provides a variety of template filters, which help us flexibly handle data on the front-end page. Among them,replaceA filter is a very useful tool that helps us replace specific content in strings.When it comes to replacing paths generated by template code, this filter is particularly useful.replaceThe filter replacement path also needs careful consideration to ensure the normal operation of the website and **user experience.
replaceReview of the core function of the filter: path replacement
replaceThe filter, as the name implies, is to replace a certain old content with new content in a string. Its basic syntax is very intuitive:{{ obj|replace:"旧内容,新内容" }}In the case of path replacement,objIt is usually a variable representing a path, such as an image link, CSS/JS file path, or the URL of a page.
For example, if the default image link of our website is/uploads/image.jpg,但现在想将其全部指向 CDN 地址https://cdn.yourdomain.com/uploads/image.jpg,就可以这样使用replaceFilter:
<img src="{{ archive.Logo|replace:"https://en.anqicms.com/uploads/,https://cdn.yourdomain.com/uploads/" }}" alt="{{ archive.Title }}" />
This willarchive.Logo变量中所有匹配/uploads/withhttps://cdn.yourdomain.com/uploads/,从而实现路径的转换。
使用场景:什么时候我们会用到它?
In the actual operation of websites, we may encounter various situations where path replacement is needed:
- CDN migration or domain name change:Migrate static resources such as images, JS, CSS, etc. from the local server to CDN, or update the paths of these resources if the main domain name of the website has changed.
- Adjust image or file storage path: The background file storage structure has changed, for example from
/public/static/old-assets/to adjust/public/static/new-assets/. - To meet the requirements of some third-party servicesEnglish: Sometimes, to integrate certain third-party services (such as statistics code, advertising placement), it may be necessary to modify specific resource paths to meet their requirements.
- English: Temporary path adjustmentEnglish: When conducting A/B testing or short-term activities, it is necessary to quickly adjust the loading paths of certain specific resources.
English: Key points to avoid pitfalls.
AlthoughreplaceThe filter function is powerful, but we must be especially cautious when replacing paths to avoid some common pitfalls:
Exact match and global impact:
replaceThe filter is based on stringsLiteral full matchThis means it will replace all the found matches without intelligently judging the context.- Risk: If we want to replace
/images/response for/assets/, then something like/article/about-images/is in such a URL.imagesPart may also be replaced incorrectly, leading to path errors. - [en]SuggestionIn definition
旧内容Try to use specific strings as much as possible, for example, add a slash/Ensure that the match is an independent path segment or consider features like file extensions for matching. For example, instead of replacing/images/, it's better to replace"/images/your-specific-image.jpg,"or more generally consider the boundaries of the path.
- Risk: If we want to replace
The consideration of absolute and relative paths: Paths have absolute paths (such as
/uploads/orhttps://starting withuploads/)。Mixed use or improper conversion may cause path failure.- RiskIf an image path was originally a relative path
uploads/image.jpgand you replace ituploads/response forhttps://cdn.example.com/uploads/the result will becomehttps://cdn.example.com/uploads/image.jpgThis looks like an absolute path. But if your template still processes it as a relative path elsewhere, or the original path is//uploads/image.jpg(relative protocol), the replacement may generatehttps://cdn.example.com//uploads/image.jpgThis is an error with a double backslash in the path. - [en]SuggestionBefore performing the replacement, make sure you know whether the path you are dealing with is absolute or relative, and what type the new path will be.Ensure that the replaced path is still a valid URL format.
- RiskIf an image path was originally a relative path
Prefer using system configurations instead of hard-coded replacements. AnQiCMS provides the following in the backend:[en] Global function settings(such as
网站地址 BaseUrl/移动端地址 MobileUrl/模板静态文件地址 TemplateUrl) as well asContent SettingsThe handling method of the image path. For the overall, basic path adjustments,It is strongly recommended to make configuration changes in the background first..- Reason:Background configuration is global, one-time setup, and easier to manage and maintain.
replaceFilter is forIndividual variablesProcessing it may make the template code complex, difficult to read and maintain. - [en]Suggestion:Only when it is necessary to adjust the path of aspecific variabletomicro, local, or temporaryconsider using
replaceFilter. For example, the path of a certain image library is different from others, and needs to be handled separately.
- Reason:Background configuration is global, one-time setup, and easier to manage and maintain.
Performance considerations: Although the performance of Go language and AnQiCMS template engine is high, if multiple path fields for each element are used in a large loop (such as iterating through hundreds or thousands of article lists)
replaceFiltering for complex replacements still increases the burden on template rendering, affecting the page loading speed.- [en]Suggestion: Try to minimize frequent and large-scale use in templates.
replaceFilter. If possible, try to handle the path at the data source level (such as during back-end data import or publishing), or configure more advanced reverse proxy rules to handle it uniformly.
- [en]Suggestion: Try to minimize frequent and large-scale use in templates.
Lacks regular expression matching capability: AnQiCMS template in
replacea filter is used forSimple string replacementThis does not support regular expressions. This means you cannot use complex patterns to match paths, such as matching all filenames ending with.oldand replace them with.new.- [en]SuggestionIf your path replacement needs involve complex pattern matching,
replaceFilter may not be** selected. You may need to consider processing at the back-end code level, or through the AnQiCMS backend.full-site content replacement功能(The function supports regular expressions)来实现。
- [en]SuggestionIf your path replacement needs involve complex pattern matching,
The importance of thorough testing: Each time the path is
replaceAfter the operation,thorough testingAll affected pages, including:- Is the CSS style of the page loaded normally?
- Is the JS script running normally?
- Can the image be displayed correctly?
- The link within the page jumps correctly or not.
- Is the mobile page compatible?
- Check the browser's developer tools to see if there are any errors in loading resources.
Practical Tips and **Practice
- Combine
systemFlexible use of tags:If you need toTemplateUrlorBaseUrlto make further replacements, you can first get the system variables, and then applyreplaceFilter: “`twig