Original http://blog.13kbook.com/2015/01/02/add-resume-type-to-hexo-under-pacman-theme/
backgroundAlthough not looking for a job for the time being, thinking of a resume is also a good thing to sell to others. And then also want to toss something new, so, so, then think about the study to write a resume.
The form is unlimited, but must be online, preferably very concise.
Since it is online, then simply use the blog, directly on the above.
Blog since the use of markdown, the resume is also directly used markdown, one can be online rendering, the other is the creation of a PDF tool is also a lot of GitHub a search there are several good.
Since the theme used is Pacman, it is changed directly on its basis. Although the basics of Web pages are only about understanding, they do not prevent changes.
Let's take a look at the final effect. Resume effect. is not very concise, to achieve the desired effect. Hey.
The theme of Hexo is placed in the themes directory. Download the Pacman Theme from Pacman first. After the download is complete, refer to the official instructions to set the theme for it.
Then it started.
Since it's a resume, you don't want it to appear in the list on the homepage. That is, the MD file is not placed in the/source/_posts folder. Build a about folder and put it in/source/about.
Then create a new resume.md file.
Note that this place I met a pit, because MD is written by itself, not hexo automatically generated, resulting in the line after date "--" (three-) did not write, and then the pit father, dead and alive can not generate normal page, and the top of the key value of the colon notice to add a space, a lot of this pit.
Then everything goes according to the normal process, and the resume is written well.
It now looks like any normal post style under the Pacman theme.Title:resume layout:post date:2015-01-02 23:23:59---# Wangxiao (wangxiaoer#gmail.com) # #个人信息-Undergraduate/xxx University ( 20XX.9-20XX.7)/Computer Science and technology-working life: 2 Years-Technical blog: http://xxxxx.com-Venue: Beijing # #工作经历 xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxx-xxxxxxx-xxxxxxxxxxxxxxxxxxxxxx# #技能列表熟悉: Android/java understand: c#/wp,python,html, Markdown, etc.
<%} else if (page.layout== ' search ') {%> <%-partial (' _partial/head ')%> <body>
when I think about PHP, I also have this kind of mixing, HTML code and PHP code mixed together, here should be similar. For the time being, of course, the follow-up also confirms that this is true.
now that Pacman can customize the search property, we can also customize a resume property. What do you want to put in it? Like the search node?
then view the Hexo topic Properties Layout Related documentsHttp://hexo.io/docs/themes.html, which says a layout must contain "<%-body%>" to display content.
commonly used is the layout value is a post or page, first look at the page really has "<%-body%>", that is to consider directly copied over, used to say. The difference between post and page can be found by testing the sidebar on the right side of the post, the style also has a certain difference. In view of the actual situation, the page content is used here.
after the change to directly run to see the effect, and the background is gray ah, can not endure ah, too TM ugly. Page type is white, and then use chrome review element, see the content of the class ID of Resume,page as page, should have a relationship with this, and then search, found the/pacman/source/css/_partial/ Article.styl. The first line Plus,. Resume, everything is done.
then it's how to fix the first and the tail. See the layout file contains a Page.ejs file, the first copy of the Resume.ejs (Processing page data),/_partial folder inside the same (this is used to deal with the first page list and summary). The/_partial/post/article.ejs used in this file also copies one copy for Resume.js. Modify the pointer inside the/layout/resume.ejs file.
since there is no need to comment and tail, delete some data at the bottom of/_partial/post/article.ejs, the final code is as follows:<div id= "main" class= "<%= item.layout%>" Itemscope itemprop= "blogpost" > <article itemprop= " Articlebody "> <%-Partial (' header ')%> <div class=" article-content "> <%-Partial (' Gallery ')%> <% if (table&& (Item.toc!== false) && theme.toc.article) {%> <div id= " TOC "class=" toc-article "> <strong class=" Toc-title "><%= __ (' contents ')%></strong> <%-TOC (item.content)%> </div> <%}%> <%-item.content %> </div> </article></div>
and then go back to the/_partial/post/article.ejs inside the resume branch, before the page code is copied, we need to delete some data, consider leaving only "<%-body%>", run a bit, lying in the slot, how there will be garbled. Should be the head has coded information, to consider the retention, the tail because there are statistics, but also to consider the reservation, and finally through the continuous "delete---view effect--recovery", to determine the deletion of the section, the final retention code as follows:<%} else if (page.layout== ' Resume ') {%> <% if (Page.source.match (/\.md$/)) {%> <%-partial (' _ Partial/head ')%> <body> <div id= "container" > <%-body%> </div> <div id= "Footer" ><br/></div> <%-Partial (' _partial/after_footer ')%> </body >
The last run is the effect of the previous one. perfect!
The last time you write a resume, set the layout to resume. At the same time, it is best not to put the CV of the MD in the _posts directory, if placed inside, in the home page list will contain it, and the style has a certain problem. /about/resume.md the last generated path isHttp://yourwebsite/about/resume.html, then add this path on the top navigation bar of the homepage.
SummarizeNot only can you increase the Resume property, but you can also add additional custom pages, such as 404 pages.
It took a night to study, although it was quite interesting to delay a lot of time at three.
Have any questions please feel free to give me feedback.
The source code I have placed on GitHub (Https://github.com/waylife/pacman_with_resume), welcome star and Fork.
Pacman theme to Hexo to increase the type of resume
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
