1 line
25 KiB
JSON
1 line
25 KiB
JSON
[{"categories":null,"contents":"Chirpy is a blog theme originally based on Jekyll. Due to Jekyll\u0026rsquo;s design limitations, it does not natively support internationalization (i18n) and requires third-party plugins for i18n functionality. To enable i18n support for Chirpy without the hassle of relying on third-party plugins, the hugo-theme-chirpy project migrated the Chirpy theme to Hugo with minimal adaptations. All features of Chirpy are available in hugo-theme-chirpy (though some functionalities may operate differently within the Hugo framework).\nFollow the posts in the demo site to quickly set up a free personal blog!\nFeatures Dark Mode: Enhanced readability in low-light environments. Multilingual UI: Easily switch between different languages. Efficient Post Organization: Use hierarchical categories, trending tags, recommended reading, and search functionalities. Optimized Layout: Includes TOC, syntax highlighting, prompts, and more. Rich Writing Extensions: Support for mathematical formulas, charts, flowcharts, and embedded media. Multiple Comment Systems: Choose from various commenting options. Web Analysis Tools: Integrated with multiple analytics tools. Modern Web Technologies: Built for SEO and web performance. RSS Feed Support: Keep your readers updated with RSS feeds. ","permalink":"https://geekifan.github.io/chirpy-starter/about/","tags":null,"title":"About"},{"categories":["Blogging","Tutorial"],"contents":"The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.\nGenerate the favicon Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool Real Favicon Generator and click the button Select your Favicon image to upload your image file.\nIn the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button Generate your Favicons and HTML code to generate the favicon.\nDownload \u0026amp; Replace Download the generated package, unzip and delete the following two from the extracted files:\nbrowserconfig.xml site.webmanifest And then copy the remaining image files (.PNG and .ICO) to cover the original files in the directory assets/img/favicons/ of your Hugo site. If your Hugo site doesn\u0026rsquo;t have this directory yet, just create one.\nThe following table will help you understand the changes to the favicon files:\nFile(s) From Online Tool From Chirpy *.PNG ✓ ✗ *.ICO ✓ ✗ ✓ means keep, ✗ means delete.\nThe next time you build the site, the favicon will be replaced with a customized edition.\n","permalink":"https://geekifan.github.io/chirpy-starter/post/2019-08-11-customize-the-favicon/","tags":["favicon"],"title":"Customize the Favicon"},{"categories":["Blogging","Tutorial"],"contents":"NOTE: This tutorial is not fully migrated from the Jekyll version \u0026ndash; please reference with caution.\nCreating a Site Repository When creating your site repository, you have two options depending on your needs:\nOption 1. Using the Starter (Recommended) This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.\nSign in to GitHub and navigate to the starter. Click the Use this template button and then select Create a new repository. Name the new repository \u0026lt;username\u0026gt;.github.io, replacing username with your lowercase GitHub username. Option 2. Forking the Theme This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don\u0026rsquo;t try this unless you are familiar with Jekyll and plan to heavily modify this theme.\nSign in to GitHub. Fork the theme repository. Name the new repository \u0026lt;username\u0026gt;.github.io, replacing username with your lowercase GitHub username. Setting up the Environment Once your repository is created, it\u0026rsquo;s time to set up your development environment. There are two primary methods:\nUsing Dev Containers (Recommended for Windows) Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.\nSteps:\nInstall Docker: On Windows/macOS, install Docker Desktop. On Linux, install Docker Engine. Install VS Code and the Dev Containers extension. Clone your repository: For Docker Desktop: Start VS Code and clone your repo in a container volume. For Docker Engine: Clone your repo locally, then open it in a container via VS Code. Wait for the Dev Containers setup to complete. Setting up Natively (Recommended for Unix-like OS) For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.\nSteps:\nFollow the Hugo installation guide to install Hugo and ensure Git is installed. Clone your repository to your local machine. Run command hugo mod get to install the dependencies. Usage Start the Jekyll Server To run the site locally, use the following command:\n1 hugo serve If you are using Dev Containers, you must run that command in the VS Code Terminal.\nAfter a few seconds, the local server will be available at http://127.0.0.1:1313.\nConfiguration Update the variables in _config.yml as needed. Some typical options include:\nurl avatar timezone lang Social Contact Options Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the _data/contact.yml file.\nCustomizing the Stylesheet To customize the stylesheet, copy the theme\u0026rsquo;s assets/css/jekyll-theme-chirpy.scss file to the same path in your Jekyll site, and add your custom styles at the end of the file.\nCustomizing Static Assets Static assets configuration was introduced in version 5.1.0. The CDN of the static assets is defined in _data/origin/cors.ymll. You can replace some of them based on the network conditions in the region where your website is published.\nIf you prefer to self-host the static assets, modify config/_default/params.toml and turn self_host on. The static files are from geekifan/chirpy-static-assets which is a fork of cotes2020/chirpy-static-assets with minimal changes to make it work with hugo.\nDeployment Before deploying, check the _config.yml file and ensure the url is configured correctly. If you prefer a project site and don\u0026rsquo;t use a custom domain, or if you want to visit your website with a base URL on a web server other than GitHub Pages, remember to set the baseurl to your project name, starting with a slash, e.g., /project-name.\nNow you can choose ONE of the following methods to deploy your Jekyll site.\nDeploy Using Github Actions Prepare the following:\nIf you\u0026rsquo;re on the GitHub Free plan, keep your site repository public.\nIf you have committed Gemfile.lockl to the repository, and your local machine is not running Linux, update the platform list of the lock file:\n1 $ bundle lock --add-platform x86_64-linux Next, configure the Pages service:\nGo to your repository on GitHub. Select the Settings tab, then click Pages in the left navigation bar. In the Source section (under Build and deployment), select GitHub Actions from the dropdown menu. Push any commits to GitHub to trigger the Actions workflow. In the Actions tab of your repository, you should see the workflow Build and Deploy running. Once the build is complete and successful, the site will be deployed automatically. You can now visit the URL provided by GitHub to access your site.\nManual Build and Deployment For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.\nNavigate to the root of the source project, and build your site with the following command:\n1 $ JEKYLL_ENV=production bundle exec jekyll b Unless you specified the output path, the generated site files will be placed in the _sitefolder of the project\u0026rsquo;s root directory. Upload these files to your target server.\n","permalink":"https://geekifan.github.io/chirpy-starter/post/2019-08-09-getting-started/","tags":["getting started"],"title":"Getting Started"},{"categories":["Blogging","Tutorial"],"contents":"This tutorial will guide you how to write a post in the Chirpy template, and it\u0026rsquo;s worth reading even if you\u0026rsquo;ve used Hugo before, as many features require specific variables to be set.\nNaming and Path Create a new file using hugo new content/post/YYYY-MM-DD-TITLE.md. You can change the path as you like, but note that all the posts should be placed in content/post of the root directory.\nFront Matter Basically, you need to fill the Front Matter as below at the top of the post:\n1 2 3 4 5 --- title: TITLE date: YYYY-MM-DD HH:MM:SS +/-TTTT draft: true --- You can add the following fields as needed:\n1 2 3 4 categories: [TOP_CATEGORY, SUB_CATEGORY] # only two categories are supported tags: [TAG] # TAG names should always be lowercase pin: true # it means this post will show at the top of the home page. description: Hello, World! # description of this post The posts\u0026rsquo; layout has been set to post by default, so there is no need to add the variable layout in the Front Matter block.\nCategories and Tags The categories of each post are designed to contain up to two elements, and the number of elements in tags can be zero to infinity. For instance:\n1 2 3 4 --- categories: [Animal, Insect] tags: [bee] --- Author Information The author information of the post usually does not need to be filled in the Front Matter , they will be obtained from variables social.name and the first entry of social.links of the configuration file by default. But you can also override it as follows:\nAdding author information in data/authors.yaml (If your website doesn\u0026rsquo;t have this file, don\u0026rsquo;t hesitate to create one).\n1 2 3 \u0026lt;author_id\u0026gt;: name: \u0026lt;full name\u0026gt; url: \u0026lt;homepage_of_author\u0026gt; And then use author to specify a single entry or authors to specify multiple entries:\n1 2 3 4 5 --- author: \u0026lt;author_id\u0026gt; # for single entry # or authors: [\u0026lt;author1_id\u0026gt;, \u0026lt;author2_id\u0026gt;] # for multiple entries --- If you don\u0026rsquo;t want to specify the author in the frontmatter of every article, you can set a global author in config/_default/params.toml.\n1 author: \u0026lt;author_id\u0026gt; The author specified in each article\u0026rsquo;s frontmatter will override the global author setting. So if any article has a different author than the global one, feel free to add the author directly in its frontmatter.\nTo support multilingual author information on an i18n-enabled site, you can organize author data in language-specific YAML files under data/authors/. For instance:\nEnglish: data/authors/en.yaml Simplified Chinese: data/authors/zh-CN.yaml Simply populate each file with the respective author details:\n1 2 3 \u0026lt;author_id\u0026gt;: name: \u0026lt;author_name_en\u0026gt; url: \u0026lt;homepage_of_author\u0026gt; 1 2 3 \u0026lt;author_id\u0026gt;: name: \u0026lt;author_name_zh_CN\u0026gt; url: \u0026lt;homepage_of_author\u0026gt; Post Description By default, the first words of the post are used to display on the home page for a list of posts, in the Further Reading section, and in the XML of the RSS feed. If you don\u0026rsquo;t want to display the auto-generated description for the post, you can customize it using the description field in the Front Matter as follows:\n1 2 3 --- description: Short summary of the post. --- Additionally, the description text will also be displayed under the post title on the post\u0026rsquo;s page.\nTable of Contents By default, the Table of Contents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to config/_default/params.toml and set the value of variable toc to false. If you want to turn off TOC for a specific post, add the following to the post\u0026rsquo;s Front Matter:\n1 2 3 --- toc: false --- Comments The global setting for comments is defined by the comments.provider option in the config/_default/params.toml file. Once a comment system is selected for this variable, comments will be enabled for all posts.\nIf you want to close the comment for a specific post, add the following to the Front Matter of the post:\n1 2 3 --- comments: false --- Media We refer to images, audio and video as media resources in Chirpy.\nURL Prefix URL prefix is under development.\nFrom time to time we have to define duplicate URL prefixes for multiple resources in a post, which is a boring task that you can avoid by setting two parameters.\nIf you are using a CDN to host media files, you can specify the cdn in config/_default/params.toml. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name.\n1 cdn: https://cdn.com To specify the resource path prefix for the current post/page range, set media_subpath in the front matter of the post:\n1 2 3 --- media_subpath: /path/to/media/ --- The option site.cdn and page.media_subpath can be used individually or in combination to flexibly compose the final resource URL: [site.cdn/][page.media_subpath/]file.ext\nImages Caption Add an html attribute caption to the next line of an image, then it will become the caption and appear at the bottom of the image:\n1 2  { caption=\u0026#34;Your caption of images\u0026#34; } Size To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.\n1 2  { width=\u0026#34;700\u0026#34; height=\u0026#34;400\u0026#34; } For an SVG, you have to at least specify its width, otherwise it won\u0026rsquo;t be rendered.\nPosition By default, the image is centered, but you can specify the position by using one of the classes normal, left, and right.\nOnce the position is specified, the image caption should not be added.\nNormal position\nImage will be left aligned in below sample:\n1 2  { .normal } Float to the left\n1 2  { .left } Float to the right\n1 2  { .right } Dark/Light mode You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (dark or light):\n1 2 3 4  { .light }  { .dark } Shadow The screenshots of the program window can be considered to show the shadow effect:\n1 2  { .shadow } Preview Image If you want to add an image at the top of the post, please provide an image with a resolution of 1200 x 630. Please note that if the image aspect ratio does not meet 1.91 : 1, the image will be scaled and cropped.\nKnowing these prerequisites, you can start setting the image\u0026rsquo;s attribute:\n1 2 3 4 5 --- image: path: /path/to/image alt: image alternative text --- Note that the media_subpath can also be passed to the preview image, that is, when it has been set, the attribute path only needs the image file name.\nVideo Social Media Platform You can embed videos from social media platforms with the following syntax:\n1 {{\u0026lt; embed/{Platform}.html id=\u0026#34;{ID}\u0026#34; \u0026gt;}} Where Platform is the lowercase of the platform name, and ID is the video ID.\nThe following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.\nVideo URL Platform ID https://www.youtube.com/watch?v=H-B46URT4mg youtube H-B46URT4mg https://www.twitch.tv/videos/1634779211 twitch 1634779211 https://www.bilibili.com/video/BV1Q44y1B7Wf bilibili BV1Q44y1B7Wf Video Files If you want to embed a video file directly, use the following syntax:\n1 {{\u0026lt; embed/video.html src=\u0026#34;{URL}\u0026#34; \u0026gt;}} Where URL is a URL to a video file e.g. /path/to/sample/video.mp4.\nYou can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.\nposter='/path/to/poster.png' — poster image for a video that is shown while video is downloading title='Text' — title for a video that appears below the video and looks same as for images autoplay=true — video automatically begins to play back as soon as it can loop=true — automatically seek back to the start upon reaching the end of the video muted=true — audio will be initially silenced types — specify the extensions of additional video formats separated by |. Ensure these files exist in the same directory as your primary video file. Consider an example using all of the above:\n1 2 3 4 5 6 7 8 9 10 {{\u0026lt; embed/video.html src=\u0026#34;/path/to/video.mp4\u0026#34; types=\u0026#34;ogg|mov\u0026#34; poster=\u0026#34;poster.png\u0026#34; title=\u0026#34;Demo video\u0026#34; autoplay=true loop=true muted=true \u0026gt;}} Audios If you want to embed an audio file directly, use the following syntax:\n1 {{\u0026lt; embed/audio.html src=\u0026#34;{URL}\u0026#34; \u0026gt;}} Where URL is a URL to an audio file e.g. /path/to/audio.mp3.\nYou can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.\ntitle='Text' — title for an audio that appears below the audio and looks same as for images types — specify the extensions of additional audio formats separated by |. Ensure these files exist in the same directory as your primary audio file. Consider an example using all of the above:\n1 2 3 4 5 6 {{\u0026lt; include embed/audio.html src=\u0026#39;/path/to/audio.mp3\u0026#39; types=\u0026#39;ogg|wav|aac\u0026#39; title=\u0026#39;Demo audio\u0026#39; \u0026gt;}} Pinned Posts You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:\n1 2 3 --- pin: true --- Prompts There are several types of prompts: tip, info, warning, and danger. They can be generated by adding the class prompt-{type} to the blockquote. For example, define a prompt of type info as follows:\n1 2 \u0026gt; Example line for prompt. { .prompt-info } Syntax Inline Code 1 `inline code part` Filepath Highlight 1 {{\u0026lt; /path/to/a/file.extend \u0026gt;}} Code Block Markdown symbols ``` can easily create a code block as follows:\n1 2 3 ``` This is a plaintext code snippet. ``` Specifying Language Using ```{language} you will get a code block with syntax highlight:\n1 2 3 ```yaml key: value ``` Specifying the Filename You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute file to achieve this:\n1 2 3 ```shell { file=\u0026#34;path/to/file\u0026#34; } # content ``` Mathematics We use MathJax to generate mathematics. For website performance reasons, the mathematical feature won\u0026rsquo;t be loaded by default. But it can be enabled by:\n1 2 3 --- math: true --- After enabling the mathematical feature, you can add math equations with the following syntax:\nBlock math should be added with $$ math $$ with mandatory blank lines before and after $$ Inserting equation numbering should be added with $$\\begin{equation} math \\end{equation}$$ Referencing equation numbering should be done with \\label{eq:label_name} in the equation block and \\eqref{eq:label_name} inline with text (see example below) Inline math (in lines) should be added with $$ math $$ without any blank line before or after $$ Inline math (in lists) should be added with \\$$ math $$ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 \u0026lt;!-- Block math, keep all blank lines --\u0026gt; $$ LaTeX_math_expression $$ \u0026lt;!-- Equation numbering, keep all blank lines --\u0026gt; $$ \\begin{equation} LaTeX_math_expression \\label{eq:label_name} \\end{equation} $$ Can be referenced as \\eqref{eq:label_name}. \u0026lt;!-- Inline math in lines, NO blank lines --\u0026gt; \u0026#34;Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit.\u0026#34; \u0026lt;!-- Inline math in lists, escape the first `$` --\u0026gt; 1. \\$$ LaTeX_math_expression $$ 2. \\$$ LaTeX_math_expression $$ 3. \\$$ LaTeX_math_expression $$ Mermaid Mermaid support is under development\nMermaid is a great diagram generation tool. To enable it on your post, add the following to the YAML block:\n1 2 3 --- mermaid: true --- Then you can use it like other markdown languages: surround the graph code with ```mermaid and ```.\nLearn More For more knowledge about writing Hugo posts, visit the Hugo Documentation.\n","permalink":"https://geekifan.github.io/chirpy-starter/post/2019-08-08-write-a-new-post/","tags":["writing"],"title":"Writing a New Post"},{"categories":["Blogging","Demo"],"contents":" Headings H1 — heading H2 — heading H3 — heading H4 — heading Paragraph Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.\nLists Ordered list Firstly Secondly Thirdly Unordered list Chapter Section Paragraph ToDo list Job Step 1 Step 2 Step 3 Description list Sun the star around which the earth orbits Moon the natural satellite of the earth, visible by reflected light from the sun Block Quote This line shows the block quote.\nPrompts An example showing the tip type prompt.\nAn example showing the info type prompt.\nAn example showing the warning type prompt.\nAn example showing the danger type prompt.\nTables Company Contact Country Alfreds Futterkiste Maria Anders Germany Island Trading Helen Bennett UK Magazzini Alimentari Riuniti Giovanni Rovelli Italy Links http://127.0.0.1:4000\nFootnote Click the hook will locate the footnote1, and here is another footnote2.\nInline code This is an example of Inline Code.\nFilepath Here is the /path/to/the/file.extend.\nCode blocks Common 1 This is a common code snippet, without syntax highlight and line number. Specific Language 1 2 3 4 if [ $? -ne 0 ]; then echo \u0026#34;The command was not successful.\u0026#34;; #do the needful / exit fi; Specific filename 1 2 3 @import \u0026#34;colors/light-typography\u0026#34;, \u0026#34;colors/dark-typography\u0026#34;; Mathematics The mathematics powered by MathJax:\n$$ \\begin{equation} \\sum_{n=1}^\\infty 1/n^2 = \\frac{\\pi^2}{6} \\label{eq:series} \\end{equation} $$\nWe can reference the equation as \\eqref{eq:series}.\nWhen $a \\ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are\n$$ x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a} $$\nImages Default (with caption) Full screen width and center alignment Left aligned Float to left Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.\nFloat to right Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.\nDark/Light mode \u0026amp; Shadow The image below will toggle dark/light mode based on theme preference, notice it has shadows.\nVideo Reverse Footnote The footnote source\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nThe 2nd footnote source\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://geekifan.github.io/chirpy-starter/post/2019-08-08-text-and-typography/","tags":["typography"],"title":"Text and Typography"},{"categories":null,"contents":"","permalink":"https://geekifan.github.io/chirpy-starter/archives/","tags":null,"title":"Archives"}] |