|
|
# I, m$ A% z6 S# O( \1 l" m& g O可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:6 r& s- m; G, k& S) ~9 @
% m; ]9 G# [6 Q$ o9 ^# O& _0 u5 d1.下载主题文件
, o) U" }% q8 i0 F$ V
! o% A+ v3 L5 d8 {: O. L% m9 u4 L在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
1 u" g" q3 `& v6 B, ^( U
, N4 \* a; a6 j3 m2 Z' N2.创建 Typecho 主题目录7 J! }2 b; a) ~7 c7 B @
# G5 c1 p8 \! Y- T$ Q9 C, ~
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
+ e2 {9 k# u# c- F: `5 Q( k
' o) F" a) S& v" Y7 ^) Y3.解压主题文件* O, X1 ?% j; X+ F( n' O' d: P
- |3 E: ~" c- g8 W, y4 R1 b: i将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
+ L/ s# Z8 F1 |) T3 w2 @: w0 _3 Y3 v. Y1 I! w
assets/
5 y- {# |; s" w# I6 f/ Z$ |dist/' s$ O$ ?" ~& [9 l
inc/1 N I: |) r" e# l2 @. Y$ _
node_modules/! Z1 ^3 f f" i! T- x; V0 B
partials/! t8 ?% i% }' h0 I
templates/1 V2 [; O, x# h; \7 b. i
.babelrc6 d# \$ z7 c7 o" [7 q U
.eslintrc.js
# ?; g- j1 c% X: Wgulpfile.js
' a: k0 L4 n: ]) wpackage.json
. u) ]4 E$ \9 H% `7 i s+ cwebpack.config.js
9 d# A" h8 H% ?- J: p& x4.修改主题样式表文件
) t, F9 e# {% U4 l6 ?* ], H" w
( K, K, b; L+ m$ H& m+ |修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
2 Y. K' ~8 ?. d3 l0 f- o2 S$ M; ~+ I3 q @7 F) i
css% M3 [0 D& q* Z! E
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');; _7 K& E8 f3 G. H
修改为:2 n0 |- A# y: [' j- Y/ h3 a
& i a8 {3 _# D) R P5 c* O$ \css4 V. d7 Z r m) K3 R/ i- f: x* k
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
( V/ k1 q7 U/ r+ r$ k" M5.创建 Typecho 主题配置文件
3 d Q$ i2 X! G0 F6 o2 @; z# b8 S8 d9 Y& \ r( @' k, M8 R
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:* K& A9 [, i: [9 N! J7 I3 ~
4 C4 B c1 Y0 sphp5 e) x, k+ d( ^
<?php, A% P1 y% I8 G: l( Y
return array(3 w3 D9 v& u E" X9 _+ E. x1 K
'name' => 'Heropress Pro',3 c" L8 u/ h) B: y3 {1 n
'description' => 'Typecho adaptation of Heropress Pro theme',
0 F! f" d/ e) q" E 'version' => '1.0',
2 g# B4 p, r l4 `$ p 'author' =>'Your Name',
& r" K/ p) j& X) H! e);
6 l+ l7 P# f* |/ J. x$ j3 \6.配置主题布局文件" W+ L* Z: ]: f% _4 N6 g; J- m) H
& a# |" C9 z2 W" b- ?# ^
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
8 F0 v% d _, m3 r& _1 [# i+ g# L2 U0 |2 V7 i9 ]& x5 [& a' F8 R
php; o$ ~7 L9 _+ S! r, @2 P6 u! Z
<?php while ($this->next()): ?>
2 b( w, D' l7 @) C% x' b$ d<div class="post">
2 Y2 O5 Z/ D N* F! E <h2 class="post-title">
7 H3 ]2 a- c# q0 {. ^# U <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>5 A9 J' U, A) G) m
</h2>- B3 L5 D( w& H8 w. D' ]( ^9 W: D
<div class="post-meta">
8 n0 F' ~* U4 H5 F, }8 U" R <span><?php $this->date('F j, Y'); ?></span>3 `3 ~5 _. n8 x2 H2 K5 E/ I
<?php if($this->tags): ?>
/ ~/ k- K2 u# D <span class="post-tags">
, |5 M, q2 V, D$ X. q, T U! P1 @6 I <?php $this->tags(', ', true, 'none'); ?>1 \; P: a3 v4 ~% y' H
</span>+ Q2 E7 I" Z4 n7 `. g
<?php endif; ?>' k, r$ }- Y# J9 r1 r) w
</div>! `& y; M2 ~7 o& S) V% f
<div class="post-content">/ B# H5 |3 G" U/ n6 l
<?php $this->content('Read more »'); ?>% b9 B% p' a: k$ v7 M! W: V' Z, P
</div>
: l+ x( _' k% A2 p- V! ~</div># Q1 V* n. P1 E/ K, ?% I
<?php endwhile; ?>
+ v. N$ c! ?9 y+ H; x; L7.调用 Typecho 函数
x) T( c% ]* ] ]1 V+ W6 V
$ F; e, o' Y2 ?6 M. [2 I. V4 K* J+ K! @在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:0 t* n4 D" j# }: ~
/ C' i. U6 a& D+ U$ A1 M1 s; W% B
用 the_title() 替换 get_the_title()。- B5 A% C l. \% D! E
" I. r \' g7 P8 x# t用 the_permalink() 替换 get_permalink()。
5 Y3 O) Z* q2 e/ g* T0 G- u6 f" t: v( Z! z4 [
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。5 c: W5 m4 |& q6 k% S& X
4 p1 s' q8 m! g1 Z
用 $this->content('Read more »'); 替换 the_content('Read more »')。
3 P3 C1 T( k0 L( z* i: |- K" e
) _, d) Q3 [' @: Y* m8.添加 Typecho 标记
2 z0 b7 [: Y" h- s- c0 C# a
4 a, _, _6 G B在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
6 X7 F- y( E" E' O
9 t' S& a1 N' Q: Q! ] Tphp" V! T" k8 `9 l$ b
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
$ x9 @, ]! N, ^/ R! _$ V<?php $this->need('header.php'); ?>7 Q4 Q) `/ k" e- h
<div id="main" class="container">
3 X/ x: o4 B. i; l$ O, x. e <div id="content" class="row">
( Z: o. V1 d+ d8 R1 P8 X5 v& M# o <?php while ($this->next()): ?>6 A3 F8 E' o% X
<div class="col-md-8 col-md-offset-2">
f E- y- p% I# F <div class="post">6 D$ ]) n# K" [9 J# ~
<h2 class="post-title">, N7 u( b; u; [+ k1 i
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>6 t2 L7 f/ X8 S9 P3 ]5 t( E4 @4 ?
</h2>$ K9 y7 w0 F% N& ?. v; f, X7 I) P
<div class="post-meta">
8 b2 D! f3 X4 |5 z4 { <span><?php $this->date('F j, Y'); ?></span>" A2 ^ g$ Y4 L
<?php if($this->tags): ?>1 K2 i; z* Z6 P) x8 J' S& G2 v2 Z
<span class="post-tags">* \9 L! k6 O; @$ [2 ~( s: Z" E: K( G
<?php $this->tags(', ', true, 'none'); ?>2 m& x1 ?& I) q3 ?* n' O3 f4 S
</span>0 f$ X8 b$ U! L) a) I
<?php endif; ?>( M( t V4 r2 w) ^& s/ i
</div>2 T% C' p7 k1 c! |- @8 S: I4 A
<div class="post-content">& i7 g) A# [5 ?1 F2 |# k3 f
<?php $this->content('Read more »'); ?>
5 L* \8 w3 r% p% M/ S* m" t; b5 [ </div>, g: |) ^. j( D: H4 F m% {2 q
</div>
- Q' \9 `1 U- M- R' C </div> G/ ]: a+ T- [3 P# k
<?php endwhile; ?>0 R4 I% _8 s" A7 n, U& u
</div>
4 F$ b9 y4 E- `</div>$ U- L1 L; v, W
<?php $this->need('footer.php'); ?>
: ^ }0 F1 ~! d: s$ g9.调整其他可能需要的文件和代码
. K1 R$ }! m3 N' f/ d! W5 K9 t p& b
" ]- ?7 L( _% n. p根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
$ b$ l4 F' c, O$ G# I a+ _2 n6 e' A. S2 G" {8 U
html
$ `0 N3 z% o3 Y- ~- I6 A<title><?php $this->archiveTitle(array(- D2 ]( Y" j( `3 Z
'category' => _t('%s'),8 k: u1 N. x, l$ Q" d
'search' => _t('Search "%s"'),
9 x% @" |: F! c 'tag' => _t('Tag "%s"'),
4 Z' ~ Z0 G1 {( O3 H; m& A' k$ \; ^5 m 'author' => _t('Author "%s"'),
+ {1 g, o3 k0 ?/ X 'date' => _t('Archive "%s"'),
( R% }* |5 Z; W, |$ e 'default' => '' C* J5 @/ a! I9 t: R) T: h
), '', ' - '); ?><?php $this->options->title(); ?>/ K& ^- B4 }; Q" Y
</title>
! q4 R' x0 p9 i7 c$ D10.使用主题. ]7 d4 E! _; x" A2 D3 \; T! V" ~8 [0 K
( F8 b- _6 T4 a' W+ K
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。( k a6 k% Z% q$ {
% X& Z; M, [: [0 L, M" u/ i
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
5 j q* j' T0 j" C4 L" Z! F
; q1 T' K4 V* G+ [ |
|