Home > Web Front-end > HTML Tutorial > Fexo 文档_html/css_WEB-ITnose

Fexo 文档_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:54:34
Original
1625 people have browsed it

打开博客根目录的 _config.yml设为 theme: fexo

升级

$ cd themes/fexo$ git pull
Copy after login

配置主题

主题配置全部在 theme/fexo里面完成,所里下面所有配置指的是配置 theme/fexo/_config.yml。

设置基本信息

blog_name: Forsignerslogan: Find the bug of the world
Copy after login

设置头像

# relative urlavatar: /images/avatar.jpg# or absolute urlavatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460
Copy after login

设置favicon

favicon: /favicon.ico
Copy after login

设置关键词

关键词主要作用是优化SEO

keywords: forsigner,前端,设计,Hexo主题,前端开发,用户体验,设计,frontend,design,nodejs,JavaScript
Copy after login

自定义博客名的字体

由于中文字体文件太大,有的快10M,所以 Fexo 没有引入中文字体,导致博客名有点难看。

但是可以通过提取字体来减小字体文件大小,让字体只有几KB。

一下步骤可以让你实现自定义博客名字体,包括英文和中文:

  1. 下载免费可用的ttf格式字体
  2. 利用Web-Fontmin 提取字体,然后下载 Web 字体和样式
  3. 在博客根目录的s source文件夹新建两个子目录: fonts 和 css
  4. 把下载的字体方式fonts文件夹,把CSS文件放入css文件夹
  5. 修改 theme/fexo/_config.yml:

 # 这是css文件里的font-familiy的值 ,例如里面是 font-familiy: "myfontName"blog_name_font_familiy: myFontNamefonts_css_path:  - /css/calligraffittiregular.css  - /css/second-font.css
Copy after login

设置首页内容

你可以设置是否在首页直接显示文章

init_page_content: HOME_NAV  # HOME_NAV | POST
Copy after login

设置首页导航

home_nav:  - name: Blog    url: /archives  - name: Github    url: https://github.com/forsigner    target: _blank  - name: Douban    url: http://www.douban.com/people/forsigner/    target: _blank  - name: Twitter    url: https://twitter.com/forsigner    target: _blank
Copy after login

设置页面导航

page_nav:  - 博客: /archives/  - 分类: /category/  - 标签: /tag/  - 友链: /link/  - 关于: /about/  - RSS: /atom.xml
Copy after login

设置页面导航样式

page_nav_style: CIRCLE  # CIRCLE|ROUND_RECT
Copy after login

设置面包屑

breadcrumb:  isShow: true # true|fase
Copy after login

设置盒子

toolbox:  isShow: true # true|fase
Copy after login

设置文章标题对齐方式

post:  header_align: center # left|center
Copy after login

启用分类页面

  1. 在博客根目录执行 hexo new page category
  2. 修改 my-blog/source/category/index.md里面的内容:

---title: categorylayout: categorycomments: false---
Copy after login

启用标签页面

  1. 在博客根目录执行 hexo new page tag
  2. 修改 my-blog/source/tag/index.md里面的内容:

---title: taglayout: tagcomments: false---
Copy after login

启用友链页面

  1. 在博客根目录执行 hexo new page link
  2. 修改 my-blog/source/link/index.md里面的内容:

---title: linklayout: linkcomments: false---
Copy after login

启用关于页面

  1. 在博客根目录执行 hexo new page about
  2. 修改 my-blog/source/about/index.md里面的内容:

---title: aboutlayout: aboutcomments: false---
Copy after login

启用统计

google_analytics:baidu_analytics: 57e94d016sfsf1fba3xxxx8a2b0263af0
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template