My Blog
0%

Hexo Blog Tips

Posted on Edited on In
Symbols count in article: 3.3k Reading time ≈ 3 mins.

Tip 1: Background figure settings under theme Next 7.xx

  1. Find the _config.yml file in theme next, its path should be like this: your_blog\themes\next\_config.yml

  2. Search the custom_file_path property using Ctrl + F, it should be like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      #style: source/_data/styles.styl

  3. Uncomment the last sentence:

    1
    style: source/_data/styles.styl

  4. Create a styles.styl file in the above location.

    Notice,it should be in the blog source directory, not in the next theme source directory, which means you should create  the following file: your_blog\source\_data\styles.styl

  5. Write something like these in the styles.styl file:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // Create the background figure
    body {
          background: url(/images/background.png);//Your figure location
          background-size: cover;
          background-repeat: no-repeat;
          background-attachment: fixed;
          background-position: 50% 50%;
    }

    //Transparency of your article
    .content-wrap {
      opacity: 0.85;
    }

    // Transparency of the sidebar
    .sidebar {
      opacity: 0.85;
    }

    //Transparency of the header
    .header-inner {
      background: rgba(255,255,255,0.85);
    }

    Notice, your background.png file should actually be located in this path: your_blog/themes/next/source/images/background.png.

  6. Restart your blog and enjoy your new background figure.

Tip2: Encounter untracked files using hexo d command

If you encounter this problem, then some files will not be deployed to your remote repo of your hexo blog. Everything will be fine when you use hexo s to review your blog locally, but on your remote blog website, the un-uploaded posts will occur 404 error.

This is because there is redundant space in your post name. Hexo use %20 to match each space in your post name and then join the words and space together to form the URL for your post. So if there is extra space in your post title, the URL then cannot be resolved correctly. Be careful with that.

Tip3: Support hexo blog with math formulas

  1. Uninstall the original hexo render, replace it with the pandoc render 

    1
    2
    npm uninstall hexo-renderer-marked
    npm install hexo-renderer-pandoc

  2. Make sure that pandoc is installed on your computer.

    1. If not , download it from GitHub, then add the directory that contains the pandoc.exe to the environment path.
    2. Check step one is done: type pandoc -v or pandoc --version in Windows command line, if the version information, then it's fine to go to next steps.
    3. If you want to use pandoc in gitbash on Windows, type winpty pandoc_command in gitbash. Or you can add alias pandoc='winpty pandoc' in ~/.bashrc, and then use pandoc command as it is in Windows command line.

  3. Enable mathjax in Next theme:

    1. Open the file yourSiteDir/themes/next/_config.yml
    2. Change the enable:flase to enable:true in mathjax. 
      1
      2
      3
      math:
        mathjax:
          enable: true   # Change this from default false to true

  4. Add mathjax in your post header: 

    1
    2
    3
    4
    5
    title: post title
    date: date & time
    tags: tag
    categories: category
    mathjax: true      # Add this line

  5. Clean && Generate && Deploy your blog again, then all math formulas will appear

Tip 4: MathJax does not support text-mode macros or environments.

  1. Like \emph or \begin{enumerate}...\end{enumerate}
  2. You must use HTML to handle such formatting tasks.

Tip 5: Hide specific posts in your blog

  1. npm install hexo-hide-posts --save
  2. Add hidden: true to the front-matter of posts which you want to hide