当前位置: 首页 > Web前端 > HTML

2017年最新的hexo——基本设置与认识

时间:2023-04-02 11:51:34 HTML

前言前面几篇已经让大家搭建了自己的博客,通过网络访问。博客的操作可以通过基本的发帖和编辑来实现。其他的一些,包括分页,标签,分类,不需要自己实现,只要使用命令hexog即可。如果你看过下一个主题官网介绍的配置,我会帮你理解不清楚的地方。解释。理解文章和页面当前面的都做了之后,现在需要创建三个页面:category页面categories、label页面tags、about页面about,以及在根目录source中的一个html页面为了完善博客的基本内容。根目录配置文件中有个设置要设为true#writingnew_post_name::title.md#newpostsdefault_layout:posttitlecase:false#Transformtitleintotitlecaseexternal_link:true#openexternallinksinnewtabfilename_case:0render_drafts:falsepost_assettrue_folder:##设置后,新建页面时,会自动生成一个同名文件夹,方便管理。hexonewpagecategorieshexonewpagetagsindex.mdsettinginshexonewpageabouttags---title:tagdate:2017-03-0119:31:10type:"tags"---index.mdsettingincategories---title:categoriesdate:2017-03-0119:42:08type:"categories"---主题目录下的配置文件设置如下menu:home:/categories:/categoriesabout:/aboutarchives:/archivestags:/tagscommonweal:/404.html一篇文章应该在顶部包含以下属性---date:2017-03-07title:xxxxxxxxxtags:xxxx#如果不想加标签可以留空类别:xxxxx#如果你不想添加分类,可以留空---添加ForkmeonGitHub,进入网址https://github.com/blog/273-g...选择你喜欢的style,复制代码,添加到themesnextlayout_layout.swig的body标签中,记得把里面的url换成自己的!把侧边栏头像改成圆形,鼠标停留在上面产生旋转效果修改themesnextsourcecss_commoncomponentssidebarsidebar-author.styl:.site-author-image保证金:0自动;填充:$site-author-image-padding;最大宽度:$site-author-image-width;高度:$站点作者图像高度;边框:网站作者图片边框颜色;/*开始*/border-radius:50%webkit-transition:1.4sall;moz-过渡:1.4s全部;ms-transition:全部1.4s;过渡:1.4s全部;/*结束*/}/*开始*/.site-author-image:hover{background-color:#55DAE1;webkit-transform:旋转(360deg)缩放(1.1);moz变换:旋转(360deg)比例(1.1);ms-transform:旋转(360deg)scale(1.1);transform:rotate(360deg)scale(1.1);}/*end*/添加音乐到网易云音乐搜索喜欢的音乐,点击生成外链播放器,复制代码直接放在最后博文的高度设置为0隐藏播放器,但是仍然可以播放音乐,设置auto为0手动播放,默认为1自动播放,可以把代码放在themes/next/layout/_custom/sidebar.swig文件,播放器会在站点预览中显示,实现文章标题栏显示更多文章信息hexo-wordcount实现官方文档中没有提到这个,我告诉你,它可以使您的文章标题位置更具信息性。本插件可以添加文章标题位置、文章字数、文章预计阅读时间安装WORDCOUNT执行命令npminstallhexo-wordcount--save主要功能字数:WordCount预计阅读时间:Min2Read总字数:TotalCount查看post.swig模板模板位置:themesnextlayout_macropost.swig{%iftheme.post_wordcount.wordcountortheme.post_wordcount.min2read%}{%iftheme.post_wordcount.wordcount%}{%iftheme.post_wordcount.item_text%}{{__('post.wordcount')}}{%endif%}{{wordcount(post.content)}}Word##我在这里添加了一个单元{%endif%}{%iftheme.post_wordcount.wordcountandtheme.post_wordcount.min2read%}<跨度类="post-meta-divider">|{%endif%}{%iftheme.post_wordcount.min2read%}{%iftheme.post_wordcount.item_text%}{{__('post.min2read')}}{%endif%}{{min2read(post.content)}}min##我在这里添加了一个转到unit{%endif%}

{%endif%}因为代码已经写好了,所以不需要改什么,只需要根据自己的需要修改一些地方即可,并且我还修改了图标我在FontAwesome官网找了一些图标替换掉label中对应的class值就可以达到目的,因为hexo默认引入了这个字体图标库,你可以改变图标所在的地方其他主题配置也是评论系统推荐的,数据统计使用算子统计,搜索系统使用本地搜索,内容分享使用多话分享。它是最容易配置和易于使用的。nexttheme的官网文档中写道,相关配置的设置方法是在配置文件中设置值。操作很简单,不再赘述。如果您有任何其他问题,请询问。定义CSS样式并更改其中的一些设置。最近访客