时间：2024-01-15 16:48:01 | 来源：网站运营
时间：2024-01-15 16:48:01 来源：网站运营
如何制作个人主页？：
在线咨询
themes/next/_config.yml打开主题配置文件，找到menu字段，更改为： menu: home: / || fa fa-home tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archivetags为标签页界面，以标签为分类基准展示整个站点的文章；categories为归类页界面，以类别为分类基准展示文章。tags: /tags/ || fa fa-tags中，/tags/为页面的前端路由。fa为图标的标签属性，用于统一化样式。fa-tags为图标的名称，next主题默认使用的图标库是 Font Awesome，如果想更换图标，只需要到该网站记下对应图标的名称，然后在配置文件中替换即可。OK，设置好后进入终端，键入： hexo new page "categories" hexo new page "tags"此时，我们已经新建了两个页面，在themes/sources文件夹下可以看到这两个同名文件夹，每个文件夹下都有一个index.md文件。我们分别打开，进行修改： # tags/index.md --- title: 我是选择标签的页面 date: 2022-04-14 10:58:17 type: "tags" # 设置页面类型 comments: false --- # categories/index.md --- title: 我是选择类别的页面 date: 2022-04-14 12:13:13 type: "categories" comments: false ---yaml语法的框架了，不知道或者想回顾yaml语法的话移步：开发者必须要掌握的 YAML 知识点。将其修改为： --- title: 张三的自我救赎 date: 2022-04-24 10:25:34 categories: - 随笔 tags: - 张三 - 笔记 keywords: - 张三 - 救赎 description: "这是张三的自我救赎。" ---title是文章的标题；date是文章的创建时间；categories是一个数组，[随笔]表示该文章的类别是随笔，[随笔, 子随笔]表示该文章的类别是随笔下的子类别子随笔；tags数组中是要添加的标签；keywords数组中是文章关键词；description是文章的描述，在主页中会显示成摘要。接着走一波hexo clean; hexo g; hexo s就可以在tags和categories页面找到这篇文章啦。themes/next/source/css/_common/post/post.styl路径，找到.use-motion选择器，在if(hexo-config('motion.transition.post_block'))后面进行修改，添加上.post-block： .use-motion { if (hexo-config('motion.transition.post_block')) { .post-block, .pagination, .comments { opacity: 0; } .post-block { margin-top: 0px; margin-bottom: 20px; padding: 25px; background:rgba(255,255,255,0.9) none repeat scroll !important; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } }themes/next/_config.yml，修改主题配置文件的tag_icon字段： tag_icon: true这将用图标，替换标签的#。themes/next/source/css/_common/components/post/post.styl，找到.post-body p a选择器，将其替换为： .post-body p a{ color: #330099; border-bottom: none; border-bottom: 1px solid #330099; &:hover { color: #FF8C00; border-bottom: none; border-bottom: 1px solid #FF8C00; } }themes/next/_config.yml，修改主题配置文件的codeblock字段： codeblock: # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: night bright # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: false # Available values: default | flat | mac style: maccodeblock字段会更改代码块的主题样式，感兴趣的同学不妨都尝试一下，找到自己喜欢的风格。themes/next/_config.yml，修改主题配置文件的custom_file_path字段，将style的注释取消： # Define custom file paths. # Create your custom files in site directory `source/_data` and uncomment needed files below. custom_file_path: style: source/_data/styles.styl在blog/source下新建一个_data文件夹，文件夹中新建一个styles.styl文件（不用VScode的同学，可以新建一个styles.txt，再更改它的后缀）。在上面编辑以下代码： code { color: #ff7600; background: #fbf7f8; margin: 2px; } .highlight, pre { margin: 5px 0; padding: 5px; } .highlight, code, pre { border: 1px solid #d6d6d6; }themes/next/_config.yml，修改主题配置文件的mediumzoom字段： mediumzoom: true注意，fancybox和mediumzoom是冲突的，所以保存fancybox: false就好。themes/next/_config.yml，修改主题配置文件的toc字段： toc: enable: true # Automatically add list number to toc. number: false # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false # If true, all level of TOC in a post will be displayed, rather than the activated part of it. expand_all: true # Maximum heading depth of generated toc. max_depth: 6themes/next/layout/_macro，新建一个名为passage-end-tag.swig的文件，键入以下代码： <div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">~~~~~~~~~~~~~~ 本文结束 <i class="fa fa-paw"></i> 感谢您的阅读 ~~~~~~~~~~~~~~</div> {% endif %} </div>然后进入路径themes/next/layout/_macro/post.swig，找到{### END POST BODY} ###。在它的后面键入以下代码： {% if not is_index and theme.passage_end_tag.enabled %} <div> {% include 'passage-end-tag.swig' %} </div> {% endif %}如下图所示：themes/next/_config.yml，在主题配置文件的末尾添加passage_end_tag字段： # 文章末尾添加结束标记 passage_end_tag: enabled: truethemes/next/_config.yml，修改主题配置文件的creative_commons字段： creative_commons: license: by-nc-sa sidebar: false post: true language: deed.zhthemes/next/_config.yml，修改主题配置文件的reward_settings、reward字段： reward_settings: # If true, reward will be displayed in every article by default. enable: true animation: false comment: 在线要饭 ~~ reward: wechatpay: /images/wechatpay.png alipay: /images/alipay.png然后，进入themes/next/source/images路径，将你的收款二维码放在里面。关键词：
