The Hexo blog can be set up quickly with GitHub Pages, and we have our own blog space where we can record our usual problems and solutions, as well as recent learning and status. Recently, when using some functional websites, I always add the commonly used websites to the browser label, and then I think whether I can add the website to our blog, which not only improves the learning efficiency, but also reduces the browser label and increases the simplicity of the interface.

1. Switch blog themes

In the process of learning, I found that Hexo’s current landscape theme was not scalable enough and did not find a way to add navigation pages; In contrast, the Theme of Mary has expanded to a richer range of functions under the continuous guidance of many bosses.

1.1 Viewing Hexo’s current theme

After setting up the Hexo blog project locally, go to the blog folder under the blog project and find the _config.yml file. This is the global configuration file for Hexo.

1.2 Switch to the Matery theme

The default theme for Hexo is landscape, and the process for switching Hexo theme to Matery theme is as follows:

  1. First download the matery theme project file, project address

  2. Place the downloaded hexo-theme-matery project files under the Hexo/Themes folder of the Hexo blog project

  3. Open the global configuration file for Hexo again, the blog/_config.yml file

  4. Search globally for theme to find theme configuration options and set the current theme to hexo-theme-matery

    • Note that the value of the theme configuration item must be the same as the name of the local theme folder

  5. Once set up, use the hexo clean && hexo g && Hexo s command to redeploy and execute the blog project, and check locally at http://localhost:4000/ to see if the new theme takes effect.

2. Add navigation

Now that the theme of the blog is matery, we can add a navigation page to our favorite urls.

2.1 Creating a navigation page

To create a navigation page for the blog, go to the project folder and use the Git terminal to run hexo new page ‘navigate’. A navigate folder with an index.md file appears under the blog/source folder.

2.2 Adding the Navigation Bar

Navigation-related folders and files are created and need to be displayed in the blog site functionality menu bar, which is configured in a specific theme. Locate the configuration file in the folder corresponding to the matery theme: \theme\hexo-theme-matery\_config.yml, search for menu configuration items, and add a navigation bar page at the end. ICONS can be specified locally or referenced on the Fontawesome website.

After the configuration is complete, run the hexo clean && hexo g && hexo s command to redeploy the local blog project to check whether the configuration has taken effect, as shown in the following figure.

2.3 Adding a Chinese name

After the navigate attribute is added to the menu in the configuration file and deployed, navigate is in effect on the page but is displayed in English. Therefore, translate the English state into Chinese.

The languages of blog sites are divided into Hexo project global languages and Matery theme languages:

  1. Global configuration in the hexo blog project: Open the blog/_config.yml file and search for language, find the language Settings for the entire site, and set the language value to zh-cn, default to en.

  2. Matery Theme Configuration:

    • Theme language files, go to the hexo-theme-matery/languages folder, where files are different language configurations. Default. yml is the default English configuration. Zh-cn is configured in simplified Chinese. Zh-hk is a traditional Chinese configuration. Since we have added a navigate page, we need to add the corresponding English, simplified Chinese and traditional Chinese characters to the appropriate document.

      #default.yml
navigate: Navigate

#zh-CN.yml
navigate: navigation

#zh-HK.yml
navigate: navigation
Copy the code

    • In the hexo-theme-matery/layout/_partial folder, locate the mobile-nav.ejs and navigation.ejs files and find the configuration for the menu-related collection there, add navigate and the corresponding Chinese name.

      The < %
var menuMap = new Map();
menuMap.set("Index"."Home page");
menuMap.set("Tags"."Label");
menuMap.set("Categories"."Classification");
menuMap.set("Archives"."Archive");
menuMap.set("About"."About");
menuMap.set("Contact"."Message board");
menuMap.set("Friends"."Friendship link");
menuMap.set("Navigate"."Navigation");
% >Copy the code

  3. After the configuration is complete, redeploy the blog project and you can preview the current feature bar already displayed as the Chinese name.

2.3 Adding navigate. Ejs configuration page information

After the navigation bar is configured, the next step is to display our custom navigation page when clicking the navigation function bar.

Create a new navigate. Ejs file in the \ Themes \matery\ Layout \ folder where the information and styles for the custom navigation page are set.

  • Page search box section
