|
|
7 n6 ]* M; @+ x: n! T
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
, m, J& _8 ]' f2 y- R" B. m+ H- {$ l, i9 L
1.下载主题文件8 a# V1 A7 ^8 v! ~
0 t5 S' L/ a& J: ]0 _/ t0 T* {在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。& N/ o* _5 \3 g( u+ x1 t* m
2 E* l9 M5 N$ d, Y
2.创建 Typecho 主题目录
* e# f7 I( l+ Y S6 m: w ~7 t- E: q& v- Z7 k# j( ?
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
( [' r1 j4 ]) N3 b- ^. a: Z
+ O2 \5 D. {0 z3.解压主题文件4 V6 m1 s& |5 r; @. k. Y) `0 P& k+ |
; F- q4 \0 K- z$ p
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:3 u8 l4 G' a' e
9 ~, {% O/ U5 L& w4 {$ Rassets/
# m9 m/ y; Z, W8 Z2 F( @dist/1 s; J; `. o5 q1 b; c
inc/
! F4 i6 H4 j1 L) w4 I- D- T6 ~7 enode_modules/) v4 L; [1 \) v( b
partials/8 C L; Q. J8 C7 m( _5 ^5 m
templates/
1 ^/ Z. @! j. {6 q, ].babelrc3 x& P9 q: R. G* H+ r
.eslintrc.js
k H8 i( ?8 ?) t* mgulpfile.js" @/ P1 i) @4 M9 ~
package.json+ x2 `+ L# `& \ j
webpack.config.js
; R' _5 \- R" p4.修改主题样式表文件
. d3 X) W+ S- m: ]
* c" D1 Y$ z9 i' _( J8 e! }8 t修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:+ R; D" `' _- ?( e X; s
! T) r2 Q! }2 T3 K+ k: M7 l! B
css
! e+ T) l. d$ X" }* _background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
- ]1 J, p6 F7 D, O修改为:
I7 {$ P& W4 }- k! f( {& f: D' p& A* f
css
5 }. a5 ~4 {1 T" J# pbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');4 @3 N' I. ^0 L0 x0 r; R- E" v
5.创建 Typecho 主题配置文件
- Q6 q' C2 R/ t0 D+ J9 D( x3 s1 d! ~5 y8 C2 j8 }
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
- x, C/ Y7 E! p! x9 n; N
d# `9 H5 _7 ~3 {php
3 Z* L6 C+ j( U- f- s; V<?php: [4 {; w9 T" F5 Z8 \
return array(
) q/ ]. t# K2 g S9 K7 A/ B 'name' => 'Heropress Pro',
. v& f* ]# p" F; \4 I0 D 'description' => 'Typecho adaptation of Heropress Pro theme', m2 F) B% ~& v% v4 \/ E+ \
'version' => '1.0',. |. ~, m7 g! X6 {/ K& X: i
'author' =>'Your Name',. t% q) F1 A) O6 s. ]! b
);
3 o$ z: H. }, E5 f2 U' } {& ?6.配置主题布局文件
6 t$ w" ?& k1 L, Y. k1 F: Q# n3 g; A# m- K
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:% h3 v Z$ q% `" {
# t- m* N( V, `9 g8 w
php
$ n- l/ L/ n3 H+ [" j<?php while ($this->next()): ?>
0 W& m- N( j8 g) Z* O<div class="post">
# f" F6 U0 o3 x" U; T$ W6 W <h2 class="post-title">
8 @# w# b8 b* c0 u ? <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>0 A1 E+ _4 A; p' H" G/ j
</h2>
5 |4 q3 W. j/ v) F5 Q9 D5 N <div class="post-meta">3 h8 [9 j. b' I- A0 S
<span><?php $this->date('F j, Y'); ?></span>
$ W+ R) Q# v0 M, x; v <?php if($this->tags): ?>
4 h+ U; a6 F+ R7 D; j" V <span class="post-tags">
" @/ f h1 W' ] <?php $this->tags(', ', true, 'none'); ?>( s1 l1 `9 Z- p' Z9 E2 ]' [. Z. v
</span> J3 |7 Z0 U! ^; U$ U6 s
<?php endif; ?>
6 n" n) @) X7 `9 I7 x9 L: @' t </div>
8 g9 i+ l5 ~) K/ R <div class="post-content">
$ T, v& d }. L7 ?. v6 m <?php $this->content('Read more »'); ?>$ C7 c/ H% |* o
</div>
4 i) J+ ]; C* A- Y' A8 j' M</div>
* y T* W$ R' O$ Y<?php endwhile; ?>
; T) s# K3 D3 k" J- E9 V7.调用 Typecho 函数
4 e5 G2 U6 c+ m9 O$ i( i7 F, {
; {5 c- i7 j6 \) ~2 Y7 c在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
# x2 `) d& C' S% e
$ j- L7 {8 ]" e- q% x: o用 the_title() 替换 get_the_title()。; ~- `) f8 u9 u
8 w' B1 q; r8 s) d用 the_permalink() 替换 get_permalink()。
, {" S: Q9 S/ s
/ c+ P( F- B+ |9 n# f! O/ R6 H用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
6 W: q) Q8 |1 u9 G1 _& Y
; \0 @3 y# U0 D- p1 Q用 $this->content('Read more »'); 替换 the_content('Read more »')。
* M( _: i8 S7 r h' G( a$ s) y' @6 e6 K2 R! p5 P/ O
8.添加 Typecho 标记# n/ S: [% h1 g/ P' S2 D
; p* H( \" e/ T" _$ M; y7 W
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:, U, @9 d, F( O m6 N. B
- N/ e+ ?! u3 B: L$ p+ }% Y
php1 \( s- W% ^) t" q7 t* J! A% e5 O1 i
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
1 A# d9 K. f% N7 L<?php $this->need('header.php'); ?>! D6 j' S; ^3 c m; c, O
<div id="main" class="container">
6 z/ q% y5 D) x$ i( { <div id="content" class="row">6 O0 Q9 ^7 k/ |+ Y
<?php while ($this->next()): ?>
! j4 K9 G9 v, k0 O8 v6 _ <div class="col-md-8 col-md-offset-2">
( G7 j9 l& C. E4 s <div class="post">
' I7 t& R2 D8 i) G/ U% {/ j <h2 class="post-title">/ d; G3 ?4 D: Y0 t H$ }( {) G
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
; K3 f8 u+ h: ] a6 S. i" A </h2>
3 g2 n' B% |0 I5 k# P/ G <div class="post-meta">+ U, |# I u/ r4 Y: s
<span><?php $this->date('F j, Y'); ?></span>
) S1 v' ^5 y K; M8 f <?php if($this->tags): ?>
6 b% j6 l$ x+ l. K <span class="post-tags">
/ g$ p8 J% y8 h) ^2 P <?php $this->tags(', ', true, 'none'); ?>
4 G9 u, j& ?9 L( S* U$ L/ ~ </span>
2 n1 ]1 G7 \) I6 d- ?! b! f <?php endif; ?>
8 I' i+ Z7 a+ z0 U( q6 E5 n </div>- }/ C6 c& k3 ~/ T3 X
<div class="post-content">, ~4 D2 e; r2 {9 t
<?php $this->content('Read more »'); ?>/ t& _. L. D( B& w1 n4 H
</div>$ {% |. t4 t) f0 J# {/ A
</div>1 W0 Y6 t" q1 j! A( `& ?0 S
</div>0 }, Z# w9 `9 d3 z7 C* Q
<?php endwhile; ?>
8 y b9 Z! Y% \8 H- U8 } </div>3 y+ F i4 G3 U1 B- k. U& z4 a( V0 b, m
</div>7 m" j3 c U' R/ k, a. g" i
<?php $this->need('footer.php'); ?>1 B/ x5 Q3 p# V# W8 C0 D+ Z
9.调整其他可能需要的文件和代码
5 c( E4 E0 x* P
' ~7 e4 N* l+ C$ l, o' J$ [根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:: o/ o5 a* F$ N Q( Y' U9 p
4 L, u9 x) u8 g: khtml
1 k+ i: e _+ m7 B3 c g<title><?php $this->archiveTitle(array(" B& D9 ?2 I9 D/ R4 g
'category' => _t('%s'),, a# V$ ~) R0 J# ]
'search' => _t('Search "%s"'),
5 J3 O' r" r3 N6 Y 'tag' => _t('Tag "%s"'),
/ t1 V; B3 r t" `: w5 M 'author' => _t('Author "%s"'),
l, q. T, H0 t% Q Q 'date' => _t('Archive "%s"'),
$ D1 h/ N' \! L" H3 T# l 'default' => ''
8 h% ~. V0 B8 k, D% r5 B x ), '', ' - '); ?><?php $this->options->title(); ?>
8 q+ N* }. W. p3 A7 s</title>
$ |; g+ c) D8 g& x$ ^+ s10.使用主题$ W7 B$ c' g% R& y. J7 P
5 R' I0 x) }' F! d, w2 j; q# t
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。/ P3 K, W5 Q/ @1 n' s/ o# O
1 n& d+ x# `, l5 W X @以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
4 t) N6 I% K2 j* y. \+ C2 r0 k" @; g/ \
|
|