<! <form name="f" action="https://www.baidu.com/" target="_blank"> <div  id="Select-2"> <div class="Select-box-2" id="baidu"> <ul style="height: 46px;" > < li class = "this_s" >, hundred degrees, < / li > < li class = "bing_s" > will · should < / li > < li class = "google_s" >, valley song, < / li > < li class = "baidu_s" > best, </li> <li class="zhihu_s"> </li> </ul> </div> <input name="wd" id=" kW-2 "maxLength ="100" autocomplete="off" Type ="text"> </div> <div class="qingkong" id="qingkong" title=" qingkong" style="display: none; > x < / div > < input value = "search," id = "su - 2" type = "submit" > < ul class = "keylist" > < / ul > < / form > < / div >Copy the code
  • Page navigation url section
<div class="row tags-posts ">
    <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
        <div class="card">
            <div class="jj-list-tit">Navigation</div>
                <ul class="jj-list-con">
                    <li><a href="https://tophub.today/" class="link-3" target="_blank">Today's hot list</a></li>
                    <li><a href="https://search.chongbuluo.com/" class="link-3" target="_blank">Search the worm horde</a></li>
                    <li><a href="http://ilxdh.com/" class="link-3" target="_blank">Long Xuan navigation</a></li>
                    <li><a href="https://adzhp.cn/" class="link-3" target="_blank">Ada's Grocery store</a></li>
                    <li><a href="https://fuliba123.net/" class="link-3" target="_blank">Welfare bar navigation</a></li>
                    <li><a href="http://cxy521.com/" class="link-3" target="_blank">Programmer navigation</a> </li>
                    <li><a href="http://www.6453.net/" class="link-3" target="_blank">Totoro Academic Navigation</a> </li>
                    <li><a href="https://ac.scmor.com/" class="link-3" target="_blank">Google image</a></li>
                    <li><a href="http://www.pansoso.com/" class="link-3" target="_blank">Network location search</a></li>
               </ul>
        </div>
    </div>. </div>Copy the code
  • Search engine configuration section
/* Select the search engine */ 
<script> 
    $('.Select-box ul').hover(function () {$(this).css('height'.'auto')},function () {$(this).css('height'.'40px')}); $('.Select-box-2 ul').hover(function () {$(this).css('height'.'auto')},function () {$(this).css('height'.'46px')});
	$('.Select-box li').click(function () { 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } 
        if (_tihs == 'zhihu_s') { _tihs = 'https://www.zhihu.com/search'; _name = 'q'; } 
        if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } 
        if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw').attr('name', _name); 
        $('.Select-box ul').css('height'.'40px')}); $('.Select-box-2 li').click(function () { 
        var _tihs = $(this).attr('class'); 
        var _html = $(this).html(); 
        if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } 
        if (_tihs == 'zhihu_s') { _tihs = 'https://www.zhihu.com/search'; _name = 'q'; } 
        if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } 
        if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } 
        $('.baidu form').attr('action', _tihs); 
        $('.this_s').html(_html); $('#kw-2').attr('name', _name); 
        $('.Select-box-2 ul').css('height'.'48px')});Copy the code
  • Page Style section
<style>
    ...
</style>
Copy the code
  • Page background image rotation
The < %if (theme.banner.enable) { 
    %> 
        <script> 
        	Switch banner image every day. $('.bg-cover').css('background-image'.'url(/medias/banner/' + new Date().getDay() + '.jpg)'); 
    	</script>The < %}else { %>
        <script> 
      		$('.bg-cover').css('background-image'.'url(/medias/banner/0.jpg)');				</script>The < %} % >Copy the code

2.4 Redeployment

Navigation page configuration is completed, use the command in the local git terminal hexo clean & & & & hexo hexo g s redeploy local hexo project, after the completion of the deployment in the local http://localhost:4000/navigate/ view the navigation page.

After the navigation page is displayed successfully, run the hexo d command to deploy the local modification to a remote location and view the effect of the navigation page on github Pages.

3. Summary

The original intention was to add a navigation page to Hexo blog to manage frequently used urls, so as to avoid the bloated tags in the browser. I searched online and learned article methods and made notes.

  1. The current navigation feature is for Hexo’s matery theme. Other theme file formats are currently unavailable
  2. The configuration of the navigation page refers to some of the articles of other big guys, and has only made some modifications of search sources and website sources to record the learning process